What does `!important` without a value mean in CSS?

Question

Situation:

I am trying to use bootstrap 4 stylesheet with NextJS. The bootstrap 4 stylesheet (which is complied from SASS) has many codes like:

.checkbox.checkbox-accent > span {
 border-width: !important;
}

which breaks the production build of NextJS, i.e. when issue yarn build I get the following error:

yarn run v1.22.4
$ next build
info - Creating an optimized production build
Failed to compile.
TypeError: Cannot read property 'toLowerCase' of undefined
> Build error occurred
Error: > Build failed because of webpack errors
 at /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/index.js:441:19
 at async /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.

However when I add a value before the !important in CSS the build problem is gone, e.g:

.checkbox.checkbox-accent > span {
 border-width: unset !important;
}

Question:

What does !important without a value mean and is it a valid CSS piece of code? Or is it a problem with SASS compilation? Or it is something with webpack compiler used by NextJS?

Notes:

• yarn dev works fine
• "dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
• NodeJS version: v12.18.2
• Platform: WSL2 on Windows 10

• andrewtweber: I think you’re missing variables. Check what the original SASS is. It’s probably something like border-width: $border-width !important but your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)
• SuperStormer: Does this answer your question? What does !important mean in CSS?
• Musa Haidari: @SuperStormer thanks for the input, but not, this is a totally different situation
• Musa Haidari: @andrewtweber Thanks, this fixed my problem. Why wouldn't you post it as an answer?!
• andrewtweber: It felt like too much of a guess. Posted as answer :)

Answer 1

I tested !important in a sass file(in vs code) without any property value and it yelled at me:

property value expectedscss(css-propertyvalueexpected)

So, it hasn't any special meaning. I think there may be a problem in your code before compilation that generates this line of code.

• Musa Haidari: Thanks for the feedback, and the general flow. However I am using a template which has a lot of complex logic (which I do not want to debug now) which suppresses the errors or warnings for SASS

Answer 2

I think you’re missing variables.

Check what the original SASS is. It’s probably something like:

border-width: $border-width !important;

But your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)