Remove named opacity support for color opacity modifiers (#14278)

Right now if you have a custom opacity theme value configured like this… ```css @theme { --opacity-disabled: 50%; } ``` …then you can use that named opacity value as a color opacity modifier like this: ```html <div class="bg-red-500/disabled"> ``` We think this behavior is confusing. The color opacity modifier is not setting opacity but the alpha value of a color. Opacity is for setting the opacity of an element, so the custom names you'd come up with are named after those situations, which makes them not seem appropriate for color modifiers.
tailwindlabs · Sep 2, 2024 · c6e4dab · c6e4dab
1 parent d9e3fd6
commit c6e4dab
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265))
 - Support bare values when using `tailwindcss/defaultTheme` ([#14257](https://github.com/tailwindlabs/tailwindcss/pull/14257))
 
+## Changed
+
+- Remove named opacity support for color opacity modifiers ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
+
 ## [4.0.0-alpha.20] - 2024-08-23
 
 ### Added

diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts
@@ -235,7 +235,7 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
     // Assumption: If an arbitrary property has a modifier, then we assume it
     // is an opacity modifier.
     if (candidate.modifier) {
-      value = asColor(value, candidate.modifier, designSystem.theme)
+      value = asColor(value, candidate.modifier)
     }
 
     if (value === null) return []

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -9610,28 +9610,15 @@ test('bg', async () => {
   expect(
     await compileCss(
       css`
-        @theme {
+        @theme reference {
           --opacity-half: 0.5;
           --opacity-custom: var(--custom-opacity);
         }
         @tailwind utilities;
       `,
-      ['bg-current/half', 'bg-current/custom'],
+      ['bg-current/half', 'bg-current/custom', '[color:red]/half'],
     ),
-  ).toMatchInlineSnapshot(`
-    ":root {
-      --opacity-half: .5;
-      --opacity-custom: var(--custom-opacity);
-    }
-
-    .bg-current\\/custom {
-      background-color: color-mix(in srgb, currentColor calc(var(--opacity-custom, var(--custom-opacity)) * 100%), transparent);
-    }
-
-    .bg-current\\/half {
-      background-color: color-mix(in srgb, currentColor calc(var(--opacity-half, .5) * 100%), transparent);
-    }"
-  `)
+  ).toEqual('')
 })
 
 test('from', async () => {

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -129,24 +129,13 @@ export function withAlpha(value: string, alpha: string): string {
 /**
  * Resolve a color value + optional opacity modifier to a final color.
  */
-export function asColor(
-  value: string,
-  modifier: CandidateModifier | null,
-  theme: Theme,
-): string | null {
+export function asColor(value: string, modifier: CandidateModifier | null): string | null {
   if (!modifier) return value
 
   if (modifier.kind === 'arbitrary') {
     return withAlpha(value, modifier.value)
   }
 
-  // Check if the modifier exists in the `opacity` theme configuration and use
-  // that value if so.
-  let alpha = theme.resolve(modifier.value, ['--opacity'])
-  if (alpha) {
-    return withAlpha(value, alpha)
-  }
-
   if (Number.isNaN(Number(modifier.value))) {
     return null
   }
@@ -208,7 +197,7 @@ function resolveThemeColor<T extends ColorThemeKey>(
     }
   }
 
-  return value ? asColor(value, candidate.modifier, theme) : null
+  return value ? asColor(value, candidate.modifier) : null
 }
 
 export function createUtilities(theme: Theme) {
@@ -360,7 +349,7 @@ export function createUtilities(theme: Theme) {
         value = candidate.value.value
 
         // Apply an opacity modifier to the value if appropriate.
-        value = asColor(value, candidate.modifier, theme)
+        value = asColor(value, candidate.modifier)
       } else {
         value = resolveThemeColor(candidate, theme, desc.themeKeys)
       }
@@ -2241,7 +2230,7 @@ export function createUtilities(theme: Theme) {
               return [borderProperties(), ...decls]
             }
             default: {
-              value = asColor(value, candidate.modifier, theme)
+              value = asColor(value, candidate.modifier)
               if (value === null) return
 
               return desc.color(value)
@@ -2549,7 +2538,7 @@ export function createUtilities(theme: Theme) {
           return [decl('background-image', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('background-color', value)]
@@ -2625,7 +2614,7 @@ export function createUtilities(theme: Theme) {
             return desc.position(value)
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return desc.color(value)
@@ -2763,7 +2752,7 @@ export function createUtilities(theme: Theme) {
     if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
-      let value = asColor(candidate.value.value, candidate.modifier, theme)
+      let value = asColor(candidate.value.value, candidate.modifier)
       if (value === null) return
       return [decl('fill', value)]
     }
@@ -2801,7 +2790,7 @@ export function createUtilities(theme: Theme) {
           return [decl('stroke-width', value)]
         }
         default: {
-          value = asColor(candidate.value.value, candidate.modifier, theme)
+          value = asColor(candidate.value.value, candidate.modifier)
           if (value === null) return
 
           return [decl('stroke', value)]
@@ -3099,7 +3088,7 @@ export function createUtilities(theme: Theme) {
           return [decl('text-decoration-thickness', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('text-decoration-color', value)]
@@ -3936,7 +3925,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('outline-color', value)]
@@ -4068,7 +4057,7 @@ export function createUtilities(theme: Theme) {
           return [decl('font-size', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('color', value)]
@@ -4184,7 +4173,7 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'color': {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [
@@ -4280,7 +4269,7 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'color': {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [
@@ -4392,7 +4381,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-ring-color', value)]
@@ -4468,7 +4457,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-inset-ring-color', value)]
@@ -4533,7 +4522,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-ring-offset-color', value)]