Enforce pseudo-selector ordering by increasing specificity

[dddlr]

Add the enforcePseudoOrder option. This ensures that the pseudo-selectors from Compiled are always applied in the order

• :link
• :visited
• :focus-within
• :focus
• :focus-visible
• :hover
• :active

even when components are imported from multiple packages. This is at the expense of lengthening those selectors considerably (by adding :not(#\\##\\##\\##\\##\\#) to the end of those selectors).

This is necessary if you use multiple pseudo-selectors on the same component (e.g. :hover and :active), and if you are creating Compiled components that are consumed in other packages or projects.

Another approach we could have taken for this was to use @layer, but this was determined to be impractical as styles in @layer have lower specificity than styles outside @layer, which is risky when mixing Compiled styles with non-Compiled styles. We want Compiled styles to have higher specificity! (This might change in the future depending on whether we care about using Compiled alongside other CSS solutions* or not...)

This is turned off by default. To turn on, set enforcePseudoOrder to true in the Parcel, Webpack, or @compiled/babel-plugin configuration.

---

Todos for myself

• [x] Add tests to packages/css/src/plugins/__tests__/enforce-pseudo-order.ts
• [x] Add changeset
• [x] Add PR description
• [x] Double-check that this works in the Webpack and Parcel examples
• [x] Update @compiled/jest helper function to work with this (and potentially the increaseSpecificity option too)
• [ ] Create a PR on the Compiled website to update docs

*other CSS solutions = other CSS-in-JS libraries, and using plain class names (<div className="hello" />)

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 7e5a6662b317d8d32b9141bcdd3980e20abf0e72

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

This PR includes changesets to release 7 packages

| Name | Type | | ---------------------------- | ----- | | @compiled/parcel-app | Patch | | @compiled/webpack-app | Patch | | @compiled/parcel-transformer | Patch | | @compiled/webpack-loader | Patch | | @compiled/babel-plugin | Patch | | @compiled/utils | Patch | | @compiled/css | 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

[dddlr]

closing this PR as nobody is working on this at the moment, and changing the specificity is highly risky

feel free to re-open if this feature is still needed though!