Prevent `null` Sass variables from creating empty CSS variables

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I’m trying to compile bootstrap’s scss without any changes. It compiles fine, but produces broken css with 15 absent values. For example this: --bs-heading-color: ; at line 71

Compiling with Dart-Sass 1.52.3

Actually, already compiled css, which ships inside bootstrap-5.2.0-beta1.zip and latest bootstrap-main.zip files contain that broken css as well.

Scss from 5.1.3 compiles proper css on the same setup.

Reduced test cases

Try to compile with minimal custom.scss file: @import "../node_modules/bootstrap/scss/bootstrap";

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Opera

What version of Bootstrap are you using?

5.2.0 beta 1, latest snapshot.

[ffoodd]

Then those are bugs in IDE, linters and minifiers.

Nevertheless, those empty custom properties are useless and should be dropped to prevent confusion and save a few bytes.

[Kiriakk]

FWIW, this is valid CSS. 🤷

The only potential issue is the predictability regarding the behaviour, since every property will inherit and some won’t (but agai’, this is thé standard behaviour when you don’t provide any value).

Dropping them would decrease file size a little bit, but I’m not sure it’d be noticeable.

My biggest issue here is that compiled css is considered broken by my IDE due to the missing values and subsequent minify task is not being run because of this.