Permalink Configuration for CSS Files after Migrating to 1.0

[openmindculture]

After migrating to eleventy 1.x and updating the postCSS configuration accordingly, build fails with a warning about a

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Output conflict: multiple input files are writing to `dist/{{ page.fileSlug }}/index.html`. Use distinct `permalink` values to resolve this conflict.
[11ty]   1. ./src/styles.css
[11ty]   2. ./src/decoration.css
[11ty]   3. ./src/print.css (via DuplicatePermalinkOutputError)

After researching in 11ty docs, migration guide and in Google search results without finding the relevant information, I came to the conclusion that we probably need to specify an explicit filename for each CSS file.

Using front matter like this

---
permalink: print.css
---

adds invalid CSS, so how to tell Stylelint to ignore the front matter lines - or - even better - use a generic default in eleventy configuration based on the file names, so that we do not need to insert front matter code at all?

Update: the above example does not even seem to work. Silences the error, but the output CSS is broken now (an include file, design-tokens.css, is now failing to load in the exported website, although it should only be used by postCSS, so probably postCSS is not working anymore).

Package versions:

"@11ty/eleventy": "^1.0.2",
"eleventy-plugin-postcss": "^1.0.4",
"postcss": "^8.3.0",
"postcss-cli": "^8.3.1",
"postcss-custom-properties": "^11.0.0",
"postcss-custom-selectors": "^6.0.0",
"postcss-import": "^14.0.2",
"precss": "^4.0.0",
"stylelint": "^14.10.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-standard": "^27.0.0",
"clean-css": "^5.3.1",
"cssnano": "^5.1.13",

Code: https://github.com/openmindculture/ingo-steinke.de/pull/100

[openmindculture]

I did not add the label "needs-triage" or I did not intend to, but I am not able to remove it.

[thinkverse]

I did not add the label "needs-triage" or I did not intend to, but I am not able to remove it.

It's added automatically by the issue template.

[pdehaan]

@openmindculture I'm not seeing that error, but I seem to consistently get the following error when cloning PR#100 and running npm run build:en

 npm run build:en

> [email protected] build:en
> eleventy --config .eleventy.en.js # && node_modules/postcss-cli/bin/postcss src/*.css --dir dist_en && babel src/js -d dist_en/js

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering css template ./src/decoration.css (via TemplateContentRenderError)
[11ty] 2. /private/tmp/ingo-steinke.de/src/decoration.css:1:1: Unnecessary curly bracket (via CssSyntaxError)
[11ty]
[11ty] Original error stack trace: CssSyntaxError: /private/tmp/ingo-steinke.de/src/decoration.css:1:1: Unnecessary curly bracket
[11ty]     at Input.error (/private/tmp/ingo-steinke.de/node_modules/postcss/lib/input.js:148:16)
[11ty]     at Parser.error (/private/tmp/ingo-steinke.de/node_modules/sugarss/parser.js:367:22)
[11ty]     at Parser.checkCurly (/private/tmp/ingo-steinke.de/node_modules/sugarss/parser.js:255:14)
[11ty]     at Parser.rule (/private/tmp/ingo-steinke.de/node_modules/sugarss/parser.js:192:10)
[11ty]     at Parser.loop (/private/tmp/ingo-steinke.de/node_modules/sugarss/parser.js:46:14)
[11ty]     at parse (/private/tmp/ingo-steinke.de/node_modules/sugarss/parse.js:14:10)
[11ty]     at new LazyResult (/private/tmp/ingo-steinke.de/node_modules/eleventy-plugin-postcss/node_modules/postcss/lib/lazy-result.js:133:16)
[11ty]     at Processor.process (/private/tmp/ingo-steinke.de/node_modules/eleventy-plugin-postcss/node_modules/postcss/lib/processor.js:28:14)
[11ty]     at Object.process (/private/tmp/ingo-steinke.de/node_modules/eleventy-plugin-postcss/src/post-css.js:5:29)
[11ty]     at Object.<anonymous> (/private/tmp/ingo-steinke.de/node_modules/eleventy-plugin-postcss/src/extension.js:15:22)
[11ty] Copied 48 files / Wrote 0 files in 0.54 seconds (v1.0.2)

