Skip to content

Commit f61d08a

Browse files
andrew-boydandrew-boyd
committed
fix: use group-[&]/ syntax for TW4 compatibility
The empty bracket syntax group-[]/ doesn't generate valid CSS in Tailwind v4. Using group-[&]/ with the self-reference selector ensures the styles apply when inside named groups.
1 parent 5caeca9 commit f61d08a

File tree

9 files changed

+31
-31
lines changed

9 files changed

+31
-31
lines changed

‎src/families/box.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export default {
3838
group-data-[disabled]:grayscale
3939
$inputShadow
4040
peer-disabled:cursor-not-allowed
41-
group-[]/repeater:shadow-none
42-
group-[]/multistep:shadow-none
41+
group-[&]/repeater:shadow-none
42+
group-[&]/multistep:shadow-none
4343
4444
${"" /* dark mode styles */}
4545
dark:border-$colorTemperature-$borderShadeDarkMode

‎src/families/button.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default {
2424
border
2525
border-$accentColor-$baseColorShade
2626
text-$accentColor-$baseColorShade
27-
group-[]/repeater:$inputShadow(-1,*)
28-
group-[]/multistep:$inputShadow(-1,*)
27+
group-[&]/repeater:$inputShadow(-1,*)
28+
group-[&]/multistep:$inputShadow(-1,*)
2929
3030
${"" /* dark mode styles */}
3131
dark:border-$accentColor-500

‎src/families/dropdown.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export default {
2222
group-data-[disabled]:bg-$colorTemperature-100
2323
group-data-[disabled]:!cursor-not-allowed
2424
$inputShadow
25-
group-[]/repeater:shadow-none
26-
group-[]/multistep:shadow-none
25+
group-[&]/repeater:shadow-none
26+
group-[&]/multistep:shadow-none
2727
${"" /* dark mode styles */}
2828
dark:bg-transparent
2929
dark:border-$colorTemperature-$borderShadeDarkMode
@@ -183,8 +183,8 @@ export default {
183183
data-[is-active]:before:ring-inset
184184
data-[is-active]:before:ring-offset-$accentColor-100
185185
186-
group-[]/optgroup:first:before:!rounded-none
187-
group-[]/optgroup:last:before:!rounded-none
186+
group-[&]/optgroup:first:before:!rounded-none
187+
group-[&]/optgroup:last:before:!rounded-none
188188
`,
189189
selectedIcon: `
190190
flex

‎src/families/text.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export default {
3333
group-data-[disabled]:bg-$colorTemperature-100
3434
group-data-[disabled]:!cursor-not-allowed
3535
$inputShadow
36-
group-[]/repeater:shadow-none
37-
group-[]/multistep:shadow-none
36+
group-[&]/repeater:shadow-none
37+
group-[&]/multistep:shadow-none
3838
3939
${"" /* dark mode styles */}
4040
dark:bg-transparent

‎src/inputs/form.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ export default {
2323
`,
2424
messages: ``,
2525
message: `
26-
group-[]/summary:text-$scale(-1,*)
26+
group-[&]/summary:text-$scale(-1,*)
2727
`,
2828
messageLink: `
29-
group-[]/summary:outline-hidden
30-
group-[]/summary:focus-visible:ring-2
31-
group-[]/summary:ring-$accentColor-$baseColorShade
29+
group-[&]/summary:outline-hidden
30+
group-[&]/summary:focus-visible:ring-2
31+
group-[&]/summary:ring-$accentColor-$baseColorShade
3232
`,
3333
};

‎src/inputs/pro/togglebuttons.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ export default {
3535
dark:aria-[pressed=true]:text-white
3636
3737
${
38-
"" /**
38+
"" /**
3939
if our button is part of an option group
4040
then by default, turn off all rounding.
4141
We will need to selectively re-enable based
42-
on they layout of the group and a given
42+
on they layout of the group and a given
4343
buttons position within the group.
4444
*/
4545
}
46-
group-[]/option:!rounded-none
46+
group-[&]/option:!rounded-none
4747
4848
${"" /** selectively add back and override rounding for first child */}
4949
group-data-[vertical=false]/options:group-first/option:!$radius
@@ -69,25 +69,25 @@ export default {
6969
then we need to selectively manage borders.
7070
*/
7171
}
72-
group-data-[vertical=false]/options:group-[]/option:!border-r-0
72+
group-data-[vertical=false]/options:group-[&]/option:!border-r-0
7373
group-data-[vertical=false]/options:group-last/option:!border-r
7474
75-
group-data-[vertical=false]/options:group-[]/option:aria-[pressed=true]:border-x-$accentColor-500
75+
group-data-[vertical=false]/options:group-[&]/option:aria-[pressed=true]:border-x-$accentColor-500
7676
group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-$accentColor-$baseColorShade
7777
group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-$accentColor-$baseColorShade
7878
79-
dark:group-data-[vertical=false]/options:group-[]/option:aria-[pressed=true]:border-x-$accentColor-$baseColorShade
79+
dark:group-data-[vertical=false]/options:group-[&]/option:aria-[pressed=true]:border-x-$accentColor-$baseColorShade
8080
dark:group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-$accentColor-$baseColorShade
8181
dark:group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-$accentColor-$baseColorShade
8282
83-
group-data-[vertical=true]/options:group-[]/option:!border-b-0
83+
group-data-[vertical=true]/options:group-[&]/option:!border-b-0
8484
group-data-[vertical=true]/options:group-last/option:!border-b
8585
86-
group-data-[vertical=true]/options:group-[]/option:aria-[pressed=true]:border-y-$accentColor-500
86+
group-data-[vertical=true]/options:group-[&]/option:aria-[pressed=true]:border-y-$accentColor-500
8787
group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-$accentColor-$baseColorShade
8888
group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-$accentColor-$baseColorShade
8989
90-
dark:group-data-[vertical=true]/options:group-[]/option:aria-[pressed=true]:border-y-$accentColor-$baseColorShade
90+
dark:group-data-[vertical=true]/options:group-[&]/option:aria-[pressed=true]:border-y-$accentColor-$baseColorShade
9191
dark:group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-$accentColor-$baseColorShade
9292
dark:group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-$accentColor-$baseColorShade
9393
`,

‎src/inputs/pro/transferlist.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export default {
2020
shrink
2121
min-w-0
2222
$inputShadow
23-
group-[]/repeater:shadow-none
24-
group-[]/multistep:shadow-none
23+
group-[&]/repeater:shadow-none
24+
group-[&]/multistep:shadow-none
2525
aspect-[4/5]
2626
flex
2727
flex-col
@@ -145,8 +145,8 @@ export default {
145145
$radius
146146
overflow-clip
147147
$inputShadow(-2)
148-
group-[]/repeater:shadow-none
149-
group-[]/multistep:shadow-none
148+
group-[&]/repeater:shadow-none
149+
group-[&]/multistep:shadow-none
150150
dark:border-$colorTemperature-$borderShadeDarkMode(3,100,800)
151151
`,
152152
sourceEmptyMessage: `

‎src/inputs/select.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ export default {
1818
group-data-[disabled]:bg-$colorTemperature-100
1919
group-data-[disabled]:!cursor-not-allowed
2020
$inputShadow
21-
group-[]/repeater:shadow-none
22-
group-[]/multistep:shadow-none
21+
group-[&]/repeater:shadow-none
22+
group-[&]/multistep:shadow-none
2323
group-data-[multiple]:$radius(0,rounded-none,rounded-2xl)
2424
2525
${"" /* dark mode styles */}

‎src/inputs/textarea.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default {
1515
group-data-[invalid]:ring-red-$baseColorShade(-1,*)
1616
group-data-[disabled]:bg-$colorTemperature-100
1717
$inputShadow
18-
group-[]/repeater:shadow-none
19-
group-[]/multistep:shadow-none
18+
group-[&]/repeater:shadow-none
19+
group-[&]/multistep:shadow-none
2020
dark:border-$colorTemperature-$borderShadeDarkMode
2121
dark:group-data-[disabled]:bg-$colorTemperature-800/5
2222
dark:group-data-[invalid]:border-red-$baseColorShade(-1,*)

0 commit comments

Comments
 (0)