search

atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.98k stars 68 forks source link

Allow `@compiled/babel-plugin`'s `increaseSpecificity` to work with `@compiled/jest` #1656

Closed kylorhall-atlassian closed 4 months ago

kylorhall-atlassian commented 4 months ago

tl;dr: if you have increaseSpecificity: true set, you get styles such as ._18u0u2gc:not(#\\9){margin-left:var(--ds-space-100,8px)} which will never match ._18u0u2gc

Could use advice on either:

changeset-bot[bot] commented 4 months ago

🦋 Changeset detected

Latest commit: 07cf1e3a3372a9e2ba49e1d226dda4c2191af8c6

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

This PR includes changesets to release 10 packages | Name | Type | | ------------------------------------ | ----- | | @compiled/css | Patch | | @compiled/jest | Patch | | @compiled/utils | Minor | | @compiled/babel-plugin-strip-runtime | Patch | | @compiled/babel-plugin | Patch | | @compiled/codemods | Patch | | @compiled/eslint-plugin | Patch | | @compiled/parcel-optimizer | Patch | | @compiled/parcel-transformer | Patch | | @compiled/webpack-loader | 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 commented 4 months ago

I could not think of a nice way to sneak a test in for this without trying to overhaul jest config entirely, so I did not.

hmm not sure either... i personally wouldn't worry about it (curious to see what @JakeLane thinks)

This magic variable comes from https://github.com/atlassian-labs/compiled/blob/e69f5339a670bc4244b5d2b3e293c0609ef23dae/packages/css/src/plugins/increase-specificity.ts#L4C1-L5C1 and could similarly break at any time.

my other comment might help with this https://github.com/atlassian-labs/compiled/pull/1656#discussion_r1555199370 it's not as good as a real test, but a bit less prone to human error at least