Apply cleanups and also flag color-mix(…) polyfills so they aren't included in IntelliSense output

Author: philipp-spiess

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

@@ -279,7 +279,6 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
               DEBUG && I.end('AST -> CSS')
 
               DEBUG && I.start('Lightning CSS')
-              // @ts-ignore
               let ast = optimizeCss(css, {
                 minify: typeof optimize === 'object' ? optimize.minify : true,
               })

packages/tailwindcss/src/ast.ts

@@ -325,7 +325,7 @@ export function optimizeAst(
 
       // Create fallback values for usages of the `color-mix(…)` function that reference variables
       // found in the theme config.
-      if (node.value.includes('color-mix(')) {
+      if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) {
         let ast = ValueParser.parse(node.value)
 
         let didGenerateFallback = false
@@ -348,10 +348,11 @@ export function optimizeAst(
           // `oklab(…)` functions again as their support in Safari <16 is very limited.
           let colorspace = node.nodes[2]
           if (
-            (colorspace.kind === 'word' && colorspace.value === 'oklab') ||
-            colorspace.value === 'oklch' ||
-            colorspace.value === 'lab' ||
-            colorspace.value === 'lch'
+            colorspace.kind === 'word' &&
+            (colorspace.value === 'oklab' ||
+              colorspace.value === 'oklch' ||
+              colorspace.value === 'lab' ||
+              colorspace.value === 'lch')
           ) {
             colorspace.value = 'srgb'
           }
@@ -404,9 +405,8 @@ export function optimizeAst(
         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``
+      // 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`
       if (polyfills & Polyfills.AtProperty) {
         let property = node.params
         let initialValue = null
@@ -448,8 +448,7 @@ export function optimizeAst(
         transform(child, copy.nodes, context, depth + 1)
       }
 
-      // Only track `@keyframes` that could be removed, when they were defined
-      // inside of a `@theme`.
+      // Only track `@keyframes` that could be removed, when they were defined inside of a `@theme`.
       if (node.name === '@keyframes' && context.theme) {
         keyframes.add(copy)
       }
@@ -572,32 +571,30 @@ export function optimizeAst(
 
   // Fallbacks
   if (polyfills & Polyfills.AtProperty) {
-    {
-      let fallbackAst = []
+    let fallbackAst = []
 
-      if (propertyFallbacksRoot.length > 0) {
-        fallbackAst.push(rule(':root, :host', propertyFallbacksRoot))
-      }
+    if (propertyFallbacksRoot.length > 0) {
+      fallbackAst.push(rule(':root, :host', propertyFallbacksRoot))
+    }
 
-      if (propertyFallbacksUniversal.length > 0) {
-        fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
-      }
+    if (propertyFallbacksUniversal.length > 0) {
+      fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+    }
 
-      if (fallbackAst.length > 0) {
-        let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment')
-        if (firstNonCommentIndex === -1) firstNonCommentIndex = 0
-        newAst.splice(
-          firstNonCommentIndex,
-          0,
-          atRule(
-            '@supports',
-            // We can't write a supports query for `@property` directly so we have to test for
-            // features that are added around the same time in Mozilla and Safari.
-            '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
-            [rule('@layer base', fallbackAst)],
-          ),
-        )
-      }
+    if (fallbackAst.length > 0) {
+      let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment')
+      if (firstNonCommentIndex === -1) firstNonCommentIndex = 0
+      newAst.splice(
+        firstNonCommentIndex,
+        0,
+        atRule(
+          '@supports',
+          // We can't write a supports query for `@property` directly so we have to test for
+          // features that are added around the same time in Mozilla and Safari.
+          '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
+          [rule('@layer base', fallbackAst)],
+        ),
+      )
     }
   }
 

packages/tailwindcss/src/index.test.ts

@@ -5009,7 +5009,7 @@ describe('`@property` polyfill', async () => {
     `)
   })
 
-  it('can be disabled to not emit fallbacks (necessary for CSS modules)', async () => {
+  it('emitting fallbacks can be disabled (necessary for CSS modules)', async () => {
     await expect(
       compileCss(
         css`

packages/tailwindcss/src/index.ts

@@ -43,8 +43,11 @@ export const enum Polyfills {
   // Control if fallbacks for `@property` rules are emitted
   AtProperty = 1 << 0,
 
+  // Control if `color-mix(…)` fallbacks are inserted
+  ColorMix = 1 << 1,
+
   // Enable all
-  All = AtProperty,
+  All = AtProperty | ColorMix,
 }
 
 type CompileOptions = {

packages/tailwindcss/src/utilities.ts

@@ -187,8 +187,6 @@ export function withAlpha(value: string, alpha: string): string {
  * Apply opacity to a color using `color-mix`.
  */
 export function replaceAlpha(value: string, alpha: string): string {
-  if (alpha === null) return value
-
   // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
   // work properly with `color-mix`. Assume anything that isn't a number is
   // safe to pass through as-is, like `var(--my-opacity)`.

packages/tailwindcss/src/utils/replace-shadow-colors.ts

@@ -84,7 +84,7 @@ export function replaceShadowColors(
       requiresFallback = true
     }
 
-    shadows.push(replace(replaceAlpha(color ?? 'currentcolor', intensity ?? null)))
+    shadows.push(replace(replaceAlpha(color ?? 'currentcolor', intensity)))
     fallbackShadows.push(replace(color ?? 'currentcolor'))
   })