@@ -335,7 +335,9 @@ test('modifiers', async () => {
335
335
test ( 'legacy target' , async ( ) => {
336
336
let config = {
337
337
plugins : [ typographyPlugin ( { target : 'legacy' } ) ] ,
338
- content : [ { raw : html `<div class= "prose prose-h1:text-center prose-headings:text-ellipsis" > </ div> ` } ] ,
338
+ content : [
339
+ { raw : html `<div class= "prose prose-h1:text-center prose-headings:text-ellipsis" > </ div> ` } ,
340
+ ] ,
339
341
theme : {
340
342
typography : {
341
343
DEFAULT : {
@@ -712,7 +714,7 @@ test('element variants', async () => {
712
714
.prose-hr\:border-t-2 : is (: where (hr): not (: where ([class ~= 'not-prose' ] * ))) {
713
715
border-top-width : 2px ;
714
716
}
715
- .prose-lead\:italic : is (: where ([class ~= " lead" ]): not (: where ([class ~= " not-prose" ] * ))) {
717
+ .prose-lead\:italic : is (: where ([class ~= ' lead' ]): not (: where ([class ~= ' not-prose' ] * ))) {
716
718
font-style : italic;
717
719
}
718
720
`
@@ -886,7 +888,7 @@ test('element variants with custom class name', async () => {
886
888
.markdown-hr\:border-t-2 : is (: where (hr): not (: where ([class ~= 'not-markdown' ] * ))) {
887
889
border-top-width : 2px ;
888
890
}
889
- .markdown-lead\:italic : is (: where ([class ~= " lead" ]): not (: where ([class ~= " not-markdown" ] * ))) {
891
+ .markdown-lead\:italic : is (: where ([class ~= ' lead' ]): not (: where ([class ~= ' not-markdown' ] * ))) {
890
892
font-style : italic;
891
893
}
892
894
`
@@ -1000,3 +1002,198 @@ it('should be possible to specify custom h5 and h6 styles', () => {
1000
1002
` )
1001
1003
} )
1002
1004
} )
1005
+
1006
+ it ( 'should not break with multiple selectors with pseudo elements using variants' , ( ) => {
1007
+ let config = {
1008
+ darkMode : 'class' ,
1009
+ plugins : [ typographyPlugin ( ) ] ,
1010
+ content : [
1011
+ {
1012
+ raw : html `<div class= "dark:prose" > </ div> ` ,
1013
+ } ,
1014
+ ] ,
1015
+ theme : {
1016
+ typography : {
1017
+ DEFAULT : {
1018
+ css : {
1019
+ 'ol li::before, ul li::before' : {
1020
+ color : 'red' ,
1021
+ } ,
1022
+ } ,
1023
+ } ,
1024
+ } ,
1025
+ } ,
1026
+ }
1027
+
1028
+ return run ( config ) . then ( ( result ) => {
1029
+ expect ( result . css ) . toIncludeCss ( css `
1030
+ .dark .dark\:prose : where (ol li, ul li ): not (: where ([class ~= 'not-prose' ] * ))::before {
1031
+ color : red;
1032
+ }
1033
+ ` )
1034
+ } )
1035
+ } )
1036
+
1037
+ it ( 'lifts all common, trailing pseudo elements when the same across all selectors' , ( ) => {
1038
+ let config = {
1039
+ darkMode : 'class' ,
1040
+ plugins : [ typographyPlugin ( ) ] ,
1041
+ content : [
1042
+ {
1043
+ raw : html `<div class= "prose dark:prose" > </ div> ` ,
1044
+ } ,
1045
+ ] ,
1046
+ theme : {
1047
+ typography : {
1048
+ DEFAULT : {
1049
+ css : {
1050
+ 'ol li::marker::before, ul li::marker::before' : {
1051
+ color : 'red' ,
1052
+ } ,
1053
+ } ,
1054
+ } ,
1055
+ } ,
1056
+ } ,
1057
+ }
1058
+
1059
+ return run ( config ) . then ( ( result ) => {
1060
+ expect ( result . css ) . toIncludeCss ( css `
1061
+ .prose : where (ol li, ul li ): not (: where ([class ~= 'not-prose' ] * ))::marker ::before {
1062
+ color : red;
1063
+ }
1064
+ ` )
1065
+
1066
+ // TODO: The output here is a bug in tailwindcss variant selector rewriting
1067
+ // IT should be ::marker::before
1068
+ expect ( result . css ) . toIncludeCss ( css `
1069
+ .dark .dark\:prose : where (ol li, ul li ): not (: where ([class ~= 'not-prose' ] * ))::before ::marker {
1070
+ color : red;
1071
+ }
1072
+ ` )
1073
+ } )
1074
+ } )
1075
+
1076
+ it ( 'does not modify selectors with differing pseudo elements' , ( ) => {
1077
+ let config = {
1078
+ darkMode : 'class' ,
1079
+ plugins : [ typographyPlugin ( ) ] ,
1080
+ content : [
1081
+ {
1082
+ raw : html `<div class= "prose dark:prose" > </ div> ` ,
1083
+ } ,
1084
+ ] ,
1085
+ theme : {
1086
+ typography : {
1087
+ DEFAULT : {
1088
+ css : {
1089
+ 'ol li::before, ul li::after' : {
1090
+ color : 'red' ,
1091
+ } ,
1092
+ } ,
1093
+ } ,
1094
+ } ,
1095
+ } ,
1096
+ }
1097
+
1098
+ return run ( config ) . then ( ( result ) => {
1099
+ expect ( result . css ) . toIncludeCss ( css `
1100
+ .prose : where (ol li::before , ul li ::after ): not (: where ([class ~= 'not-prose' ] * )) {
1101
+ color : red;
1102
+ }
1103
+ ` )
1104
+
1105
+ // TODO: The output here is a bug in tailwindcss variant selector rewriting
1106
+ expect ( result . css ) . toIncludeCss ( css `
1107
+ .dark .dark\:prose : where (ol li, ul li ): not (: where ([class ~= 'not-prose' ] * ))::before ,
1108
+ ::after {
1109
+ color : red;
1110
+ }
1111
+ ` )
1112
+ } )
1113
+ } )
1114
+
1115
+ it ( 'lifts only the common, trailing pseudo elements from selectors' , ( ) => {
1116
+ let config = {
1117
+ darkMode : 'class' ,
1118
+ plugins : [ typographyPlugin ( ) ] ,
1119
+ content : [
1120
+ {
1121
+ raw : html `<div class= "prose dark:prose" > </ div> ` ,
1122
+ } ,
1123
+ ] ,
1124
+ theme : {
1125
+ typography : {
1126
+ DEFAULT : {
1127
+ css : {
1128
+ 'ol li::scroll-thumb::before, ul li::scroll-track::before' : {
1129
+ color : 'red' ,
1130
+ } ,
1131
+ } ,
1132
+ } ,
1133
+ } ,
1134
+ } ,
1135
+ }
1136
+
1137
+ return run ( config ) . then ( ( result ) => {
1138
+ expect ( result . css ) . toIncludeCss ( css `
1139
+ .prose
1140
+ : where (ol li::scroll-thumb , ul li ::scroll-track ): not (: where ([class ~= 'not-prose' ]
1141
+ * ))::before {
1142
+ color : red;
1143
+ }
1144
+ ` )
1145
+
1146
+ // TODO: The output here is a bug in tailwindcss variant selector rewriting
1147
+ expect ( result . css ) . toIncludeCss ( css `
1148
+ .dark .dark\:prose : where (ol li, ul li ): not (: where ([class ~= 'not-prose' ] * ))::scroll-thumb ,
1149
+ ::scroll-track ,
1150
+ ::before {
1151
+ color : red;
1152
+ }
1153
+ ` )
1154
+ } )
1155
+ } )
1156
+
1157
+ it ( 'ignores common non-trailing pseudo-elements in selectors' , ( ) => {
1158
+ let config = {
1159
+ darkMode : 'class' ,
1160
+ plugins : [ typographyPlugin ( ) ] ,
1161
+ content : [
1162
+ {
1163
+ raw : html `<div class= "prose dark:prose" > </ div> ` ,
1164
+ } ,
1165
+ ] ,
1166
+ theme : {
1167
+ typography : {
1168
+ DEFAULT : {
1169
+ css : {
1170
+ 'ol li::before::scroll-thumb, ul li::before::scroll-track' : {
1171
+ color : 'red' ,
1172
+ } ,
1173
+ } ,
1174
+ } ,
1175
+ } ,
1176
+ } ,
1177
+ }
1178
+
1179
+ return run ( config ) . then ( ( result ) => {
1180
+ expect ( result . css ) . toIncludeCss ( css `
1181
+ .prose
1182
+ : where (ol li::before ::scroll-thumb , ul
1183
+ li ::before ::scroll-track ): not (: where ([class ~= 'not-prose' ] * )) {
1184
+ color : red;
1185
+ }
1186
+ ` )
1187
+
1188
+ // TODO: The output here is a bug in tailwindcss variant selector rewriting
1189
+ expect ( result . css ) . toIncludeCss ( css `
1190
+ .dark
1191
+ .dark\:prose
1192
+ : where (ol li::scroll-thumb , ul li ::scroll-track ): not (: where ([class ~= 'not-prose' ]
1193
+ * ))::before ,
1194
+ ::before {
1195
+ color : red;
1196
+ }
1197
+ ` )
1198
+ } )
1199
+ } )
0 commit comments