[tailwindcss-react-aria-components] breaks Tailwind's arbitrary group selectors (group-[...])

[WesselKroos]

Provide a general summary of the issue here

Tailwind's arbitrary group selectors are incorrect after adding the tailwindcss-react-aria-components package's plugin to the list of plugins in the Tailwind config. Because the react-aria plugin replaces arbitrary group selectors with .group[data-sort-direction="descending"].

🤔 Expected Behavior?

Arbitrary group selectors are not modified.

😯 Current Behavior

Tailwind's arbitrary group selectors are currently transformed as follows:

Tailwind's selector

.group.is-active .group-\[\.is-active\]\:text-red

After react-aria plugin transformation

.group[data-sort-direction="descending"] .group-\[\.is-active\]\:text-red

The .is-active was replaced with [data-sort-direction="descending"].

💁 Possible Solution

Arbitrary group selectors should not be modified by react-aria, because, unlike hover states, there is no matching state in react-aria for those selectors.

🔦 Context

No response

🖥️ Steps to Reproduce

Tailwind config

import reactAriaComponentsPlugin from 'tailwindcss-react-aria-components';
export default {
  ...,
  plugins: [
    ...,
    reactAriaComponentsPlugin 
  ]
}

React component

const Example = () => {
  return (
    <div className="group [is-active]">
      <div className="group-[.is-active]:text-red">Active text</div>
    </div>
  );
}

Version

react-aria 3.31.1 & react-aria-components 1.0.1 & tailwindcss-react-aria-components 1.0.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

PS: I was able to workaround this bug for now by creating a custom postcss plugin to restores the css selectors:

module.exports = () => ({
  postcssPlugin:
    'postcss-restore-tailwindcss-arbitrary-group-selectors-with-react-aria-plugin',
  Rule: (rule) => {
    if (!rule.selector.includes('.group[data-sort-direction="descending"]'))
      return;

    // Restores arbitrary group selectors
    //   .group.is-active .group-\\[\\.is-active\\]\\:text-red
    rule.selector = rule.selector.replace(
      /\.group\[data-sort-direction="descending"\] .group-\\\[([^\]]+)\\\]/g,
      (_str, stateSelector) => {
        const state = stateSelector.replace(/\\/g, '');
        return `.group${state} .group-\\[${stateSelector}\\]`;
      },
    );

    // Restores combined arbitrary group with peer selectors
    //   .peer.is-active ~ .group .peer-\\[\\.is-active\\]\\:group-\\[\\]\\:text-red
    rule.selector = rule.selector.replace(
      /\.peer\[data-sort-direction="descending"\] ~ \.group\[data-sort-direction="descending"\] \.peer-\\\[([^\]]+)\\\]/g,
      (_str, stateSelector) => {
        const state = stateSelector.replace(/\\/g, '');
        return `.peer${state} ~ .group .peer-\\[${stateSelector}\\]`;
      },
    );
  },
});

module.exports.postcss = true;

Edit note: After further inspection it were not the peer selectors, but the arbitrary group selectors that were modified by tailwindcss-react-aria-components.

[ellemedit]

Not sure related, but following doesn't work too:

group-pressed:bg-[#0066FF]
group-selected:bg-[#0066FF]
group-selected:group-pressed:bg-[#0066FF]

[edlynvillegas]

Same problem, removing tailwindcss-react-aria-components in tailwind.config.js plugin resolved my arbitrary groups not working problem

WITH tailwindcss-react-aria-components plugin:

.group[data-disabled] .group-\[\.card--danger\]\:bg-orange-600

WITHOUT tailwindcss-react-aria-components plugin:

.group.card--danger .group-\[\.card--danger\]\:bg-orange-600

[steveoh]

I'm noticing this with normal group-pressed non arbitrary value items.