Skip to content

Commit 62a47f9

Browse files
adamwathanadamwathan
committed
Properly support colors as closures with ring utilities
1 parent b3ed724 commit 62a47f9

File tree

8 files changed

+143
-163
lines changed

8 files changed

+143
-163
lines changed

‎__tests__/fixtures/tailwind-output-flagged.css‎

Lines changed: 18 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20972,8 +20972,7 @@ video {
2097220972
}
2097320973

2097420974
.ring-transparent {
20975-
--ring-opacity: 0;
20976-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
20975+
--ring-color: transparent;
2097720976
}
2097820977

2097920978
.ring-current {
@@ -21391,8 +21390,7 @@ video {
2139121390
}
2139221391

2139321392
.focus-within\:ring-transparent:focus-within {
21394-
--ring-opacity: 0;
21395-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
21393+
--ring-color: transparent;
2139621394
}
2139721395

2139821396
.focus-within\:ring-current:focus-within {
@@ -21810,8 +21808,7 @@ video {
2181021808
}
2181121809

2181221810
.focus\:ring-transparent:focus {
21813-
--ring-opacity: 0;
21814-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
21811+
--ring-color: transparent;
2181521812
}
2181621813

2181721814
.focus\:ring-current:focus {
@@ -49785,8 +49782,7 @@ video {
4978549782
}
4978649783

4978749784
.sm\:ring-transparent {
49788-
--ring-opacity: 0;
49789-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
49785+
--ring-color: transparent;
4979049786
}
4979149787

4979249788
.sm\:ring-current {
@@ -50204,8 +50200,7 @@ video {
5020450200
}
5020550201

5020650202
.sm\:focus-within\:ring-transparent:focus-within {
50207-
--ring-opacity: 0;
50208-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
50203+
--ring-color: transparent;
5020950204
}
5021050205

5021150206
.sm\:focus-within\:ring-current:focus-within {
@@ -50623,8 +50618,7 @@ video {
5062350618
}
5062450619

5062550620
.sm\:focus\:ring-transparent:focus {
50626-
--ring-opacity: 0;
50627-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
50621+
--ring-color: transparent;
5062850622
}
5062950623

5063050624
.sm\:focus\:ring-current:focus {
@@ -78568,8 +78562,7 @@ video {
7856878562
}
7856978563

7857078564
.md\:ring-transparent {
78571-
--ring-opacity: 0;
78572-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
78565+
--ring-color: transparent;
7857378566
}
7857478567

7857578568
.md\:ring-current {
@@ -78987,8 +78980,7 @@ video {
7898778980
}
7898878981

7898978982
.md\:focus-within\:ring-transparent:focus-within {
78990-
--ring-opacity: 0;
78991-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
78983+
--ring-color: transparent;
7899278984
}
7899378985

7899478986
.md\:focus-within\:ring-current:focus-within {
@@ -79406,8 +79398,7 @@ video {
7940679398
}
7940779399

7940879400
.md\:focus\:ring-transparent:focus {
79409-
--ring-opacity: 0;
79410-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
79401+
--ring-color: transparent;
7941179402
}
7941279403

7941379404
.md\:focus\:ring-current:focus {
@@ -107351,8 +107342,7 @@ video {
107351107342
}
107352107343

107353107344
.lg\:ring-transparent {
107354-
--ring-opacity: 0;
107355-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
107345+
--ring-color: transparent;
107356107346
}
107357107347

107358107348
.lg\:ring-current {
@@ -107770,8 +107760,7 @@ video {
107770107760
}
107771107761

107772107762
.lg\:focus-within\:ring-transparent:focus-within {
107773-
--ring-opacity: 0;
107774-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
107763+
--ring-color: transparent;
107775107764
}
107776107765

107777107766
.lg\:focus-within\:ring-current:focus-within {
@@ -108189,8 +108178,7 @@ video {
108189108178
}
108190108179

108191108180
.lg\:focus\:ring-transparent:focus {
108192-
--ring-opacity: 0;
108193-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
108181+
--ring-color: transparent;
108194108182
}
108195108183

108196108184
.lg\:focus\:ring-current:focus {
@@ -136134,8 +136122,7 @@ video {
136134136122
}
136135136123

136136136124
.xl\:ring-transparent {
136137-
--ring-opacity: 0;
136138-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
136125+
--ring-color: transparent;
136139136126
}
136140136127

136141136128
.xl\:ring-current {
@@ -136553,8 +136540,7 @@ video {
136553136540
}
136554136541

136555136542
.xl\:focus-within\:ring-transparent:focus-within {
136556-
--ring-opacity: 0;
136557-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
136543+
--ring-color: transparent;
136558136544
}
136559136545

136560136546
.xl\:focus-within\:ring-current:focus-within {
@@ -136972,8 +136958,7 @@ video {
136972136958
}
136973136959

136974136960
.xl\:focus\:ring-transparent:focus {
136975-
--ring-opacity: 0;
136976-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
136961+
--ring-color: transparent;
136977136962
}
136978136963

136979136964
.xl\:focus\:ring-current:focus {
@@ -164917,8 +164902,7 @@ video {
164917164902
}
164918164903

164919164904
.\32xl\:ring-transparent {
164920-
--ring-opacity: 0;
164921-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
164905+
--ring-color: transparent;
164922164906
}
164923164907

164924164908
.\32xl\:ring-current {
@@ -165336,8 +165320,7 @@ video {
165336165320
}
165337165321

165338165322
.\32xl\:focus-within\:ring-transparent:focus-within {
165339-
--ring-opacity: 0;
165340-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
165323+
--ring-color: transparent;
165341165324
}
165342165325

165343165326
.\32xl\:focus-within\:ring-current:focus-within {
@@ -165755,8 +165738,7 @@ video {
165755165738
}
165756165739

165757165740
.\32xl\:focus\:ring-transparent:focus {
165758-
--ring-opacity: 0;
165759-
--ring-color: rgba(0, 0, 0, var(--ring-opacity));
165741+
--ring-color: transparent;
165760165742
}
165761165743

165762165744
.\32xl\:focus\:ring-current:focus {

‎__tests__/fixtures/tailwind-output-important.css‎

Lines changed: 18 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20972,8 +20972,7 @@ video {
2097220972
}
2097320973

2097420974
.ring-transparent {
20975-
--ring-opacity: 0 !important;
20976-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
20975+
--ring-color: transparent !important;
2097720976
}
2097820977

2097920978
.ring-current {
@@ -21391,8 +21390,7 @@ video {
2139121390
}
2139221391

2139321392
.focus-within\:ring-transparent:focus-within {
21394-
--ring-opacity: 0 !important;
21395-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
21393+
--ring-color: transparent !important;
2139621394
}
2139721395

2139821396
.focus-within\:ring-current:focus-within {
@@ -21810,8 +21808,7 @@ video {
2181021808
}
2181121809

2181221810
.focus\:ring-transparent:focus {
21813-
--ring-opacity: 0 !important;
21814-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
21811+
--ring-color: transparent !important;
2181521812
}
2181621813

2181721814
.focus\:ring-current:focus {
@@ -49785,8 +49782,7 @@ video {
4978549782
}
4978649783

4978749784
.sm\:ring-transparent {
49788-
--ring-opacity: 0 !important;
49789-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
49785+
--ring-color: transparent !important;
4979049786
}
4979149787

4979249788
.sm\:ring-current {
@@ -50204,8 +50200,7 @@ video {
5020450200
}
5020550201

5020650202
.sm\:focus-within\:ring-transparent:focus-within {
50207-
--ring-opacity: 0 !important;
50208-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
50203+
--ring-color: transparent !important;
5020950204
}
5021050205

5021150206
.sm\:focus-within\:ring-current:focus-within {
@@ -50623,8 +50618,7 @@ video {
5062350618
}
5062450619

5062550620
.sm\:focus\:ring-transparent:focus {
50626-
--ring-opacity: 0 !important;
50627-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
50621+
--ring-color: transparent !important;
5062850622
}
5062950623

5063050624
.sm\:focus\:ring-current:focus {
@@ -78568,8 +78562,7 @@ video {
7856878562
}
7856978563

7857078564
.md\:ring-transparent {
78571-
--ring-opacity: 0 !important;
78572-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
78565+
--ring-color: transparent !important;
7857378566
}
7857478567

7857578568
.md\:ring-current {
@@ -78987,8 +78980,7 @@ video {
7898778980
}
7898878981

7898978982
.md\:focus-within\:ring-transparent:focus-within {
78990-
--ring-opacity: 0 !important;
78991-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
78983+
--ring-color: transparent !important;
7899278984
}
7899378985

7899478986
.md\:focus-within\:ring-current:focus-within {
@@ -79406,8 +79398,7 @@ video {
7940679398
}
7940779399

7940879400
.md\:focus\:ring-transparent:focus {
79409-
--ring-opacity: 0 !important;
79410-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
79401+
--ring-color: transparent !important;
7941179402
}
7941279403

7941379404
.md\:focus\:ring-current:focus {
@@ -107351,8 +107342,7 @@ video {
107351107342
}
107352107343

107353107344
.lg\:ring-transparent {
107354-
--ring-opacity: 0 !important;
107355-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
107345+
--ring-color: transparent !important;
107356107346
}
107357107347

107358107348
.lg\:ring-current {
@@ -107770,8 +107760,7 @@ video {
107770107760
}
107771107761

107772107762
.lg\:focus-within\:ring-transparent:focus-within {
107773-
--ring-opacity: 0 !important;
107774-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
107763+
--ring-color: transparent !important;
107775107764
}
107776107765

107777107766
.lg\:focus-within\:ring-current:focus-within {
@@ -108189,8 +108178,7 @@ video {
108189108178
}
108190108179

108191108180
.lg\:focus\:ring-transparent:focus {
108192-
--ring-opacity: 0 !important;
108193-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
108181+
--ring-color: transparent !important;
108194108182
}
108195108183

108196108184
.lg\:focus\:ring-current:focus {
@@ -136134,8 +136122,7 @@ video {
136134136122
}
136135136123

136136136124
.xl\:ring-transparent {
136137-
--ring-opacity: 0 !important;
136138-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
136125+
--ring-color: transparent !important;
136139136126
}
136140136127

136141136128
.xl\:ring-current {
@@ -136553,8 +136540,7 @@ video {
136553136540
}
136554136541

136555136542
.xl\:focus-within\:ring-transparent:focus-within {
136556-
--ring-opacity: 0 !important;
136557-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
136543+
--ring-color: transparent !important;
136558136544
}
136559136545

136560136546
.xl\:focus-within\:ring-current:focus-within {
@@ -136972,8 +136958,7 @@ video {
136972136958
}
136973136959

136974136960
.xl\:focus\:ring-transparent:focus {
136975-
--ring-opacity: 0 !important;
136976-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
136961+
--ring-color: transparent !important;
136977136962
}
136978136963

136979136964
.xl\:focus\:ring-current:focus {
@@ -164917,8 +164902,7 @@ video {
164917164902
}
164918164903

164919164904
.\32xl\:ring-transparent {
164920-
--ring-opacity: 0 !important;
164921-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
164905+
--ring-color: transparent !important;
164922164906
}
164923164907

164924164908
.\32xl\:ring-current {
@@ -165336,8 +165320,7 @@ video {
165336165320
}
165337165321

165338165322
.\32xl\:focus-within\:ring-transparent:focus-within {
165339-
--ring-opacity: 0 !important;
165340-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
165323+
--ring-color: transparent !important;
165341165324
}
165342165325

165343165326
.\32xl\:focus-within\:ring-current:focus-within {
@@ -165755,8 +165738,7 @@ video {
165755165738
}
165756165739

165757165740
.\32xl\:focus\:ring-transparent:focus {
165758-
--ring-opacity: 0 !important;
165759-
--ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
165741+
--ring-color: transparent !important;
165760165742
}
165761165743

165762165744
.\32xl\:focus\:ring-current:focus {

0 commit comments

Comments
 (0)