core: attribute selectors with comma not working

[igorbt]

trafficstars

When using nested attribute selectors that contains commas, they generate incorrect styles, inserting ampersands after the comma.

For example:

    '& [style*="color: rgb(245, 240, 241);"]': {
      color: 'black !important'
    },

will result in something like

.fk7b603 [style*="color: rgb(245,& 240,& 241);"] { color: black !important; }

See more in this Codesandbox.

[layershifter]

That indeed a bug, can be reproed in our sandbox, too.

https://github.com/microsoft/griffel/blob/31bb2215926d5224ed2bd50fe9a61677a756a02f/packages/core/src/runtime/compileCSS.ts#L35-L44

The function above is probably the source of the problem.

(I hope that such CSS rules are not used in real products are they will cause performance issues).

[igorbt]

Thank you @layershifter ! I would definitely not use such rules in normal conditions. But sometimes, for complex and legacy apps that could be a good workaround. BTW, can you elaborate about the performance issues? I understand that this selector is less performant than selecting by class, but do you think the performance hit will be noticeable?

[layershifter]

BTW, can you elaborate about the performance issues? I understand that this selector is less performant than selecting by class, but do you think the performance hit will be noticeable?

It will be noticeable if an app has a big DOM tree. In general:

.foo [style*="color: red"] { color: pink }

• Browsers parse rules bottom-top (https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/styles-handbook.md#understanding-selector-complexity)
• It means that the flow will be following:

  flowchart TD
    A[Get all elements] --> B[Parse style on them]
    B --> C[Find a parent with '.foo']
  

(Use Edge with enabled paint instrumentation) https://codesandbox.io/s/blissful-mountain-ir406p?file=/src/App.js

Note1: That selector will affect only elements that have inline styles, so it might not be so bad, but it still impacts performance Note2: I don't know what optimisations browsers will apply in a particular case, but it's how it looks in general.