fix: Add :where selector to classes that land on nodes that have a sx prop

[jonrohan]

This addresses a regression found in the last release of PRC https://github.com/github/github/pull/338276#issuecomment-2301557787

The problem is when the component has an sx= prop applied to it, the styled-components styles are being overridden by the CSS modules styles. This is because the two classes have equal specificity 0,1,0.

The solution here is to add the :where selector to the CSS modules classes whenever they might exist on the same dom node as a sx prop. This will give the CSS modules classes a lower specificity 0,0,0 and will prevent the styled-components styles from being overridden.

Before

After

Changelog

Changed

Add :where() selector to classes that land on nodes that have a sx prop.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

I'm going to test this locally, then also on a review-lab instance.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 29465d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	96.2 KB (0%)
packages/react/dist/browser.umd.js	96.54 KB (0%)

[github-actions]

Uh oh! @jonrohan, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/338618

[langermank]

Awesome!