search

csstools / postcss-preset-env

Convert modern CSS into something browsers understand
https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Creative Commons Zero v1.0 Universal
2.22k stars 90 forks source link

Invalid custom selector transformation #186

Closed ar2r13 closed 2 years ago

ar2r13 commented 4 years ago 
@custom-selector :--input input, ::slotted(input);

:--input:focus { ~ }

Expected: 

input:focus, ::slotted(input:focus) { ~ }

Result:

input:focus, ::slotted(input):focus { ~ }
romainmenke commented 2 years ago

In the latest version this still transform to :

input:focus,::slotted(input):focus {
    order: 1;
}

This is technically correct I think as there is nothing in @custom-selector :--input input, ::slotted(input); indicating that it should insert something in ::slotted(...) instead of after it.

I think nested css might be better fit for this.

:focus {
  @nest input&, ::slotted(input&) { ... }
}

Going to close this as this repo has moved and will be archived soon preventing further discussion here.

Feel free to open a new issue or discussion here : https://github.com/csstools/postcss-plugins