Error: CSS minification error: Missed semicolon. File: my-file.css

Hello,

I’m using VueJS with bootstrap. Since the version 4.6.0 I can’t build anymore my application:

Error: CSS minification error: /home/…/my-file.css:1:141721: Missed semicolon. File: my-file.css

Same behavior if I try to build with sass or node-sass.

I found a workaround by changing the order of animation values in _progress.scss.

diff --git a/scss/_progress.scss b/scss/_progress.scss
index b48ffc4b8..a3fbecf2b 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -34,7 +34,7 @@

 @if $enable-transitions {
   .progress-bar-animated {
-    animation: $progress-bar-animation-timing progress-bar-stripes;
+    animation: progress-bar-stripes $progress-bar-animation-timing;

     @if $enable-reduced-motion {
       @media (prefers-reduced-motion: reduce) {

same in _spinners.scss

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 7444ed1d1..00bb01784 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -3,7 +3,7 @@
 //

 .spinner-border {
@@ -15,7 +15,7 @@
   border-right-color: transparent;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
-  animation: $spinner-animation-speed linear infinite spinner-border;
+  animation: spinner-border $spinner-animation-speed linear infinite;
 }

 .spinner-border-sm {
@@ -47,7 +47,7 @@
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   opacity: 0;
-  animation: $spinner-animation-speed linear infinite spinner-grow;
+  animation: spinner-grow $spinner-animation-speed linear infinite;
 }

I think the name of the animation should be the first value.

[tcastelly]

Thank you for your help, I confirm install css-loader fix the problem.

"resolutions": {
    "css-loader": "^5.2.4"
}

to your package.json and run yarn install again.

[alpadev]

This is not an issue of Bootstrap.

Using the name at the end corresponds to the spec. (This is true at least since 2017 - The 2013’s spec mentions the name at the beginning but also this issue: Need to also explain how order is important in terms of animation-name versus keywords, and probably also adjust the canonical order to match. The oldest version on github I found is from 2014 and already has the name at the end.)

The OP’s problem results from setting

css: {
    requireModuleExtension: false,
}

in the vue.config.js.

According to the vue-cli doc this does the following:

By default, only files that ends in *.module.[ext] are treated as CSS modules. Setting this to false will allow you to drop .module in the filenames and treat all *.(css|scss|sass|less|styl(us)?) files as CSS modules.

The line that breaks the compilation looks like this (after being transformed to CSS modules syntax):

.style_progress-bar-animated_gVpPS {
  -webkit-animation:1s linear infinite :local(progress-bar-stripes);
  animation:1s linear infinite :local(progress-bar-stripes)
}

The error message is misleading because it’s not cssnano having a problem with this code, but the postcss parser that is used by cssnano.

Not sure why moving the name around should solve this problem or how the OP found that solution.

The real cause for this problem seems to be css-loader (among other dependencies) being outdated in @vue/cli-service.

I setup a project with webpack (which is used by @vue/cli-service) and the latest versions of dependencies that are required to compile Bootstrap with css-modules support and it compiled without errors (even when minifying with cssnano).

@tcastelly either create a ticket at their repo or add

"resolutions": {
    "css-loader": "^5.2.4"
}

to your package.json and run yarn install again.