Tailwind Plugin Broken in V4

[mhornbacher]

Provide a general summary of the issue here

It seems that the :merge selector is no longer supported in V4 and is not included in the v4 docs.

tailwindlabs/tailwindcss#15617

🤔 Expected Behavior?

The plugin should not break the application when using peer selectors

😯 Current Behavior

The following error is thrown by Tailwind v4

Parsing css source code failed
  530 |   }
  531 |   .peer-disabled\:text-purple-500 {
> 532 |     :merge(.peer):where([data-rac])[data-disabled] ~ & {
      |             ^
  533 |       color: var(--color-purple-500);
  534 |     }
  535 |     :merge(.peer):where(:not([data-rac])):disabled ~ & {

'merge' is not recognized as a valid pseudo-class. Did you mean '::merge' (pseudo-element) or is this a typo? at [project]/src/app/globals.css:531:12

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/mhornbacher/tailwind-repro

Version

tailwindcss-react-aria-components 1.2.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

Kiddom

🕷 Tracking Issue

No response

[lensbart]

Might be related to #6127

[deebov]

Hey @mhornbacher, we had the same issue and a very quick workaround for us was to copy the index.js of the plugin and import it locally.

We only has to comment out the conflicting part in the plugin:

react-spectrum/packages/tailwindcss-react-aria-components/src/index.js

Lines 117 to 132 in 3e1c518

	matchVariant(
	'group',
	(_, {modifier}) =>
	modifier
	? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group\\/${modifier})${s.slice(1)} &`))
	: mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group)${s.slice(1)} &`)),
	{values: {[variantName]: variantName}}
	);
	matchVariant(
	'peer',
	(_, {modifier}) =>
	modifier
	? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer\\/${modifier})${s.slice(1)} ~ &`))
	: mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer)${s.slice(1)} ~ &`)),
	{values: {[variantName]: variantName}}
	);

Can't say if this workaround works as effectively as the React Aria team initially intended, because these lines were responsible for adding such selectors to ensure only RAC components are targeted:

  ':merge(.group):where([data-rac])[data-disabled] &',
  ':merge(.group):where(:not([data-rac])):disabled &'

But it did fix our issues.

[mhornbacher]

Interesting. My laptop was sadly stolen and it will be a week until I'm home to get another one. But I wonder if this is even the correct way to solve the issue

[e-krebs]

personally I removed this plugin and instead added the following variants:

@variant disabled (&:where([data-disabled])); 
@variant selected (&:where([data-selected])); 
@variant focus (&:where([data-focused]));