Rogue % symbol added to value

[04alband]

Hi, I just submitted another issue which occurred under the same conditions: #1246 So there could be a relation, but I think the issues are separate, so thought starting a new ticket would be best. Apologies if not.

I'm using the latest gulp-clean-css (4.3.0) which I believe is a wrapper for clean-css.
I'm seeing a rogue % symbol added to a property value. It means the generated CSS is invalid. It's easiest to demonstrate with the example below. In fairness, there's a fair bit going on with css variables used within each other, so I'm not surprised that something in the chain couldn't understand it.
I read somewhere that it could be getting confused between the SASS hsl function and CSS hsl declaration and that a solution was to use HSL (uppercase). This has the same result (which I guess makes sense as it seems to be a cleaning issue rather than an SCSS generation issue. Removing the clean step in the pipeline resolves the problem. Interestingly, though changing to hsla does resolve the problem. So for the moment, I can get around the issue with that.

Other than that, the only solution I've found it to change the optimisation level to 0, but that removes a lot of other nice stuff.

Environment

• clean-css version - npm ls clean-css: gulp-clean-css is 4.3.0
• node.js version - node -v: v16.14.2
• operating system: Windows

Configuration options

My gulp task is very simple, like this:

gulp.task('build:sass', () => {
    console.log('building sass');

    return gulp.src(paths.sass.src, { since: gulp.lastRun('build:sass') })
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS(cleanOptions))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.sass.dest));
});

For the options, I've tried playing with many options but the default no-options produces the error.

Input CSS

p {
	color: var(--text-color, hsl(0, 0%, var(--inverted-lightness)));
}

Actual output CSS

p {
  color: var(--text-color, hsl(0, 0%, var(--inverted-lightness%)))
}

Expected output CSS

p {
  color: var(--text-color, hsl(0, 0%, var(--inverted-lightness)))
}

If I'm doing something wrong, I'm sorry and any help would be greatly appreciated.