Beautify breaks fancy attribute selectors like ~=

[ivanreese]

Input CSS

I love these fancy attribute selectors!

cd-row > [col~="5th"] {
  order: 5;
}

Actual output CSS

Oh.. pumpkins! Note the spaces around the ~. In decent browsers, well, they'll just roll with the punches and ignore the spaces. But in IE11, it's a syntax error, so the entire rule is ignored.

cd-row > [col ~ ="5th"] {
  order: 5
}

Expected output CSS

Mmm that's the stuff.

cd-row > [col~="5th"] {
  order: 5
}

Configuration options

The -O level doesn't have an effect. This issue seems to entirely be the fault of the beautification. If the beautification is turned off, the output CSS is cd-row>[col~="5th"]{order:5}, which is correct.

cleancss -o clean.css styles.css -O 0 --format beautify

Environment

• clean-css version - npm ls clean-css: 4.1.5
• node.js version - node -v: v8.1.0
• operating system: macOS 10.12.5

[jakubpawlowicz]

Yup, this is wrong. Fix is coming!

[jakubpawlowicz]

Fixed in 4.1.6.