CSS variable is removed despite being used in content

[MuTsunTsai]

Describe the bug I'm trying to purge Bootstrap (v.5 in particular), and in my website I have another CSS file that contains the following rule:

@media (hover: none), (pointer: coarse) {
	.btn-primary:hover:not(:focus):not(.active) {
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
	}
}

Then I run gulp-purgecss as follows:

let purge = require('gulp-purgecss');

gulp.src('bootstrap.min.css')
    .pipe(purge({
	    content: [...], // glob of my files, including the said CSS file
	    safelist: {
	        standard: [/backdrop/] // for Bootstrap Modal
        },
	    fontFace: true,
	    variables: true
    }))
    ...

But the resulting Bootstrap doesn't keep the variable --bs-primary, and for now I need to add --bs-primary to safelist.variables to make it work correctly.

Expected behavior I expect any variable that is used in the content will be kept.

Environment (please complete the following information):

• OS: Windows 10
• Package gulp-purgecss
• Version 4.0.2

[MuTsunTsai]

Problem persists as of version 4.0.3.

[brunoamaral]

I'm having the same issue with bootstrap 5, and it only affects the var(--bs-font-sans-serif) statement. Tried to set safelist: ['--bs-font-sans-serif'], following @MuTsunTsai 's suggestion, but it didn't work.

[MuTsunTsai]

@brunoamaral You need to use the object-syntax safelist, not the simple array syntax. Then add the name of the variable under safelist.variables.

[LucasDemea]

Same problem here with bootstrap 5 gutter variables. Safelisting them doesn't work either.

safelist: {
        variables: ['--bs-gutter-x', '--bs-gutter-y'],
} 

[MuTsunTsai]

How do you use those variables? Safelisting does work in my case though.