[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-plugin-utils. A bunch of utilities to help you create and maintain plugins for Tailwind.
www.npmjs.com/package/@hacknug/tailwindcss-plugin-utils
Fix not merging `variants` correctly
Nestor Vera
(Jul 24, 2019, 2:17 PM +0200)
dfda63b6
c24d34d5
+45
-4
+9
-1
src/index.js
+9
-1
src/index.js
···
94
94
*/
95
95
96
96
export const generatePluginCss = (tailwindConfig = {}, testConfig = {}, pluginOptions = {}) => {
97
+
const customizer = (objValue, srcValue, key) => {
98
+
if (key === 'variants' && _.isArray(objValue) && _.isEmpty(objValue)) {
99
+
return srcValue
100
+
}
101
+
}
102
+
97
103
const sandboxConfig = {
98
104
theme: { screens: { sm: '640px' } },
99
105
corePlugins: false,
100
106
variants: [],
101
107
}
108
+
109
+
const configs = [tailwindConfig, sandboxConfig, testConfig]
102
110
const postcssPlugins = [
103
-
tailwindcss(_.merge({}, tailwindConfig, sandboxConfig, testConfig)),
111
+
tailwindcss(_.mergeWith({}, ...configs, customizer)),
104
112
]
105
113
106
114
return postcss(postcssPlugins)
+36
-3
src/index.test.js
+36
-3
src/index.test.js
···
99
99
return generatePluginCss(tailwindConfig, testConfig, pluginOptions)
100
100
.then(css => expect(css).toMatchCss(expectedCss))
101
101
})
102
-
103
102
test('responsive variants', () => {
104
103
const testConfig = { variants: ['responsive'] }
105
104
const pluginOptions = {}
···
129
128
return generatePluginCss(tailwindConfig, testConfig, pluginOptions)
130
129
.then(css => expect(css).toMatchCss(expectedCss))
131
130
})
132
-
133
-
test('merges configs correctly', () => {
131
+
test('handles merging configs correctly', () => {
134
132
const testConfig = {
135
133
theme: { screens: { md: '768px' } },
136
134
variants: ['responsive'],
···
167
165
168
166
.md\\:col-span-none { column-span: none }
169
167
.md\\:col-span-all { column-span: all }
168
+
}
169
+
`
170
+
171
+
return generatePluginCss(tailwindConfig, testConfig, pluginOptions)
172
+
.then(css => expect(css).toMatchCss(expectedCss))
173
+
})
174
+
test('handles merging mixed `variants`', () => {
175
+
const testConfig = {
176
+
variants: {
177
+
columnCount: ['focus'],
178
+
columnGap: ['hover'],
179
+
columnSpan: ['responsive'],
180
+
},
181
+
}
182
+
const pluginOptions = {}
183
+
184
+
const expectedCss = `
185
+
.col-count-2 { column-count: 2 }
186
+
.col-count-4 { column-count: 4 }
187
+
188
+
.focus\\:col-count-2:focus { column-count: 2 }
189
+
.focus\\:col-count-4:focus { column-count: 4 }
190
+
191
+
.col-gap-4 { column-gap: 1rem }
192
+
.col-gap-8 { column-gap: 2rem }
193
+
194
+
.hover\\:col-gap-4:hover { column-gap: 1rem }
195
+
.hover\\:col-gap-8:hover { column-gap: 2rem }
196
+
197
+
.col-span-none { column-span: none }
198
+
.col-span-all { column-span: all }
199
+
200
+
@media (min-width: 640px) {
201
+
.sm\\:col-span-none { column-span: none }
202
+
.sm\\:col-span-all { column-span: all }
170
203
}
171
204
`
172
205