@@ -11,7 +11,7 @@ const {
11
11
} = require ( '../pluginUtils' )
12
12
13
13
module . exports = {
14
- pseudoClassVariants : function ( { jit : { config, theme, addUtilities , addVariant, e } } ) {
14
+ pseudoClassVariants : function ( { config, theme, addVariant } ) {
15
15
let pseudoVariants = [
16
16
[ 'first' , 'first-child' ] ,
17
17
[ 'last' , 'last-child' ] ,
@@ -33,7 +33,7 @@ module.exports = {
33
33
addVariant (
34
34
variantName ,
35
35
transformAllClasses ( ( className , { withPseudo } ) => {
36
- return withPseudo ( `${ variantName } : ${ className } ` , state )
36
+ return withPseudo ( `${ variantName } ${ config ( 'separator' ) } ${ className } ` , state )
37
37
} )
38
38
)
39
39
}
@@ -46,24 +46,24 @@ module.exports = {
46
46
groupVariantName ,
47
47
transformAllSelectors ( ( selector ) => {
48
48
let variantSelector = updateAllClasses ( selector , ( className ) => {
49
- return `${ groupVariantName } : ${ className } `
49
+ return `${ groupVariantName } ${ config ( 'separator' ) } ${ className } `
50
50
} )
51
51
52
52
if ( variantSelector === selector ) {
53
53
return null
54
54
}
55
55
56
- return `.group: ${ state } ${ variantSelector } `
56
+ return `.group${ config ( 'separator' ) } ${ state } ${ variantSelector } `
57
57
} )
58
58
)
59
59
}
60
60
} ,
61
- reducedMotionVariants : function ( { jit : { config, theme, addUtilities , addVariant, e } } ) {
61
+ reducedMotionVariants : function ( { config, theme, addVariant } ) {
62
62
addVariant (
63
63
'motion-safe' ,
64
64
transformLastClasses (
65
65
( className ) => {
66
- return `motion-safe: ${ className } `
66
+ return `motion-safe${ config ( 'separator' ) } ${ className } `
67
67
} ,
68
68
( ) => postcss . atRule ( { name : 'media' , params : '(prefers-reduced-motion: no-preference)' } )
69
69
)
@@ -73,34 +73,42 @@ module.exports = {
73
73
'motion-reduce' ,
74
74
transformLastClasses (
75
75
( className ) => {
76
- return `motion-reduce: ${ className } `
76
+ return `motion-reduce${ config ( 'separator' ) } ${ className } `
77
77
} ,
78
78
( ) => postcss . atRule ( { name : 'media' , params : '(prefers-reduced-motion: reduce)' } )
79
79
)
80
80
)
81
81
} ,
82
- directionVariants : function ( { jit : { config, theme, addUtilities , addVariant, e } } ) {
82
+ directionVariants : function ( { config, theme, addVariant } ) {
83
83
addVariant (
84
84
'ltr' ,
85
85
transformAllSelectors (
86
- ( selector ) => `[dir="ltr"] ${ updateAllClasses ( selector , ( className ) => `ltr:${ className } ` ) } `
86
+ ( selector ) =>
87
+ `[dir="ltr"] ${ updateAllClasses (
88
+ selector ,
89
+ ( className ) => `ltr${ config ( 'separator' ) } ${ className } `
90
+ ) } `
87
91
)
88
92
)
89
93
90
94
addVariant (
91
95
'rtl' ,
92
96
transformAllSelectors (
93
- ( selector ) => `[dir="rtl"] ${ updateAllClasses ( selector , ( className ) => `rtl:${ className } ` ) } `
97
+ ( selector ) =>
98
+ `[dir="rtl"] ${ updateAllClasses (
99
+ selector ,
100
+ ( className ) => `rtl${ config ( 'separator' ) } ${ className } `
101
+ ) } `
94
102
)
95
103
)
96
104
} ,
97
- darkVariants : function ( { jit : { config, theme, addUtilities , addVariant, e } } ) {
98
- if ( config . darkMode === 'class' ) {
105
+ darkVariants : function ( { config, theme, addVariant } ) {
106
+ if ( config ( ' darkMode' ) === 'class' ) {
99
107
addVariant (
100
108
'dark' ,
101
109
transformAllSelectors ( ( selector ) => {
102
110
let variantSelector = updateLastClasses ( selector , ( className ) => {
103
- return `dark: ${ className } `
111
+ return `dark${ config ( 'separator' ) } ${ className } `
104
112
} )
105
113
106
114
if ( variantSelector === selector ) {
@@ -110,28 +118,28 @@ module.exports = {
110
118
return `.dark ${ variantSelector } `
111
119
} )
112
120
)
113
- } else if ( config . darkMode === 'media' ) {
121
+ } else if ( config ( ' darkMode' ) === 'media' ) {
114
122
addVariant (
115
123
'dark' ,
116
124
transformLastClasses (
117
125
( className ) => {
118
- return `dark: ${ className } `
126
+ return `dark${ config ( 'separator' ) } ${ className } `
119
127
} ,
120
128
( ) => postcss . atRule ( { name : 'media' , params : '(prefers-color-scheme: dark)' } )
121
129
)
122
130
)
123
131
}
124
132
} ,
125
- screenVariants : function ( { jit : { config, theme, addUtilities , addVariant, e } } ) {
126
- for ( let screen in theme . screens ) {
127
- let size = theme . screens [ screen ]
133
+ screenVariants : function ( { config, theme, addVariant } ) {
134
+ for ( let screen in theme ( ' screens' ) ) {
135
+ let size = theme ( ' screens' ) [ screen ]
128
136
let query = buildMediaQuery ( size )
129
137
130
138
addVariant (
131
139
screen ,
132
140
transformLastClasses (
133
141
( className ) => {
134
- return `${ screen } : ${ className } `
142
+ return `${ screen } ${ config ( 'separator' ) } ${ className } `
135
143
} ,
136
144
( ) => postcss . atRule ( { name : 'media' , params : query } )
137
145
)
0 commit comments