Emit @property fallbacks at the beginning of the file

Author: philipp-spiess

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

@@ -1,7 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@layer theme {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  *, :before, :after, ::backdrop {
+    --tw-font-weight: initial;
+  }
+}
+
+@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;
@@ -281,14 +287,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 }
 
-@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
-}
-
 @property --tw-font-weight {
   syntax: "*";
   inherits: false

packages/tailwindcss/src/ast.ts

@@ -569,11 +569,14 @@ export function optimizeAst(
       }
 
       if (fallbackAst.length > 0) {
-        newAst.push(
+        let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment') ?? 0
+        newAst.splice(
+          firstNonCommentIndex,
+          0,
           atRule(
             '@supports',
             '((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
-            [atRule('@layer', 'base', fallbackAst)],
+            fallbackAst,
           ),
         )
       }

packages/tailwindcss/src/compat/config.test.ts

@@ -322,7 +322,12 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        ".prose {
+        "@supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          *, ::before, ::after, ::backdrop {
+            --tw-leading: initial;
+          }
+        }
+        .prose {
           [class~=lead-base] {
             font-size: 100rem;
             line-height: 201rem;
@@ -348,13 +353,6 @@ describe('theme callbacks', () => {
           --tw-leading: 201rem;
           line-height: 201rem;
         }
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          @layer base {
-            *, ::before, ::after, ::backdrop {
-              --tw-leading: initial;
-            }
-          }
-        }
         @property --tw-leading {
           syntax: "*";
           inherits: false;

packages/tailwindcss/src/important.test.ts

@@ -101,7 +101,13 @@ test('variables in utilities should not be marked as important', async () => {
       ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-ease: initial;
+      }
+    }
+
+    :root, :host {
       --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
@@ -114,14 +120,6 @@ test('variables in utilities should not be marked as important', async () => {
       transition-timing-function: var(--ease-out) !important;
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
-    }
-
     @property --tw-ease {
       syntax: "*";
       inherits: false

packages/tailwindcss/src/utilities.test.ts

@@ -24420,19 +24420,17 @@ test.only('test the thing', async () => {
       ['translate-x-1/2'],
     ),
   ).toMatchInlineSnapshot(`
-    ".translate-x-1\\/2 {
-      --tw-translate-x: calc(1 / 2 * 100%);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-translate-z: 0;
+      }
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
+    .translate-x-1\\/2 {
+      --tw-translate-x: calc(1 / 2 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
     @property --tw-translate-x {

packages/tailwindcss/src/variants.test.ts

@@ -114,17 +114,15 @@ test('details-content', async () => {
 
 test('before', async () => {
   expect(await run(['before:flex'])).toMatchInlineSnapshot(`
-    ".before\\:flex:before {
-      content: var(--tw-content);
-      display: flex;
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-content: "";
+      }
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
+    .before\\:flex:before {
+      content: var(--tw-content);
+      display: flex;
     }
 
     @property --tw-content {
@@ -138,17 +136,15 @@ test('before', async () => {
 
 test('after', async () => {
   expect(await run(['after:flex'])).toMatchInlineSnapshot(`
-    ".after\\:flex:after {
-      content: var(--tw-content);
-      display: flex;
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-content: "";
+      }
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
+    .after\\:flex:after {
+      content: var(--tw-content);
+      display: flex;
     }
 
     @property --tw-content {
@@ -2248,7 +2244,13 @@ test('variant order', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-content: "";
+      }
+    }
+
+    @media (hover: hover) {
       .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
         display: flex;
       }
@@ -2411,14 +2413,6 @@ test('variant order', async () => {
       display: flex;
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;