CSS: Parse Error where none was before

[MichaIng]

To replicate on Debian 11 or Ubuntu 20.04 with Java 17:

curl -sSfLO https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css
curl -sSfLO https://github.com/validator/validator/releases/download/latest/vnu.jar
java -jar vnu.jar --css bootstrap.min.css

The exactly same worked well 3 days before, so I assume something with the CSS parser changed. The failing parts are those around keyframes definitions, from what I see.

The non-minified CSS does not throw the error, but the minification is done correctly, no syntax errors implied. Running the non-minified version through some other minifiers leads to the same parser errors.

[bradbajuz]

Curious if this is the same issue I'm having after running a Yarn upgrade for my Rails project. Can't compile Bootstrap 5 because of css-loader and postcss-loader or updates to different Babel packages.

Module build failed (from ./node_modules/postcss-loader/src/index.js): ParserError: Syntax Error at line: 1, column 25

[MichaIng]

Speaking of keyframes: We have some in own CSS as well, minified, which does not cause issues. I'll compare the syntax around those.

[wrburgess]

I can confirm the same behavior that @bradbajuz is talking about with a Rails 6.1 application using Bootstrap 5 and webpack

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25

[XhmikosR]

We use clean-css to minify our CSS. @MichaIng if you've spotted something specific let me know so that we make an upstream issue to clean-css. If it's a CSS parser issue, you should probably ask upstream and I'm pretty sure @sideshowbarker will try to take care of the issue. Otherwise let's close this issue.

[ilunglee]

Hello there,

I also ran into the same issue with a new Rails webpacker project that uses bootstrap@5.1.1.

Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25

However, I was using bootstrap@5.1.1 for my previous project, and it was working fine. Both of them had the same setup except for some differences in dependencies.

I haven't been able to figure out which dependency change causes this issue, but I found out the problem lies within the following lines:

bootstrap/scss/mixins/_grid.scss

Lines 10 to 12 in 9437973

	margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
	margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
	margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list

If I update these lines to the following, it no longer have issues compiling:

margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y) * 1); // stylelint-disable-line function-disallowed-list
margin-right: calc(-1 * var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list

TL;DR

Here are the differences in the dependencies:

--- a/old_project.txt
+++ b/new_project.txt
@@ -18 +18 @@ yarn list v1.21.1
-├─ @babel/helper-module-transforms@7.15.4
+├─ @babel/helper-module-transforms@7.15.7
@@ -26 +26 @@ yarn list v1.21.1
-├─ @babel/helper-validator-identifier@7.14.9
+├─ @babel/helper-validator-identifier@7.15.7
@@ -31 +31 @@ yarn list v1.21.1
-├─ @babel/parser@7.15.5
+├─ @babel/parser@7.15.7
@@ -42 +42 @@ yarn list v1.21.1
-├─ @babel/plugin-proposal-object-rest-spread@7.14.7
+├─ @babel/plugin-proposal-object-rest-spread@7.15.6
@@ -95 +95 @@ yarn list v1.21.1
-├─ @babel/preset-env@7.15.4
+├─ @babel/preset-env@7.15.6
@@ -100 +100 @@ yarn list v1.21.1
-├─ @babel/types@7.15.4
+├─ @babel/types@7.15.6
@@ -112 +112 @@ yarn list v1.21.1
-├─ @rails/webpacker@5.4.2
+├─ @rails/webpacker@5.4.3
@@ -114 +114 @@ yarn list v1.21.1
-├─ @types/node@16.7.13
+├─ @types/node@16.10.1
@@ -158 +158 @@ yarn list v1.21.1
-├─ autoprefixer@9.8.6
+├─ autoprefixer@9.8.7
@@ -163 +163 @@ yarn list v1.21.1
-├─ babel-plugin-polyfill-corejs3@0.2.4
+├─ babel-plugin-polyfill-corejs3@0.2.5
@@ -185 +185 @@ yarn list v1.21.1
-├─ browserslist@4.17.0
+├─ browserslist@4.17.1
@@ -198 +198 @@ yarn list v1.21.1
-├─ caniuse-lite@1.0.30001255
+├─ caniuse-lite@1.0.30001261
@@ -201 +200,0 @@ yarn list v1.21.1
-├─ chart.js@3.5.1
@@ -215 +213,0 @@ yarn list v1.21.1
-├─ colorette@1.3.0
@@ -227,2 +225,2 @@ yarn list v1.21.1
-├─ core-js-compat@3.17.2
-├─ core-js@3.17.2
+├─ core-js-compat@3.18.1
+├─ core-js@3.18.1
@@ -270 +268 @@ yarn list v1.21.1
-├─ electron-to-chromium@1.3.831
+├─ electron-to-chromium@1.3.852
@@ -279 +277 @@ yarn list v1.21.1
-├─ es-abstract@1.18.5
+├─ es-abstract@1.18.6
@@ -317,0 +316 @@ yarn list v1.21.1
+├─ get-symbol-description@1.0.0
@@ -320 +319 @@ yarn list v1.21.1
-├─ glob@7.1.7
+├─ glob@7.2.0
@@ -364 +363 @@ yarn list v1.21.1
-├─ is-core-module@2.6.0
+├─ is-core-module@2.7.0
@@ -372 +371 @@ yarn list v1.21.1
-├─ is-glob@4.0.1
+├─ is-glob@4.0.2
@@ -427 +426 @@ yarn list v1.21.1
-├─ minipass@3.1.3
+├─ minipass@3.1.5
@@ -434,0 +434 @@ yarn list v1.21.1
+├─ nanocolors@0.2.11
@@ -439 +439 @@ yarn list v1.21.1
-├─ node-releases@1.1.75
+├─ node-releases@1.1.76
@@ -551 +551 @@ yarn list v1.21.1
-├─ postcss@7.0.36
+├─ postcss@7.0.38
@@ -570 +570 @@ yarn list v1.21.1
-├─ regenerate-unicode-properties@8.2.0
+├─ regenerate-unicode-properties@9.0.0
@@ -576 +576 @@ yarn list v1.21.1
-├─ regexpu-core@4.7.1
+├─ regexpu-core@4.8.0
@@ -578 +578 @@ yarn list v1.21.1
-├─ regjsparser@0.6.9
+├─ regjsparser@0.7.0
@@ -600 +600 @@ yarn list v1.21.1
-├─ sass@1.39.0
+├─ sass@1.42.1
@@ -620 +620 @@ yarn list v1.21.1
-├─ source-map-support@0.5.19
+├─ source-map-support@0.5.20
@@ -662,4 +662,4 @@ yarn list v1.21.1
-├─ unicode-canonical-property-names-ecmascript@1.0.4
-├─ unicode-match-property-ecmascript@1.0.4
-├─ unicode-match-property-value-ecmascript@1.2.0
-├─ unicode-property-aliases-ecmascript@1.1.0
+├─ unicode-canonical-property-names-ecmascript@2.0.0
+├─ unicode-match-property-ecmascript@2.0.0
+├─ unicode-match-property-value-ecmascript@2.0.0
+├─ unicode-property-aliases-ecmascript@2.0.0

[ilunglee]

After a little bit more research, I found out the sass package causes this issue.

If you use sass@1.40.x, you will get the compilation error. However, if you downgrade to sass@1.39.0, the error no longer exists.

Possibly related to the calc function changes in sass/dart-sass@1.39.0...1.42.1

[XhmikosR]

Can you please open an upstream issue and reference this issue there?

[XhmikosR]

The issue could be invalid CSS we output or a bug in sass indeed. BTW we do have a PR #35033

[ilunglee]

@XhmikosR, I opened an issue on the dart-sass repo sass/dart-sass#1516.

Thanks!

[MichaIng]

The interesting thing is that I actually wanted to open this issue at the repository of the validator and not here 😅. I'm glad that it was beneficial here as well.

The v.Nu uses css-validator, so I guess an update there caused it to be stricter or implied a bug, so probably it is not even related to the SASS issue.

In the meantime it works again (without applying the SASS related workaround), probably as the CSS validator got updated as well. The older v.Nu jar's are not available for download anymore and I'm a bit lazy to compile them, but it looks like here is the reported error and fix (older Bootstrap but same symptom): w3c/css-validator#330

[XhmikosR]

Going to close this issue then. @ilunglee yours is a different issue, but I'm not sure if it's our problem or sass yet. Feel free to make a new one, but if you don't, no worries since we have the PR.

[coorasse]

As a reference. Here is the issue: shellscape/postcss-values-parser#138