Quotes incorrectly stripped from font-*-settings when used in @supports

[tylergaw]

Precheck

• ✅ Do a quick search and make sure a bug has not yet been reported;
• ✅ (seeing it in 4.2.3) 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.2.3
• node.js version - node -v: 12.16.3
• operating system: macOS 10.15.4

Configuration options

var CleanCSS = require('clean-css');
new CleanCSS({});

Input CSS

@supports (font-feature-settings: "liga" 0) {
  html {
    --font: "font-with-features", helvetica, sans-serif;
  }
}

@supports (font-variation-settings: "wdth" 285) {
  html {
    --font: "variable-font", helvetica, sans-serif;
  }
}

Actual output CSS

@supports (font-feature-settings:liga 0) {html {--font: "font-with-features", helvetica, sans-serif;}}
@supports (font-variation-settings:wdth 285) {html {--font: "variable-font", helvetica, sans-serif;}}

Expected output CSS

@supports (font-feature-settings:"liga" 0) {html {--font: "font-with-features", helvetica, sans-serif;}}
@supports (font-variation-settings:"wdth" 285) {html {--font: "variable-font", helvetica, sans-serif;}}

For feature detection to work on those properties the first value–liga, wdth, etc–must be in quotes.

In #1038, font-variation-settings quoting as a property was reported and fixed in #1039. That works as expected, but that doesn't fix the quoting when these props are used within @supports.

[tylergaw]

A note for anyone that lands here. If you need to work around this you can use ignore:start|end documented at https://github.com/jakubpawlowicz/clean-css#how-to-keep-a-css-fragment-intact to keep these feature queries as is.

Example:

/* clean-css ignore:start */
@supports (font-variation-settings: "wdth" 285) {
  html {
    --font: "variable-font", helvetica, sans-serif;
  }
}
/* clean-css ignore:end */

I'm using this on project to detect variable font support and works as expected.

[tylergaw]

Nice! Thanks @jakubpawlowicz

[jakubpawlowicz]

Quick question: do you plan on upgrading to clean-css 5.0 once it's out or would you rather see this bugfix backported to 4.2?

[tylergaw]

Since we have a workaround in place, we'd hold off until 5.0.

[jakubpawlowicz]

Sounds good, thanks!