tailwindcss-react-aria-components - npm Package Compare versions

Comparing version 1.0.0-nightly.4194 to 1.0.0-nightly.4197

package.json

 {
   "name": "tailwindcss-react-aria-components",
-  "version": "1.0.0-nightly.4194+dd2d59863",
+  "version": "1.0.0-nightly.4197+f6ff97da5",
   "description": "A Tailwind plugin that adds variants for data attributes in React Aria Components",
@@ -28,3 +28,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "dd2d59863a219503b5a3836eab319fe96e99fe86"
+  "gitHead": "f6ff97da55f04e89376f762ee026b949fb715256"
 }

src/index.js

@@ -81,3 +81,23 @@ import plugin from 'tailwindcss/plugin';
 
-module.exports = plugin.withOptions((options) => (({addVariant}) => {
+let addVariants = (variantName, selectors, addVariant, matchVariant) => {
+  addVariant(variantName, selectors);
+  matchVariant(
+    'group',
+    (_, {modifier}) =>
+      modifier
+        ? mapSelector(selectors, selector => `:merge(.group\\/${modifier})${selector.slice(1)} &`)
+        : mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`),
+    {values: {[variantName]: variantName}}
+  );
+  matchVariant(
+    'peer',
+    (_, {modifier}) =>
+      modifier
+        ? mapSelector(selectors, selector => `:merge(.peer\\/${modifier})${selector.slice(1)} ~ &`)
+        : mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`),
+    {values: {[variantName]: variantName}}
+  );
+};
+
+module.exports = plugin.withOptions((options) => (({addVariant, matchVariant}) => {
   let prefix = options?.prefix ? `${options.prefix}-` : '';
@@ -89,5 +109,3 @@ attributes.boolean.forEach((attribute) => {
     let selectors = getSelector(prefix, attributeName);
-    addVariant(variantName, selectors);
-    addVariant(`group-${variantName}`, mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`));
-    addVariant(`peer-${variantName}`, mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`));
+    addVariants(variantName, selectors, addVariant, matchVariant);
   });
@@ -100,5 +118,3 @@ Object.keys(attributes.enum).forEach((attributeName) => {
           let selectors = getSelector(prefix, attributeName, attributeValue);
-          addVariant(variantName, selectors);
-          addVariant(`group-${variantName}`, mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`));
-          addVariant(`peer-${variantName}`, mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`));
+          addVariants(variantName, selectors, addVariant, matchVariant);
         }
@@ -105,0 +121,0 @@ );

src/index.test.js

@@ -26,3 +26,3 @@ const path = require('path');
 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 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"></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 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>`;
   return run({content}).then((result) => {
@@ -38,2 +38,6 @@ expect(result.css).toContain(css`
 }
+.group\/custom-name:where([data-rac])[data-hovered] .group-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .group:where([data-rac])[data-hovered] .group-hover\:bg-red {
@@ -43,2 +47,6 @@ --tw-bg-opacity: 1;
 }
+.group\/custom-name:where(:not([data-rac])):hover .group-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .group:where(:not([data-rac])):hover .group-hover\:bg-red {
@@ -80,2 +88,6 @@ --tw-bg-opacity: 1;
 }
+.peer\/custom-name[data-pressed] ~ .peer-pressed\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .peer[data-pressed] ~ .peer-pressed\:bg-red {
@@ -290,3 +302,3 @@ --tw-bg-opacity: 1;
 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-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 peer-rac-pressed: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-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>`;
   return run({content, options: {prefix: 'rac'}}).then((result) => {
@@ -298,2 +310,6 @@ expect(result.css).toContain(css`
 }
+.group\/custom-name[data-hovered] .group-rac-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .rac-focus\:bg-red[data-focused] {
@@ -319,2 +335,6 @@ --tw-bg-opacity: 1;
 }
+.peer\/custom-name[data-pressed] ~ .peer-rac-pressed\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .peer[data-pressed] ~ .peer-rac-pressed\:bg-red {
@@ -321,0 +341,0 @@ --tw-bg-opacity: 1;

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35735

3.76%

Lines of code

630

6.06%

Worsened metrics

Published versions last two months

60

-1.64%

Published versions last year

347

-0.29%

No dependency changes