Add a cssvar() function

[mdo]

Potentially addresses #36595 by implementing a new cssvar() function that checks for null values in Sass variables.

[hebertcisco]

Using a function to check for null values ​​in Sass variables really solves the issue #36595. Now scss don’t produces broken css with missing values

[julien-deramond]

We are only adressing here --bs-heading-color: ; amongst the 15 cases mentioned in the issue. The remainings are (for a basic usage without overriding the vars):

  --bs-btn-font-family: ;
  --bs-dropdown-box-shadow: ;
  --bs-nav-link-font-weight: ;
  --bs-card-box-shadow: ;
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-toast-color: ;
  --bs-modal-color: ;
  --bs-modal-footer-bg: ;
  --bs-tooltip-margin: ;
  --bs-offcanvas-color: ;

Don't we want to wait for using this mixin everywhere?

If it is applied everywhere, it'll have an impact on the documentation where we need to define if it remains understandable for the users. It becomes a little bit less obvious with @include cssvar( everywhere:

Rather than using a mixin, can't we rather drop the empty CSS vars after/during the generation of the CSS file?

[mdo]

That'd be awesome, @julien-deramond, and would keep things less abstracted. I haven't looked into a linter for this yet, let me know if you have one in mind :).

[mdo]

I don't see options in our existing tooling I think, but I did find https://www.npmjs.com/package/postcss-dropunusedvars.

[julien-deramond]

I don't see neither options in our existing tooling. Let's try https://www.npmjs.com/package/postcss-dropunusedvars!.

[julien-deramond]

First basic test with https://www.npmjs.com/package/postcss-dropunusedvars.

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index b306540d7..35576ad76 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -3,6 +3,9 @@
 //

 .accordion {
+  --test-component-unused-var: 10px;
+  --test-component-empty-var: ;
+
   // scss-docs-start accordion-css-vars
   --#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
   --#{$prefix}accordion-bg: #{$accordion-bg};
@@ -35,6 +38,7 @@
   align-items: center;
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  font-size: var(--test-component-empty-var);
   @include font-size($font-size-base);
   color: var(--#{$prefix}accordion-btn-color);
   text-align: left; // Reset button style

Without the plugin both variables stay in dist/bootstrap.css.

Install the plugin with npm i postcss-dropunusedvars --save-dev and change our postcss.config.js to:

diff --git a/build/postcss.config.js b/build/postcss.config.js
index 7f8186d10..5b780fe35 100644
--- a/build/postcss.config.js
+++ b/build/postcss.config.js
@@ -10,6 +10,7 @@ module.exports = context => {
   return {
     map: context.file.dirname.includes('examples') ? false : mapConfig,
     plugins: {
+      "postcss-dropunusedvars": {},
       autoprefixer: {
         cascade: false
       },

With the plugin --test-component-unused-var: 10px; is removed from dist/bootstrap.css but since --test-component-empty-var is in fact used (even if empty), it stays in the file.

Haven't looked at if postcss-dropunusedvars can be configured yet (source code), but the basic configuration is not really what we want here.
If it doesn't exist we could write our own postcss-dropemptyvars plugin 🤷

[WinterSilence]

it's invalid because css var can be null too, it's can be useful to reset var, better solution:

@mixin cssvar($name, $value: false) {
  @if $value != false {
      @if $value == null {
        $value: initial;
      }
      --#{$prefix}#{$name}: #{$value};
  }
}