Add expanded boolean attribute to tailwind plugin (adobe#7152)

* Add expanded boolean attribute to tailwind plugin After testing out the new `Disclosure` components, I see that the tailwind plugin does not support styling the `expanded` state, leaving me to style using `data-[expanded]`. This PR adds `expanded` top the list of boolean states. * Update tests * fix tests * fix test * Add selector for native variant * lint fix
blefnk · Oct 15, 2024 · e22e960 · e22e960
1 parent 987f174
commit e22e960
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/packages/tailwindcss-react-aria-components/src/index.js b/packages/tailwindcss-react-aria-components/src/index.js
@@ -13,6 +13,7 @@ const attributes = {
 
     // States
     'open',
+    'expanded',
     'entering',
     'exiting',
     'indeterminate',
@@ -67,7 +68,8 @@ const nativeVariantSelectors = new Map([
   ['hovered', ':hover'],
   ['focused', ':focus'],
   ['readonly', ':read-only'],
-  ['open', '[open]']
+  ['open', '[open]'],
+  ['expanded', '[expanded]']
 ]);
 
 // Variants where both native and RAC attributes should apply. We don't override these.

diff --git a/packages/tailwindcss-react-aria-components/src/index.test.js b/packages/tailwindcss-react-aria-components/src/index.test.js
@@ -14,17 +14,17 @@ function run({options, content, future = {}}) {
     content: [{raw: content}],
     future
   };
-
+    
   return postcss(tailwind(config)).process(
-    ['@tailwind base;', '@tailwind components;', '@tailwind utilities'].join('\n'),
+        ['@tailwind base;', '@tailwind components;', '@tailwind utilities'].join('\n'),
     {
       from: `${path.resolve(__filename)}?test=${currentTestName}`
     }
-  );
+    );
 }
 
 test('variants', async () => {
-  let content = html`<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red has-submenu:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red group/custom-name group-hover/custom-name:bg-red peer-pressed/custom-name:bg-red"></div>`;
+  let content = html`<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red has-submenu:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red expanded:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red group/custom-name group-hover/custom-name:bg-red peer-pressed/custom-name:bg-red"></div>`;
   return run({content}).then((result) => {
     expect(result.css).toContain(css`
 .placement-left\:bg-red[data-placement="left"] {
@@ -127,6 +127,14 @@ test('variants', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.expanded\:bg-red:where([data-rac])[data-expanded] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
+.expanded\:bg-red:where(:not([data-rac]))[expanded] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .entering\:bg-red[data-entering] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
@@ -295,12 +303,12 @@ test('variants', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }`
-    );
+        );
   });
 });
 
 test('variants with prefix', async () => {
-  let content = html`<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-has-submenu:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red group/custom-name group-rac-hover/custom-name:bg-red peer-rac-pressed:bg-red peer-rac-pressed/custom-name:bg-red"></div>`;
+  let content = html`<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-has-submenu:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-expanded:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red group/custom-name group-rac-hover/custom-name:bg-red peer-rac-pressed:bg-red peer-rac-pressed/custom-name:bg-red"></div>`;
   return run({content, options: {prefix: 'rac'}}).then((result) => {
     expect(result.css).toContain(css`
 .rac-placement-left\:bg-red[data-placement="left"] {
@@ -399,6 +407,10 @@ test('variants with prefix', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.rac-expanded\:bg-red[data-expanded] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .rac-entering\:bg-red[data-entering] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
@@ -511,7 +523,7 @@ test('variants with prefix', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }`
-    );
+        );
   });
 });
 
@@ -531,3 +543,4 @@ test('hoverOnlyWhenSupported', () => {
 }`);
   });
 });
+