search

chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
88 stars 28 forks source link

Add proper support for :not() #115

Closed m-akinc closed 4 months ago

m-akinc commented 4 months ago

The code avoided generating invalid CSS when a rule included :not(), but it did not provide correct support for the pseudo-*-all classes. For example, :not(:hover) would be transformed to .pseudo-hover-all :not(), but we would skip writing that rule, because of the invalid (i.e. empty) :not(). The correct rewriting of that rule is :not(.pseudo-hover-all *), i.e. "Not a descendant of an element with class .pseudo-hover-all". Similarly, for shadow DOM styles, we need special logic to turn the example rule into :not(:host(.pseudo-hover-all) *).

In general, the approach is:

  1. Replace :not(...<pseudo-state>...) with :not(.pseudo-<state>-all ...) (or :not(:host(.pseudo-<state>-all) ...) if for shadow DOM)
  2. Extract remaining pseudo-states and move them to an ancestor selector: ...<pseudo-state>... -> .pseudo-<state>-all ...

Additionally, the refactoring I did allowed the removal of special logic related to ::slotted() and :has().

m-akinc commented 4 months ago

@ghengeveld after this PR, I also have a change that adds support for :host-context(). After that, it should be time for a release. 🚀

m-akinc commented 4 months ago

@ghengeveld seems like this stalled out. Anything I can do to help?

ghengeveld commented 4 months ago

@m-akinc We had a company retreat last week so I was preoccupied. I'll take a look soon.

ghengeveld commented 4 months ago

Dang, seems like this broke a bunch of stories. Could you check it out @m-akinc? Perhaps address it in that follow-up PR?

m-akinc commented 4 months ago

Dang, seems like this broke a bunch of stories. Could you check it out @m-akinc? Perhaps address it in that follow-up PR?

@ghengeveld Sorry for that! Fix is up in #117. Another PR adding support for :host-context() will be following shortly. (Update: here it is: #118)

github-actions[bot] commented 4 months ago

:rocket: PR was released in v3.1.0 :rocket: