leodido / postcss-clean

PostCss plugin to minify your CSS with clean-css
MIT License
41 stars 8 forks source link

::part(a b c) compiles to ::part(abc) #39

Closed bennypowers closed 3 years ago

bennypowers commented 4 years ago

Consider an element with id shadow whose Shadow Root has this content:

<span part="a">A</span>
<span part="a b">A B</span>
<span part="a b c">A B C</span>

And a containing root with these rules

#shadow::part(a) { color: red; }
#shadow::part(a b) { font-weight: bold; }
#shadow::part(a b c) { font-size: large; }

Expected

Before processing, the element will display a red A; a red and bold A B; and a red, bold, and large A B C; I would expect styles to compile to

#shadow::part(a){color:red;}#shadow::part(a b){font-weight:bold;}#shadow::part(a b c){font-size:large;}

Actual

After processing, the styles were transformed to

#shadow::part(a){color:red;}#shadow::part(ab){font-weight:bold;}#shadow::part(abc){font-size:large;}

And the element displays a red A A B A B C, but nothing bold or large.


Thank you for publishing this useful package

leodido commented 3 years ago

Hello @bennypowers can you please try by providing {level: { 1: { tidySelectors: false } }} option object to the plugin?

Options reference is here

leodido commented 3 years ago

Added a test to prove it works: https://github.com/leodido/postcss-clean/blob/56650c894c4938b8c4b1a6eb2e1e212a6b2feab0/test.js#L207

asyncLiz commented 3 years ago

Disabling the option is a workaround, but not really a solution. The upstream issue involves spaces in any pseudo classe: https://github.com/jakubpawlowicz/clean-css/issues/996

Ex: :not(.complex .selector) will transform to :not(.complex.selector)

Updating clean-css after that issue is resolved should fix the problem.