WIP

Author: philipp-spiess

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -446,7 +446,7 @@ function optimizeCss(
       nonStandard: {
         deepSelectorCombinator: true,
       },
-      include: Features.Nesting,
+      include: Features.Nesting | Features.MediaQueries,
       exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
       targets: {
         safari: (16 << 16) | (4 << 8),

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

@@ -164,8 +164,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
+    @supports (color: color-mix(in srgb, red 0%, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }
     }
   }
 
@@ -259,8 +261,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 
-  .text-black\\/50 {
-    color: color-mix(in oklab, var(--color-black) 50%, transparent);
+  @supports (color: color-mix(in srgb, red 0%, red)) {
+    .text-black\\/50 {
+      color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
   }
 
   .underline {

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

@@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
     ".foo {
-      color: var(--color-red-500, oklch(.637 .237 25.331));
+      color: var(--color-red-500, oklch(63.7% .237 25.331));
     }"
   `)
 })

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

@@ -52,6 +52,7 @@ 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',
@@ -319,13 +320,13 @@ function optimizeCss(
       nonStandard: {
         deepSelectorCombinator: true,
       },
-      include: LightningCssFeatures.Nesting,
+      include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax,
       exclude:
         LightningCssFeatures.LogicalProperties |
         LightningCssFeatures.DirSelector |
         LightningCssFeatures.LightDark,
       targets: {
-        safari: (16 << 16) | (4 << 8),
+        safari: (15 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),
         firefox: 128 << 16,
         chrome: 111 << 16,
@@ -334,9 +335,14 @@ function optimizeCss(
     }).code
   }
 
+  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
   // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
+  return out
 }
 
 export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>

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

@@ -143,7 +143,7 @@ function optimizeCss(
       nonStandard: {
         deepSelectorCombinator: true,
       },
-      include: LightningCssFeatures.Nesting,
+      include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries,
       exclude:
         LightningCssFeatures.LogicalProperties |
         LightningCssFeatures.DirSelector |

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

@@ -2,7 +2,7 @@
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
 ":root, :host {
-  --color-red-500: oklch(.637 .237 25.331);
+  --color-red-500: oklch(63.7% .237 25.331);
   --spacing: .25rem;
 }
 
@@ -254,7 +254,13 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
 
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
     ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in srgb, red 50%, green)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }
     }
   }