update tests to reflect changes

Author: RobinMalfait

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -3,12 +3,12 @@
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 "@layer theme {
   :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-black: #000;
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-bold: 700;
-    --default-transition-duration: .15s;
-    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
     --default-font-feature-settings: var(--font-sans--font-feature-settings);
     --default-font-variation-settings: var(--font-sans--font-variation-settings);

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -2,10 +2,10 @@
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
 ":root, :host {
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --color-red-500: oklch(.637 .237 25.331);
   --spacing: .25rem;
-  --default-transition-duration: .15s;
-  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
 .w-4 {

packages/tailwindcss/src/css-functions.test.ts

@@ -72,7 +72,11 @@ describe('--spacing(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      ":root, :host {
+        --spacing: .25rem;
+      }
+
+      .foo {
         margin: calc(var(--spacing) * 4);
       }"
     `)

packages/tailwindcss/src/index.test.ts

@@ -169,10 +169,7 @@ describe('compiling CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ":root, :host {
-        --spacing-1\\.5: 1.5px;
         --spacing-2_5: 2.5px;
-        --spacing-3\\.5: 3.5px;
-        --spacing-foo\\/bar: 3rem;
       }
 
       .m-1\\.5 {
@@ -286,7 +283,16 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      ":root, :host {
+        --color-red-200: #fecaca;
+        --color-red-500: #ef4444;
+        --color-blue-500: #3b82f6;
+        --color-green-200: #bbf7d0;
+        --color-green-500: #22c55e;
+        --animate-spin: spin 1s linear infinite;
+      }
+
+      .foo {
         --tw-translate-x: 100%;
         translate: var(--tw-translate-x) var(--tw-translate-y);
         animation: var(--animate-spin);
@@ -316,6 +322,12 @@ describe('@apply', () => {
         }
       }
 
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
       @property --tw-translate-x {
         syntax: "*";
         inherits: false;
@@ -1094,12 +1106,7 @@ describe('Parsing themes values from CSS', () => {
         ['w-1/2', 'w-75%'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
-        --width-1\\/2: 75%;
-        --width-75\\%: 50%;
-      }
-
-      .w-1\\/2 {
+      ".w-1\\/2 {
         width: var(--width-1\\/2);
       }
 

packages/tailwindcss/src/utilities.test.ts

@@ -4036,11 +4036,7 @@ test('translate-x', async () => {
       ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
-      --spacing: .25rem;
-    }
-
-    .-translate-x-\\[var\\(--value\\)\\] {
+    ".-translate-x-\\[var\\(--value\\)\\] {
       --tw-translate-x: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4164,11 +4160,7 @@ test('translate-y', async () => {
       ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
-      --spacing: .25rem;
-    }
-
-    .-translate-y-\\[var\\(--value\\)\\] {
+    ".-translate-y-\\[var\\(--value\\)\\] {
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }