Closed openmindculture closed 1 year ago
I did not add the label "needs-triage" or I did not intend to, but I am not able to remove it.
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.
@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
> ingo-steinke.de@2.0.0 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.
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",
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.
After migrating to eleventy 1.x and updating the postCSS configuration accordingly, build fails with a warning about a
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
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:
Code: https://github.com/openmindculture/ingo-steinke.de/pull/100