Do what needs to be done

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

@@ -164,7 +164,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    @supports (color: color-mix(in srgb, red 0%, red)) {
+    ::placeholder {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
       ::placeholder {
         color: color-mix(in oklab, currentColor 50%, transparent);
       }
@@ -261,7 +265,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 
-  @supports (color: color-mix(in srgb, red 0%, red)) {
+  .text-black\\/50 {
+    color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
     .text-black\\/50 {
       color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
@@ -271,14 +279,22 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     text-decoration-line: underline;
   }
 
-  @media (width >= 96rem) {
+  @media (min-width: 96rem) {
     .\\32 xl\\:font-bold {
       --tw-font-weight: var(--font-weight-bold);
       font-weight: var(--font-weight-bold);
     }
   }
 }
 
+@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-postcss/src/index.test.ts

@@ -276,7 +276,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@media (width >= 48rem) {
+    "@media (min-width: 48rem) {
       .foo {
         bar: baz;
       }

packages/@tailwindcss-postcss/src/index.ts

@@ -52,7 +52,6 @@ export type PluginOptions = {
 function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   let base = opts.base ?? process.cwd()
   let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'
-  console.log({ opts, flag: process.env.NODE_ENV })
 
   return {
     postcssPlugin: '@tailwindcss/postcss',
@@ -341,8 +340,6 @@ function optimizeCss(
   }
 
   let out = optimize(optimize(Buffer.from(input))).toString()
-  console.log({ out })
-
   out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ')
 
   // Running Lightning CSS twice to ensure that adjacent rules are merged after

packages/tailwindcss/src/ast.ts

@@ -269,6 +269,9 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
   let keyframes = new Set<AtRule>()
   let usedKeyframeNames = new Set()
 
+  let propertyFallbacksRoot: Declaration[] = []
+  let propertyFallbacksUniversal: Declaration[] = []
+
   let variableDependencies = new DefaultMap<string, Set<string>>(() => new Set())
 
   function transform(
@@ -323,37 +326,50 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
         ValueParser.walk(ast, (node, { replaceWith }) => {
           if (node.kind === 'function' && node.value === 'color-mix') {
             let args = ValueParser.toCss(node.nodes)
-            let match = args.match(/in \w+, (.+) ?(\d+%), transparent/)
-            if (match) {
-              let color = match[1]
-              let percentage = match[2]
-
-              if (color.startsWith('var(')) {
-                let name = segment(color.slice(4, -1), ',')[0]
-                if (!name) return
-                let resolved = designSystem.theme.resolveValue(null, [name as any])
-                if (!resolved) return
-                color = resolved
-              }
 
-              if (
-                (color.startsWith('oklch(') ||
-                  color.startsWith('oklab(') ||
-                  color.startsWith('lab(') ||
-                  color.startsWith('lch(')) &&
-                color.endsWith(')')
-              ) {
-                let fallback = `${color.slice(0, -1)} / ${percentage})`
-                didGenerateFallback = true
-                replaceWith({ kind: 'word', value: fallback })
+            let segments = segment(args, ',')
+
+            if (segments.length !== 3) {
+              return
+            }
+
+            let [, colorA, colorB] = segments
+
+            colorA = colorA.trim()
+            colorB = colorB.trim()
+
+            if (colorB !== 'transparent') {
+              return
+            }
+
+            if (colorA.startsWith('var(')) {
+              let lastClosingParen = colorA.lastIndexOf(')')
+              if (lastClosingParen === -1) {
+                return
               }
+              colorA =
+                colorA.slice(0, lastClosingParen + 1) + ' ' + colorA.slice(lastClosingParen + 1)
             }
+
+            let [color, percentage] = segment(colorA.replaceAll(/ +/g, ' '), ' ')
+
+            let fallback = color
+            if (color.startsWith('var(')) {
+              let name = segment(color.slice(4, -1), ',')[0]
+              if (!name) return
+              let inlinedColor = designSystem.theme.resolveValue(null, [name as any])
+              if (!inlinedColor) return
+              fallback = `color-mix(in srgb, ${inlinedColor} ${percentage}, transparent)`
+            }
+
+            didGenerateFallback = true
+            replaceWith({ kind: 'word', value: fallback })
           }
         })
 
         if (didGenerateFallback) {
           let fallback = { ...node, value: ValueParser.toCss(ast) }
-          let colorMixQuery = rule('@supports (color: color-mix(in srgb, red 0%, red))', [node])
+          let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
 
           parent.push(fallback, colorMixQuery)
           return
@@ -395,6 +411,28 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
         return
       }
 
+      // Collect fallbacks for `@property` rules for Firefox support
+      // We turn these into rules on `:root` or `*` and some pseudo-elements
+      // based on the value of `inherits``
+      let property = node.params
+      let initialValue = null
+      let inherits = false
+
+      for (let prop of node.nodes) {
+        if (prop.kind !== 'declaration') continue
+        if (prop.property === 'initial-value') {
+          initialValue = prop.value
+        } else if (prop.property === 'inherits') {
+          inherits = prop.value === 'true'
+        }
+      }
+
+      if (inherits) {
+        propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
+      } else {
+        propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
+      }
+
       seenAtProperties.add(node.params)
 
       let copy = { ...node, nodes: [] }
@@ -537,6 +575,29 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
     }
   }
 
+  // Fallbacks
+  {
+    let fallbackAst = []
+
+    if (propertyFallbacksRoot.length > 0) {
+      fallbackAst.push(rule(':root', propertyFallbacksRoot))
+    }
+
+    if (propertyFallbacksUniversal.length > 0) {
+      fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+    }
+
+    if (fallbackAst.length > 0) {
+      newAst.push(
+        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)],
+        ),
+      )
+    }
+  }
+
   return newAst.concat(atRoots)
 }
 

packages/tailwindcss/src/at-import.test.ts

@@ -318,7 +318,7 @@ test('@supports', async () => {
     ),
   ).resolves.toMatchInlineSnapshot(`
     "@supports (display: grid) {
-      @media screen and (width <= 400px) {
+      @media screen and (max-width: 400px) {
         a {
           color: red;
         }
@@ -337,7 +337,7 @@ test('@supports', async () => {
     ),
   ).resolves.toMatchInlineSnapshot(`
     "@supports (not (display: grid)) and (display: flex) {
-      @media screen and (width <= 400px) {
+      @media screen and (max-width: 400px) {
         a {
           color: red;
         }

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

@@ -348,6 +348,13 @@ 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;