RAC: add Tailwind plugin for RAC states (#4933)

* add tailwind plugin for RAC states

* add docs

* add option for prefix

* update docs to mention prefix option

* update to use data-rac attribute

* change focused->focus and hovered->hover

* update example app to use plugin

* fix selector

* fix test

* add native element to test app

* temp run verdaccio build

* temp run verdaccio build

* revert verdaccio

* typo

Author: reidbarber

examples/rac-spectrum-tailwind/src/App.js

@@ -16,6 +16,13 @@ export function App() {
       <div className="grid justify-center grid-cols-1 gap-160 auto-rows-fr">
         <SelectBoxExample />
         <SentimentRatingGroup />
+        <div className="flex justify-center">
+          <div className="flex flex-col max-w-sm">
+            <label for="test-input">Native input</label>
+            <input id="test-input" className="border focus:bg-gray-200 focus:outline-none focus:border-blue-600 hover:border-blue-300" />
+            <p>For the purpose of ensuring Tailwind's default selectors still work for non-RAC elements when using the plugin.</p>
+          </div>
+        </div>
       </div>
     </Provider>
   );
@@ -24,6 +31,7 @@ export function App() {
 function SelectBoxExample() {
   return (
     <RadioGroup
+      data-rac
       className="flex flex-col space-y-2 text-center"
       defaultValue="Team"
     >
@@ -52,6 +60,7 @@ function SelectBoxExample() {
 function SelectBox({ name, icon, description }) {
   return (
     <Radio
+      data-rac
       value={name}
       className={({ isFocusVisible, isSelected, isPressed }) => `
       flex justify-center p-160 m-160 h-2000 w-2000 focus:outline-none border rounded
@@ -100,8 +109,9 @@ function SentimentRatingGroup() {
 function SentimentRating({ rating }) {
   return (
     <Radio
+      data-rac
       value={rating}
-      className="flex items-center justify-center bg-white border rounded-full p-160 m-75 h-200 w-200 focus:outline-none focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hovered:border-gray-300"
+      className="flex items-center justify-center bg-white border rounded-full p-160 m-75 h-200 w-200 focus:outline-none focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
     >
       {rating}
     </Radio>

examples/rac-spectrum-tailwind/tailwind.config.js

@@ -7,6 +7,6 @@ module.exports = {
     require('./src/spectrum-preset.js')
   ],
   plugins: [
-    require('./src/rac-plugin.js')
+    require('../../packages/tailwindcss-react-aria-components/src/index.js')
   ],
 }

package.json

@@ -170,6 +170,7 @@
     "sharp": "^0.31.2",
     "sinon": "^7.3.1",
     "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
+    "tailwindcss": "^3.2.2",
     "tempy": "^0.5.0",
     "typescript": "5.0.4",
     "typescript-strict-plugin": "^2.0.0",

packages/react-aria-components/docs/react-aria-components.mdx

@@ -425,6 +425,51 @@ If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](http
 
 The documentation for each component includes many examples styled using vanilla CSS and the default class names. We also have an example of many of the components using Tailwind CSS. You can find the [code](https://github.com/adobe/react-spectrum/blob/main/examples/rac-tailwind/src/App.js) in the repo, as well as a [live demo](https://reactspectrum.blob.core.windows.net/reactspectrum/f239d0b1a96c3e6119135fe6bbf1994dc9984257/verdaccio/rac-tailwind/index.html).
 
+## Tailwind CSS Plugin
+
+There is a Tailwind CSS plugin available which makes styling different [states](#states) easier.
+
+This allows an element with the `data-selected` attribute to be styled in Tailwind with `selected:` instead of `data-[selected]:`. Non-boolean data attributes follow the `{name}-{value}` pattern, so you can style an element with `data-orientation="horizontal"` using `orientation-horizontal:`.
+
+To install:
+
+```
+yarn add tailwindcss-react-aria-components
+```
+
+Then add the plugin to your `tailwind.config.js` file:
+
+```jsx
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  plugins: [
+    require('tailwindcss-react-aria-components')
+  ],
+}
+```
+
+You can optionally specify a prefix using `require('tailwindcss-react-aria-components')({prefix: 'rac'})`. This will allow you to use `rac-selected:` instead of `selected:`.
+
+### Boolean states
+
+The `data-selected` state can be styled with `selected:` like this:
+
+```jsx
+<Button className="selected:bg-blue">
+  {/* ... */}
+</Button>
+```
+
+### Non-boolean states
+
+The `data-orientation="vertical"` state can be styled with `orientation-vertical:` like this:
+
+```jsx
+<Tabs className="orientation-vertical:flex-row">
+  {/* ... */}
+</Tabs>
+```
+
 ## Components
 
 ### Buttons

packages/react-aria-components/src/utils.tsx

@@ -126,7 +126,8 @@ export function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
     return {
       className: computedClassName ?? defaultClassName,
       style: computedStyle,
-      children: computedChildren
+      children: computedChildren,
+      'data-rac': ''
     };
   }, [className, style, children, defaultClassName, defaultChildren, values]);
 }

packages/tailwindcss-react-aria-components/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tailwindcss-react-aria-components",
+  "version": "1.0.0-alpha.1",
+  "description": "A Tailwind plugin that adds variants for data attributes in React Aria Components",
+  "license": "Apache-2.0",
+  "main": "src/index.js",
+  "types": "src/types.d.ts",
+  "source": "src/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0 || insiders"
+  },
+  "devDependencies": {
+    "postcss": "^7.0.0",
+    "tailwindcss": "^3.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/tailwindcss-react-aria-components/src/index.d.ts

@@ -0,0 +1,9 @@
+declare function plugin(options?: Partial<{ className: string, target: 'modern' | 'legacy' }>): {
+  handler: () => void
+}
+
+declare namespace plugin {
+  const __isOptionsFunction: true;
+}
+
+export = plugin

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

@@ -0,0 +1,69 @@
+import plugin from 'tailwindcss/plugin';
+
+const attributes = {
+  boolean: [
+    ['hover', 'hovered'],
+    ['focus', 'focused'],
+    'focus-visible',
+    'pressed',
+    'disabled',
+    'drop-target',
+    'dragging',
+    'empty',
+    'allows-removing',
+    'allows-sorting',
+    'placeholder',
+    'selected',
+    'indeterminate',
+    'readonly',
+    'required',
+    'entering',
+    'exiting',
+    'open',
+    'unavailable',
+    'current',
+    'invalid'
+  ],
+  enum: {
+    'validation-state': ['invalid', 'valid'],
+    placement: ['left', 'right', 'top', 'bottom'],
+    type: ['literal', 'year', 'month', 'day'],
+    layout: ['grid', 'stack'],
+    orientation: ['horizontal', 'vertical']
+  }
+};
+
+// Variants we use that are already defined by Tailwind:
+// https://github.com/tailwindlabs/tailwindcss/blob/a2fa6932767ab328515f743d6188c2164ad2a5de/src/corePlugins.js#L84
+const nativeVariants = ['indeterminate', 'required', 'invalid', 'empty', 'focus-visible', 'disabled'];
+const nativeVariantSelectors = new Map([...nativeVariants.map((variant) => [variant, `:${variant}`]), ['hovered', ':hover'], ['focused', ':focus'], ['open', '[open]']]);
+
+// If no prefix is specified, we want to avoid overriding native variants on non-RAC components, so we only target elements with the data-rac attribute for those variants.
+let getSelector = (prefix, attributeName, attributeValue) => {
+  let baseSelector = attributeValue ? `[data-${attributeName}="${attributeValue}"]` : `[data-${attributeName}]`;
+  if (prefix === '' && nativeVariantSelectors.has(attributeName)) {
+    return `&:is([data-rac]${baseSelector}, :not([data-rac])${nativeVariantSelectors.get(attributeName)})`;
+  } else {
+    return `&${baseSelector}`;
+  }
+};
+
+module.exports = plugin.withOptions((options) => (({addVariant}) => {
+  let prefix = options?.prefix ? `${options.prefix}-` : '';
+  attributes.boolean.forEach((attribute) => {
+    let variantName = Array.isArray(attribute) ? attribute[0] : attribute;
+    variantName = `${prefix}${variantName}`;
+    let attributeName = Array.isArray(attribute) ? attribute[1] : attribute;
+    let selector = getSelector(prefix, attributeName);
+    addVariant(variantName, selector);
+  });
+  Object.keys(attributes.enum).forEach((attributeName) => {
+    attributes.enum[attributeName].forEach(
+        (attributeValue) => {
+          let variantName = `${prefix}${attributeName}-${attributeValue}`;
+          let selector = getSelector(prefix, attributeName, attributeValue);
+          addVariant(variantName, selector);
+        }
+      );
+  });
+}));