Use sheet.classes instead of rule.selector

[kof]

I am refactoring sheet.classes registration logic for JSS 9. The idea is that we will have in sheet.classes only generated class names. Any possible selector from a jss-global or jss-nested won't land there any more. StyleRule#selector on the other side can contain any possible CSS selector, which makes it hard to correctly prefix without a full selector parser.

Thats why I suggest to use sheet.classes and split by space to support classes={button: 'a b'}, see #4

[mistadikay]

@kof can you clarify please? When I'm changing sheet.classes they're being changed in markup. The idea is to leave actual classnames intact while changing only selector.

[kof]

they're being changed in markup

yes, is that an issue?

[mistadikay]

Yes, the point is to increase selector strength, so we're prefixing it with :not(#\\20), but className itself should stay the same. For instance:

html:

<div class="root-0"></div>

css:

:not(#\\20).root-0 {
  /* ... */
}

[kof]

right, it wouldn't work over class name anyways.

[kof]

The only problem there is that .selector can be any valid css selector, so prefixing it is not that easy without a full parser. I suggest to prefix only scoped selectors with a single-class selector.

[kof]

I think we need something like rule.scoped // true

[mistadikay]

can you give an example where it can be an issue? All these examples look valid to me:

:not(#\\20)a {}
:not(#\\20).root-0 {}
:not(#\\20).root-0::placeholder {}
:not(#\\20)[type=button] {}
/* etc. */

[kof]

selector can be something like this: :matches(:hover, :focus), .a

[mistadikay]

Got it. I guess it will be fixed in #4