Skip to content

Commit fa1b469

Browse files
devongovettdevongovett
authored
Fix specificity of tailwind generated selectors (#5147)
1 parent 9368a89 commit fa1b469

File tree

2 files changed

+61
-13
lines changed

2 files changed

+61
-13
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const nativeVariantSelectors = new Map([
6464
let getSelector = (prefix, attributeName, attributeValue) => {
6565
let baseSelector = attributeValue ? `[data-${attributeName}="${attributeValue}"]` : `[data-${attributeName}]`;
6666
if (prefix === '' && nativeVariantSelectors.has(attributeName)) {
67-
return `&:is([data-rac]${baseSelector}, :not([data-rac])${nativeVariantSelectors.get(attributeName)})`;
67+
return [`&:where([data-rac])${baseSelector}`, `&:where(:not([data-rac]))${nativeVariantSelectors.get(attributeName)}`];
6868
} else {
6969
return `&${baseSelector}`;
7070
}

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

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,35 @@ test('variants', async () => {
2626
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"></div>`;
2727
return run({content}).then((result) => {
2828
expect(result.css).toContain(css`
29-
.hover\:bg-red:is([data-rac][data-hovered], :not([data-rac]):hover) {
29+
.hover\:bg-red:where([data-rac])[data-hovered] {
3030
--tw-bg-opacity: 1;
3131
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
3232
}
33-
.focus\:bg-red:is([data-rac][data-focused], :not([data-rac]):focus) {
33+
.hover\:bg-red:where(:not([data-rac])):hover {
3434
--tw-bg-opacity: 1;
3535
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
3636
}
37-
.focus-visible\:bg-red:is([data-rac][data-focus-visible], :not([data-rac]):focus-visible) {
37+
.focus\:bg-red:where([data-rac])[data-focused] {
3838
--tw-bg-opacity: 1;
3939
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
4040
}
41-
.focus-within\:bg-red:is([data-rac][data-focus-within], :not([data-rac]):focus-within) {
41+
.focus\:bg-red:where(:not([data-rac])):focus {
42+
--tw-bg-opacity: 1;
43+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
44+
}
45+
.focus-visible\:bg-red:where([data-rac])[data-focus-visible] {
46+
--tw-bg-opacity: 1;
47+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
48+
}
49+
.focus-visible\:bg-red:where(:not([data-rac])):focus-visible {
50+
--tw-bg-opacity: 1;
51+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
52+
}
53+
.focus-within\:bg-red:where([data-rac])[data-focus-within] {
54+
--tw-bg-opacity: 1;
55+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
56+
}
57+
.focus-within\:bg-red:where(:not([data-rac])):focus-within {
4258
--tw-bg-opacity: 1;
4359
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
4460
}
@@ -54,7 +70,11 @@ test('variants', async () => {
5470
--tw-bg-opacity: 1;
5571
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
5672
}
57-
.disabled\:bg-red:is([data-rac][data-disabled], :not([data-rac]):disabled) {
73+
.disabled\:bg-red:where([data-rac])[data-disabled] {
74+
--tw-bg-opacity: 1;
75+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
76+
}
77+
.disabled\:bg-red:where(:not([data-rac])):disabled {
5878
--tw-bg-opacity: 1;
5979
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
6080
}
@@ -66,7 +86,11 @@ test('variants', async () => {
6686
--tw-bg-opacity: 1;
6787
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
6888
}
69-
.empty\:bg-red:is([data-rac][data-empty], :not([data-rac]):empty) {
89+
.empty\:bg-red:where([data-rac])[data-empty] {
90+
--tw-bg-opacity: 1;
91+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
92+
}
93+
.empty\:bg-red:where(:not([data-rac])):empty {
7094
--tw-bg-opacity: 1;
7195
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
7296
}
@@ -82,23 +106,39 @@ test('variants', async () => {
82106
--tw-bg-opacity: 1;
83107
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
84108
}
85-
.placeholder-shown\:bg-red:is([data-rac][data-placeholder], :not([data-rac]):placeholder-shown) {
109+
.placeholder-shown\:bg-red:where([data-rac])[data-placeholder] {
110+
--tw-bg-opacity: 1;
111+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
112+
}
113+
.placeholder-shown\:bg-red:where(:not([data-rac])):placeholder-shown {
86114
--tw-bg-opacity: 1;
87115
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
88116
}
89117
.selected\:bg-red[data-selected] {
90118
--tw-bg-opacity: 1;
91119
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
92120
}
93-
.indeterminate\:bg-red:is([data-rac][data-indeterminate], :not([data-rac]):indeterminate) {
121+
.indeterminate\:bg-red:where([data-rac])[data-indeterminate] {
122+
--tw-bg-opacity: 1;
123+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
124+
}
125+
.indeterminate\:bg-red:where(:not([data-rac])):indeterminate {
126+
--tw-bg-opacity: 1;
127+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
128+
}
129+
.read-only\:bg-red:where([data-rac])[data-readonly] {
94130
--tw-bg-opacity: 1;
95131
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
96132
}
97-
.read-only\:bg-red:is([data-rac][data-readonly], :not([data-rac]):read-only) {
133+
.read-only\:bg-red:where(:not([data-rac])):read-only {
98134
--tw-bg-opacity: 1;
99135
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
100136
}
101-
.required\:bg-red:is([data-rac][data-required], :not([data-rac]):required) {
137+
.required\:bg-red:where([data-rac])[data-required] {
138+
--tw-bg-opacity: 1;
139+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
140+
}
141+
.required\:bg-red:where(:not([data-rac])):required {
102142
--tw-bg-opacity: 1;
103143
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
104144
}
@@ -110,7 +150,11 @@ test('variants', async () => {
110150
--tw-bg-opacity: 1;
111151
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
112152
}
113-
.open\:bg-red:is([data-rac][data-open], :not([data-rac])[open]) {
153+
.open\:bg-red:where([data-rac])[data-open] {
154+
--tw-bg-opacity: 1;
155+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
156+
}
157+
.open\:bg-red:where(:not([data-rac]))[open] {
114158
--tw-bg-opacity: 1;
115159
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
116160
}
@@ -138,7 +182,11 @@ test('variants', async () => {
138182
--tw-bg-opacity: 1;
139183
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
140184
}
141-
.invalid\:bg-red:is([data-rac][data-invalid], :not([data-rac]):invalid) {
185+
.invalid\:bg-red:where([data-rac])[data-invalid] {
186+
--tw-bg-opacity: 1;
187+
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
188+
}
189+
.invalid\:bg-red:where(:not([data-rac])):invalid {
142190
--tw-bg-opacity: 1;
143191
background-color: rgb(255 0 0 / var(--tw-bg-opacity))
144192
}

0 commit comments

Comments
 (0)