core: attribute selectors with comma not working

[igorbt]

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.

griffel/packages/core/src/runtime/compileCSS.ts

Lines 35 to 44 in 31bb221

	export function normalizePseudoSelector(pseudoSelector: string): string {
	return (
	'&' +
	normalizeNestedProperty(
	// Regex there replaces a comma, spaces and an ampersand if it's present with comma and an ampersand.
	// This allows to normalize input, see examples in JSDoc.
	pseudoSelector.replace(PSEUDO_SELECTOR_REGEX, ',&$1'),
	)
	);
	}

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']
  

  Loading

(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.