Permalink in custom template extension

[alexnozer]

Operating system

Windows 10 Pro Workstation 22H2

Eleventy

2.0.1

Describe the bug

Hello!

I found an issue with the permalink key in the data cascade when handling custom template extensions.

I added css file handling and wanted to override output file path with permalink key. I tried to write this to frontmatter data and json data file. As a result, in the compiler handler, the contents of the file should come as the first argument, and along with it comes the path from the permalink.

src/index.11tydata.json

{
  "permalink": "app/style.css"
}

src/index.css

---
permalink: app/style.css
---
html {
  color: red;
}

eleventy.config.js:

module.exports = function(eleventy) {
  eleventy.addTemplateFormats("css");

  eleventy.addExtension("css", {
    outputFileExtension: "css",

    compile: async function(inputContent, inputPath) {
      console.log(inputContent); // 'app/style.css' stay in file content

      return async (data) => {
         return inputContent;
      }
    }
  });

  return {
    dir: {
      input: "src",
      output: "dist",
    }
  }
}

Reproduction steps

1. Create project directory css-test
2. Install Eleventy v2.0.1
3. Create src directory inside css-test
4. Create eleventy.config.js file inside css-test
5. Add config script as described above
6. Create index.css file inside css-test/src
7. Add some css code to index.css file
8. Add frontmatter with permalink key as described above or create index.11tydata.json inside css-test/src with content as described above
9. Run npm @11ty/eleventy
10. See console output

Console output:

app/style.css
html {
  color: red;
}

app/style.css from permalink key stay in file content. This leads to errors if using additional tools like postcss. The rest of the data from the data cascade is not left in the inputContent argument.

Expected behavior

Expect console output:

html {
  color: red;
}

Reproduction URL

No response

Screenshots

No response

[monochromer]

I used this workaround:

https://github.com/web-alchemy/eleventy-plugin-lightningcss/blob/83a375a32c22e5edf1df443a6c14024655b38490/.eleventy.js#L55-L61

compileOptions: {
  permalink(inputContent, inputPath) {
    return (data) => {
      return data.permalink
    }
  }
}

[alexnozer]

compileOptions: {
  permalink(inputContent, inputPath) {
    return (data) => {
      return data.permalink
    }
  }
}

Thanks, it works!

[alexnozer]

But I still have a question: save value of the permalink key into the file after reading frontmatter is a bug or this is intended for some purpose 🤔

[harrislapiroff]

I ran into this one as well. The workaround worked for me. Thanks @alexnozer