Don’t suggest named opacity modifiers in intellisense (#14339)

We removed named opacity modifier support in #14278 but we (read: me
lol) totally forgot about the suggestions in intellisense. So we need to
make sure that we don't suggest those either.

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix support for Nuxt projects in the Vite plugin (requires Nuxt 3.13.1+) ([#14319](https://github.com/tailwindlabs/tailwindcss/pull/14319))
 - Evaluate theme functions in plugins and JS config files ([#14326](https://github.com/tailwindlabs/tailwindcss/pull/14326))
 - Ensure theme values overridden with `reference` values don't generate stale CSS variables ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
+- Don’t suggest named opacity modifiers in intellisense ([#14339](https://github.com/tailwindlabs/tailwindcss/pull/14339))
 
 ## [4.0.0-alpha.21] - 2024-09-02
 

packages/tailwindcss/src/intellisense.test.ts

@@ -16,13 +16,17 @@ function loadDesignSystem() {
   theme.add('--font-size-xs--line-height', '1rem')
   theme.add('--perspective-dramatic', '100px')
   theme.add('--perspective-normal', '500px')
+  theme.add('--opacity-background', '0.3')
   return buildDesignSystem(theme)
 }
 
 test('getClassList', () => {
   let design = loadDesignSystem()
   let classList = design.getClassList()
-  let classNames = classList.map(([name]) => name)
+  let classNames = classList.flatMap(([name, meta]) => [
+    name,
+    ...meta.modifiers.map((m) => `${name}/${m}`),
+  ])
 
   expect(classNames).toMatchSnapshot()
 })

packages/tailwindcss/src/utilities.ts

@@ -366,7 +366,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: desc.themeKeys,
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
     ])
   }
@@ -2269,7 +2268,6 @@ export function createUtilities(theme: Theme) {
           values: ['current', 'inherit', 'transparent'],
           valueThemeKeys: ['--border-color', '--color'],
           modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-          modifierThemeKeys: ['--opacity'],
           hasDefaultValue: true,
         },
         {
@@ -2569,7 +2567,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--background-color', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
     {
       values: [],
@@ -2650,7 +2647,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--background-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
       {
         values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
@@ -2768,7 +2764,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--fill', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
   ])
 
@@ -2820,7 +2815,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--stroke', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2', '3'],
@@ -3124,7 +3118,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--text-decoration-color', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2'],
@@ -3966,7 +3959,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--outline-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
         hasDefaultValue: true,
       },
       {
@@ -4113,7 +4105,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--text-color', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
     {
       values: [],
@@ -4236,7 +4227,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
       {
         values: [],
@@ -4339,7 +4329,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
       {
         values: [],
@@ -4419,7 +4408,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
       {
         values: ['0', '1', '2', '4', '8'],
@@ -4495,7 +4483,6 @@ export function createUtilities(theme: Theme) {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        modifierThemeKeys: ['--opacity'],
       },
       {
         values: ['0', '1', '2', '4', '8'],
@@ -4563,7 +4550,6 @@ export function createUtilities(theme: Theme) {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--ring-offset-color', '--color'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2', '4', '8'],