Percentage symbol addition to custom props values in hsl() parameters

[paolosax]

Hello, how you doin
I'm having issues when compiling my css for production, passing an custom-prop as lightness value in an HSL value.
What happens is that it looks like CleanCSS add the percentage symbol to the 2nd and 3rd value as it expect it to be like this, but I need to pass an custom prop.

IMPORTANT: clean-css is now in a maintenance mode. PRs are still welcome, and I will try do an occasional bugfix relase.

Precheck

• Do a quick search and make sure a bug has not yet been reported;
• do a quick check if the bug still exists in the latest patch version;
• finally, be nice and have fun!

Environment

• clean-css version - npm ls clean-css: ^4.3.0 (gulp-clean-css)
• node.js version - node -v: 18.12.1
• operating system: Windows 11

Configuration options

export const styles = () => {
	return gulp
		.src(PATH.styles.src)
		.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
		.pipe(sass({
			includePaths: [
				'node_modules'
			]
		}).on('error', sass.logError))
		.pipe(gulpif(PRODUCTION, cleanCSS({ compatibility: "ie8" })))
		.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
		.pipe(gulp.dest(PATH.styles.dest))
		.pipe(server.stream());
};

Input CSS

.my-class {
   color: hsl(0,0%,var(--l-95));
}

Actual output CSS

.my-class {
   color: hsl(0,0%,var(--l-95%));
}

Expected output CSS

.my-class {
   color: hsl(0,0%,var(--l-95));
}

[jakubpawlowicz]

Hi @paolosax - sorry for taking a while to respond. This issue is fixed in clean-css 5+. Hope you can upgrade from 4.x.

[paolosax]

Hello @jakubpawlowicz - actually I was wrong. Or rather: I'm using "GULP-clean-css", and it looks like that this Gulp plugin is not updated to Clean CSS 5+... mmmh

[jakubpawlowicz]

Hello @paolosax - there's an opened PR in gulp-clean-css updating clean-css to version 5, but it's been unmerged for a long time now. However this comment may help you: scniro/gulp-clean-css#89 (comment)