Removing eleventy-plugin-postcss plugin seems to make it build:

[11ty] Writing dist_en/sitemap.xml from ./src/sitemap.liquid
[11ty] Writing dist_en/index.html from ./src/index.liquid
[11ty] Benchmark    506ms  68%     1× (Configuration) "postcss" Liquid Paired Shortcode
[11ty] Copied 48 files / Wrote 2 files in 0.67 seconds (v1.0.2)

But I've also removed the postcss and babel steps from the package.json script.

[pdehaan]

OK, I think I figured out my issue. Apparently https://github.com/postcss/sugarss is indent-based CSS syntax for PostCSS, so it didn't like semicolons and curly brackets. I can seemingly get everything to compile without errors if I comment out the parser: 'sugarss' in .postcssrc.js and comment out eleventyConfig.addPlugin(PostCSSPlugin) in .eleventy.en.js.

git diff src | cat
diff --git a/src/decoration.css b/src/decoration.css
index 553a60b..03331f6 100644
--- a/src/decoration.css
+++ b/src/decoration.css
@@ -1,6 +1,3 @@
----
-permalink: decoration.css
----
 @import '_includes/design-tokens.css';

 /* decoration layer is styled in critical.css */
diff --git a/src/print.css b/src/print.css
index 00dfdca..8674d97 100644
--- a/src/print.css
+++ b/src/print.css
@@ -1,7 +1,3 @@
----
-permalink: print.css
-------
-
 html,
 body,
 h1,
diff --git a/src/styles.css b/src/styles.css
index 12c661c..dee2204 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,3 @@
----
-permalink: styles.css
----
 @import '_includes/design-tokens.css';

 img {

diff --git a/.eleventy.de.js b/.eleventy.de.js
index eef18c3..6f9367e 100644
--- a/.eleventy.de.js
+++ b/.eleventy.de.js
@@ -8,7 +9,7 @@ module.exports = function (eleventyConfig) {
     strictFilters: false, // renamed from `strict_filters` in Eleventy 1.0
   });
 
-  eleventyConfig.addPlugin(PostCSSPlugin);
+  // eleventyConfig.addPlugin(PostCSSPlugin);
 
   // explicit + fast way to copy certain files and folders
   eleventyConfig.addPassthroughCopy('src/fonts');
diff --git a/.eleventy.en.js b/.eleventy.en.js
index 04a902d..7eb9ec4 100644
--- a/.eleventy.en.js
+++ b/.eleventy.en.js
@@ -8,7 +9,8 @@ module.exports = function (eleventyConfig) {
     strictFilters: false, // renamed from `strict_filters` in Eleventy 1.0
   });
 
-  eleventyConfig.addPlugin(PostCSSPlugin);
+  // eleventyConfig.addPlugin(PostCSSPlugin);
 
   // explicit + fast way to copy certain files and folders
   eleventyConfig.addPassthroughCopy('src/fonts');

diff --git a/package.json b/package.json
index 486a58e..c45328c 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
         "eslint": "eslint src",
         "stylelint": "stylelint src/*.css src/_includes/*.css",
         "build": "npm run build:de && npm run build:en",
-        "build:de": "eleventy --config .eleventy.de.js && node_modules/postcss-cli/bin/postcss src/*.css --dir dist && babel src/js -d dist/js",
-        "build:en": "eleventy --config .eleventy.en.js && node_modules/postcss-cli/bin/postcss src/*.css --dir dist_en && babel src/js -d dist_en/js",
+        "build:de": "eleventy --config .eleventy.de.js && postcss src/*.css --dir dist && babel src/js -d dist/js",
+        "build:en": "eleventy --config .eleventy.en.js && postcss src/*.css --dir dist_en && babel src/js -d dist_en/js",
         "codeceptjs": "codeceptjs run --steps",
         "codeceptjs:headless": "HEADLESS=true codeceptjs run --steps",
         "codeceptjs:ui": "codecept-ui --app",

[openmindculture]

My personal workaround decision, unless I need any eleventy 1.0 feature: keep working with eleventy 0.x, ignore 1.0 and wait for the upcoming eleventy 2.0 before attempting another major version upgrade - unless it turns out that there is an obvious bug fix / configuration fix, so I keep this ticket open and react to any upcoming comments.