Fix canonicalization of arbitrary variants with attribute selectors (#19176)

Fixes tailwindlabs/tailwindcss-intellisense#1481 We were detecting when we needed to apply the `*` and `**` variants and even detecting attribute selectors. However we only cleaned up the attribute selectors when they were `data-*` or `aria-*` attributes. This resulted in a "loop" of sorts because we'd: - See something like `[&_>_[foo]]:flex` - Notice that it needs a `*` variant - Add the `*` variant, giving `*:[&_>[foo]]:flex` - But fail to cleanup the remainder of the variant This then meant that we'd see the `*:[&_>[foo]]:flex` the next time we checked, notice that it still needed a `*` variant, and repeat… This PR fixes this case to clean up the selector.

Author: thecrypticace

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Discard candidates with an empty data type ([#19172](https://github.com/tailwindlabs/tailwindcss/pull/19172))
+- Fix canonicalization of arbitrary variants with attribute selectors ([#19176](https://github.com/tailwindlabs/tailwindcss/pull/19176))
 
 ## [4.1.15] - 2025-10-20
 

packages/tailwindcss/src/canonicalize-candidates.test.ts

@@ -846,6 +846,10 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
  ['[&_>_[data-visible]]:flex', '*:data-visible:flex'],
  ['[&>*]:flex', '*:flex'],
  ['[&_>_*]:flex', '*:flex'],
+ ['[&_>_[foo]]:flex', '*:[[foo]]:flex'],
+ ['[&_[foo]]:flex', '**:[[foo]]:flex'],
+ ['[&_>_[foo=bar]]:flex', '*:[[foo=bar]]:flex'],
+ ['[&_[foo=bar]]:flex', '**:[[foo=bar]]:flex'],
 
  ['[&_[data-visible]]:flex', '**:data-visible:flex'],
  ['[&_*]:flex', '**:flex'],

packages/tailwindcss/src/canonicalize-candidates.ts

@@ -1649,8 +1649,9 @@ function modernizeArbitraryValuesVariant(
  !isSingleSelector(target.nodes) ||
  // [foo][bar] is considered a single selector but has multiple nodes
  target.nodes.length !== 1
- )
+ ) {
  continue
+ }
 
  // Expecting a single attribute selector
  if (!isAttributeSelector(target.nodes[0])) continue
@@ -1796,6 +1797,15 @@ function modernizeArbitraryValuesVariant(
  }, // aria-[foo~="true"], aria-[foo|="true"], …
  } satisfies Variant)
  }
+
+ // Arbitrary attributes
+ else {
+ replaceObject(variant, {
+ kind: 'arbitrary',
+ selector: target.value,
+ relative: false,
+ } satisfies Variant)
+ }
  }
 
  if (prefixedVariant) {