Allow @compiled/babel-plugin's increaseSpecificity to work with `…

…@compiled/jest` (#1656)

* Allow `@compiled/babel-plugin`'s `increaseSpecificity` to work with `@compiled/jest`.
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`

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…but happy to take any advice there.

* chore: consolidate INCREASE_SPECIFICITY_SELECTOR

* Update packages/utils/src/increase-specificity.ts comment

* Copy and paste `INCREASE_SPECIFICITY_SELECTOR` to avoid circular TS references.

.changeset/beige-bulldogs-warn.md

@@ -0,0 +1,5 @@
+---
+'@compiled/css': patch
+---
+
+Use a shared utils version of INCREASE_SPECIFICITY_SELECTOR

.changeset/silly-drinks-fix.md

@@ -0,0 +1,5 @@
+---
+'@compiled/jest': patch
+---
+
+Allow `@compiled/babel-plugin`'s `increaseSpecificity` to work with `@compiled/jest`'s `toHaveCompiledCss` jest matcher.

.changeset/spicy-trainers-divide.md

@@ -0,0 +1,5 @@
+---
+'@compiled/utils': minor
+---
+
+Add INCREASE_SPECIFICITY_SELECTOR to utils to consolidate this selector

packages/css/src/plugins/increase-specificity.ts

@@ -1,8 +1,7 @@
+import { INCREASE_SPECIFICITY_SELECTOR } from '@compiled/utils';
 import type { Plugin } from 'postcss';
 import { default as selectorParser, pseudo } from 'postcss-selector-parser';
 
-const INCREASE_SPECIFICITY_SELECTOR = ':not(#\\9)';
-
 const parser = selectorParser((root) => {
   root.walkClasses((node) => {
     if (node.parent) {

packages/jest/src/matchers.ts

@@ -5,6 +5,11 @@ import type { MatchFilter } from './types';
 
 type Arg = [{ [key: string]: string }, MatchFilter?];
 
+/**
+ * Configuring the babel plugin with `increaseSpecificity: true` will result in this being appended to the end of generated classes.
+ * TODO: Use the import from `@compiled/utils`, but doing so results in a circular TS reference, so it's copy and pasted..
+ */
+const INCREASE_SPECIFICITY_SELECTOR = ':not(#\\9)';
 const DEFAULT_MATCH_FILTER: MatchFilter = { media: undefined, target: undefined };
 
 const kebabCase = (str: string) =>
@@ -61,7 +66,13 @@ const getRules = (ast: CSS.Stylesheet, filter: MatchFilter, className: string) =
   const klass = target ? `.${className}${target}` : `.${className}`;
   return allRules?.filter((r) => {
     if ('selectors' in r) {
-      return r.selectors?.find((s) => removeSpaces(s) === removeSpaces(klass));
+      return r.selectors?.find((s) => {
+        const sTrimmed = removeSpaces(s);
+        return (
+          sTrimmed === removeSpaces(klass) ||
+          sTrimmed === removeSpaces(klass + INCREASE_SPECIFICITY_SELECTOR)
+        );
+      });
     }
     return;
   });

packages/utils/src/increase-specificity.ts

@@ -0,0 +1,4 @@
+/**
+ * Configuring the babel plugin with `increaseSpecificity: true` will result in this being appended to the end of generated classes.
+ */
+export const INCREASE_SPECIFICITY_SELECTOR = ':not(#\\9)';

packages/utils/src/index.ts

@@ -6,3 +6,4 @@ export { buildSourceMap } from './source-maps';
 export { toBoolean } from './to-boolean';
 export { createError } from './error';
 export { preserveLeadingComments } from './preserve-leading-comments';
+export { INCREASE_SPECIFICITY_SELECTOR } from './increase-specificity';