Replace increase specificity selector as JSDOM breaks with #\\9. (#…

…1661)

* Replace increase specificity selector as JSDOM breaks with `#\\9`.

Without this, `jsdom` (via `nswapi`) throws an error: `SyntaxError: \8 and \9 are not allowed in strict mode.`

Refer to dperini/nwsapi#92.

We're instead using what stylex uses for specificity: https://github.com/facebook/stylex/blob/c9216385d40c53612848040ab4d96ff133304203/packages/stylex/src/StyleXSheet.js#L352C16-L352C28
```diff
-._u5f3ftgi:not(#\\9){padding-right:8px}
+._u5f3ftgi:not(#\\#){padding-right:8px}
```

* Fix toHaveCompiledCss increasedSpecificity comparison with a target

* Reduce @compiled/jest version bump to a patch.

.changeset/sour-parents-look.md

@@ -0,0 +1,7 @@
+---
+'@compiled/utils': minor
+'@compiled/jest': patch
+'@compiled/css': minor
+---
+
+Update the increaseSpecificity selector to play nicely with jsdom.

.changeset/tender-panthers-flow.md

@@ -0,0 +1,5 @@
+---
+'@compiled/jest': patch
+---
+
+Fix toHaveCompiledCss increasedSpecificity comparison with a target

packages/css/src/__tests__/transform.test.ts

@@ -469,15 +469,15 @@ describe('#css-transform', () => {
       const { sheets: actual } = transformCss(styles, { increaseSpecificity: true });
 
       expect(actual.join('\n')).toMatchInlineSnapshot(`
-        "._ca0qftgi:not(#\\9){padding-top:8px}
-        ._u5f3ftgi:not(#\\9){padding-right:8px}
-        ._n3tdftgi:not(#\\9){padding-bottom:8px}
-        ._19bvftgi:not(#\\9){padding-left:8px}
-        ._syaz5scu:not(#\\9){color:red}
-        ._1kt9o5oc:not(#\\9):before{content:var(--hello-world)}
-        ._eid3ftgi:not(#\\9):before{margin-right:8px}
-        ._is0632ev:not(#\\9):before{color:pink}
-        ._14rn5scu:not(#\\9):after{color:red}"
+        "._ca0qftgi:not(#\\#){padding-top:8px}
+        ._u5f3ftgi:not(#\\#){padding-right:8px}
+        ._n3tdftgi:not(#\\#){padding-bottom:8px}
+        ._19bvftgi:not(#\\#){padding-left:8px}
+        ._syaz5scu:not(#\\#){color:red}
+        ._1kt9o5oc:not(#\\#):before{content:var(--hello-world)}
+        ._eid3ftgi:not(#\\#):before{margin-right:8px}
+        ._is0632ev:not(#\\#):before{color:pink}
+        ._14rn5scu:not(#\\#):after{color:red}"
       `);
     });
 
@@ -490,9 +490,9 @@ describe('#css-transform', () => {
       const { sheets: actual } = transformCss(styles, { increaseSpecificity: true });
 
       expect(actual.join('\n')).toMatchInlineSnapshot(`
-        "div ._kqan5scu:not(#\\9){color:red}
-        div:hover ._12hc5scu:not(#\\9){color:red}
-        div ._wntz5scu:not(#\\9):hover{color:red}"
+        "div ._kqan5scu:not(#\\#){color:red}
+        div:hover ._12hc5scu:not(#\\#){color:red}
+        div ._wntz5scu:not(#\\#):hover{color:red}"
       `);
     });
   });

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

@@ -20,7 +20,7 @@ describe('increase specicifity plugin', () => {
   it('should increase specicifity of declared classes', () => {
     const actual = transform`._foo {}`;
 
-    expect(actual).toMatchInlineSnapshot(`"._foo:not(#\\9) {}"`);
+    expect(actual).toMatchInlineSnapshot(`"._foo:not(#\\#) {}"`);
   });
 
   it('should ignore atrules', () => {
@@ -33,7 +33,7 @@ describe('increase specicifity plugin', () => {
     expect(actual).toMatchInlineSnapshot(`
       "
             @media {
-              ._foo:not(#\\9) {}
+              ._foo:not(#\\#) {}
             }
           "
     `);
@@ -66,11 +66,11 @@ describe('increase specicifity plugin', () => {
 
     expect(actual).toMatchInlineSnapshot(`
       "
-            ._foo:not(#\\9):hover {
+            ._foo:not(#\\#):hover {
               color: red;
             }
 
-            ._baz:not(#\\9)::before {
+            ._baz:not(#\\#)::before {
               content: "bar";
             }
           "

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

@@ -11,7 +11,7 @@ const parser = selectorParser((root) => {
 });
 
 /**
- * Increase the specificity of classes generated in Compiled by appended ":not(#\\9)".
+ * Increase the specificity of classes generated in Compiled by appended ":not(#\\#)".
  * This rule should run after CSS declarations have been atomicized and should not affect
  * the original generated class name.
  *

packages/jest/src/matchers.ts

@@ -9,7 +9,7 @@ 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 INCREASE_SPECIFICITY_SELECTOR = ':not(#\\#)';
 const DEFAULT_MATCH_FILTER: MatchFilter = { media: undefined, target: undefined };
 
 const kebabCase = (str: string) =>
@@ -63,15 +63,17 @@ const getRules = (ast: CSS.Stylesheet, filter: MatchFilter, className: string) =
   };
 
   const allRules = getAllRules();
+
   const klass = target ? `.${className}${target}` : `.${className}`;
+  const klassIncreased = target
+    ? `.${className}${INCREASE_SPECIFICITY_SELECTOR}${target}`
+    : `.${className}${INCREASE_SPECIFICITY_SELECTOR}`;
+
   return allRules?.filter((r) => {
     if ('selectors' in r) {
       return r.selectors?.find((s) => {
         const sTrimmed = removeSpaces(s);
-        return (
-          sTrimmed === removeSpaces(klass) ||
-          sTrimmed === removeSpaces(klass + INCREASE_SPECIFICITY_SELECTOR)
-        );
+        return sTrimmed === removeSpaces(klass) || sTrimmed === removeSpaces(klassIncreased);
       });
     }
     return;

packages/utils/src/increase-specificity.ts

@@ -1,4 +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)';
+export const INCREASE_SPECIFICITY_SELECTOR = ':not(#\\#)';