Empty variables being flagged as errors

[indepth2]

JetBrains IDE's (such as phpstorm) are flagging the empty variable declarations in the new version as errors.

Ex:
--bs-btn-font-family: ;
--bs-heading-color: ;

There are a couple dozen I believe.

Is this intended behavior? Or are these variables to be defined by default in future versions?

This is not my area of expertise, but I would hope there is a simple solution for this behavior as the errors are somewhat unsightly and this is one of the higher end IDE's.

[ArgoZhang]

I think it is better to have a default value for variables

[ffoodd]

Empty custom properties is perfectly valid, and even used in a few techniques like the space toggle.

It's probably a bug in your IDE or underlying linter. Please check on their side.

[JoshMayberry]

I am getting an issue with this with webpack.

Webpack Bundle Analyzer saved report to C:\Users\Josh\Documents\PowerQuery\Custom Visuals\Tutorial\communityInspection\webpack.statistics.dev.html
assets by status 4.49 MiB [cached] 4 assets
orphan modules 339 KiB [orphan] 370 modules
runtime modules 937 bytes 4 modules
built modules 3.89 MiB [built]
  modules by path ./node_modules/ 3.79 MiB 204 modules
  modules by path ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/ 62.9 KiB
    ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/buffer/index.js 57 KiB [built] [code generated]
    ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/base64-js/index.js 3.84 KiB [built] [code generated]
    ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/ieee754/index.js 2.1 KiB [built] [code generated]
  modules by path ./src/*.ts 37.7 KiB
    ./src/visual.ts 31.6 KiB [built] [code generated]
    ./src/settings.ts 6.08 KiB [built] [code generated]
  + 5 modules

ERROR in ./style/visual.less
Module build failed (from ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../../../../AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/less-loader/dist/cjs.js):


  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
                      ^
Unrecognised input
      Error in node_modules\bootstrap\dist\css\bootstrap.css (line 2809, column 24)

In version 5.1.3 there were no empty variables. Now, in version 5.2.0 there are. That change breaks things and so we will have to downgrade back to version 5.1.3.

Even if empty css variables are "technically ok"- many interpreters don't think so.
Instead of contacting all of those interpreters and having them change their software- it may be better if bootstrap just doesn't make use of empty css variables.

[julien-deramond]

@JoshMayberry we're going to try to remove them to decrease the file size (see discussion in #36595). But that's clearly not because it's not valid. We might still want to use some empty CSS vars in some rare cases empty CSS vars.

[anselmbradford]

lessc is erroring on https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css#L2809 with ParseError: Unrecognised input. Is that a lessc or a bootstrap issue?

[jeremyfrench]

This is the error on jetbrains https://youtrack.jetbrains.com/issue/WEB-20700/CSS-Custom-Properties-Whitespace-is-marked-as-incorrect-value

[simon-lindahl]

w3 validator at https://validator.w3.org also flags these empty css classes as errors.

[BradWells]

I am also encountering this error with lescc. I am trying to use Less to wrap Bootstrap 3 with the class selector .bootstrap3-iso and Bootstrap 5 with .bootstrap5-iso in order to use them both together in a conversion of an old AngularJS app. I am following this blog post. Bootstrap 3 works fine with that tutorial, but this issue breaks Bootstrap 5.

[MichaIng]

This has just been fixed: w3c/css-validator@9a54c0d