fix(styling): Fix parent selectors in compat mode

[NicholasBoll]

Summary

PR #2741 added the ability to target parent modifier class names to build selectors, but doesn't work in compat mode because compat mode merges all the CSS class names into a single, new class name. I added a parentModifiers function that handles this for both React Kit and CSS Kit and updated stencils to add inert class names for the purpose of always matching a selector.

I also fixed a bug where passing undefined to a Stencil for a modifier key resulted in overriding defaultModifiers.

Release Category

Styling

---

Before:

React static mode

<div {...mergeStyles(elemProps, myStencil({ size: 'large' }))} />

HTML

<div class="css-12345 css-abcde"></div>

Styles

.css-abcde :where(.css-123ab) {
  ...
}

React compat mode

<div {...mergeStyles(elemProps, [myStencil({ size: 'large' }), {maxWidth: 100}])} />

HTML

<div class="css-merged"></div>

Styles

.css-abcde :where(.css-123ab) {
  ...
}

Since compat mode merges class names together, the selector no longer works. This change forces the Stencil to add a class name of the modifier without the css- prefix. This still encodes needed information without the class name being removed by Emotion's cx function when style merging. The class names are inert directly (no selector matches), but are used by the parentModifier function.

After

React compat mode

<div {...mergeStyles(elemProps, [myStencil({ size: 'large' }), {maxWidth: 100}])} />

HTML

<div class="css-merged abcde"></div>

Styles

.abcde :where(.css-123ab) {
  ...
}

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)

Where Should the Reviewer Start?

Tests

[cypress]

Passing run #7303 ↗︎

0

970

3

0

0

Details:

Merge 7a4621c into 2313244...
Project: canvas-kit	Commit: f1b62da53c ℹ️
Status: Passed	Duration: 05:14 💡
Started: May 16, 2024 5:50 PM	Ended: May 16, 2024 5:55 PM

Review all test suite changes for PR #2743 ↗︎

[josh-bagwell]

Approved.

Now I feel better