Skip to content

Commit 51e2f86

Browse files
mertasanmertasan
authored
Merge pull request #35 from mertasan/tobase
Add new config option `toBase`
2 parents 805ccb2 + 36aa264 commit 51e2f86

File tree

4 files changed

+364
-10
lines changed

4 files changed

+364
-10
lines changed

‎__tests__/to-base.test.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<html class="dark" lang="">
2+
<div class="text-red-400">tailwindcss-variables</div>
3+
<div class="text-red-500">tailwindcss-variables</div>
4+
</html>

‎__tests__/to-base.test.js

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
const tailwindcssVariables = require('../src/index')
2+
const utils = require('./util/_utils')(__filename)
3+
4+
test('toBase - default', async () => {
5+
expect(
6+
await utils.diffOnly(
7+
{
8+
content: [utils.content()],
9+
darkMode: 'class',
10+
corePlugins: ['textColor'],
11+
theme: {
12+
colors: {
13+
red: {
14+
400: 'var(--colors-red-400)',
15+
500: 'var(--colors-red-500)',
16+
},
17+
},
18+
19+
variables: {
20+
DEFAULT: {
21+
colors: {
22+
red: {
23+
400: '#000000',
24+
500: '#111111',
25+
},
26+
},
27+
},
28+
},
29+
30+
darkVariables: {
31+
DEFAULT: {
32+
colors: {
33+
red: {
34+
400: '#222222',
35+
500: '#333333',
36+
},
37+
},
38+
},
39+
},
40+
},
41+
42+
plugins: [tailwindcssVariables],
43+
},
44+
45+
true
46+
)
47+
).toMatchInlineSnapshot(`
48+
"
49+
50+
51+
+ :root {
52+
+ --colors-red-400: #000000;
53+
+ --colors-red-500: #111111
54+
+ }
55+
+ :root.dark {
56+
+ --colors-red-400: #222222;
57+
+ --colors-red-500: #333333
58+
+ }
59+
+ .text-red-400 {
60+
+ color: var(--colors-red-400)
61+
+ }
62+
+ .text-red-500 {
63+
+ color: var(--colors-red-500)
64+
+ }
65+
66+
"
67+
`)
68+
})
69+
70+
test('toBase', async () => {
71+
expect(
72+
await utils.diffOnly(
73+
{
74+
content: [utils.content()],
75+
darkMode: 'class',
76+
corePlugins: ['textColor'],
77+
theme: {
78+
colors: {
79+
red: {
80+
400: 'var(--colors-red-400)',
81+
500: 'var(--colors-red-500)',
82+
},
83+
},
84+
85+
variables: {
86+
DEFAULT: {
87+
colors: {
88+
red: {
89+
400: '#000000',
90+
500: '#111111',
91+
},
92+
},
93+
},
94+
},
95+
96+
darkVariables: {
97+
DEFAULT: {
98+
colors: {
99+
red: {
100+
400: '#222222',
101+
500: '#333333',
102+
},
103+
},
104+
},
105+
},
106+
},
107+
108+
plugins: [
109+
tailwindcssVariables({
110+
toBase: true,
111+
}),
112+
],
113+
},
114+
115+
true
116+
)
117+
).toMatchInlineSnapshot(`
118+
"
119+
120+
121+
+ :root {
122+
+ --colors-red-400: #000000;
123+
+ --colors-red-500: #111111
124+
+ }
125+
+ :root.dark {
126+
+ --colors-red-400: #222222;
127+
+ --colors-red-500: #333333
128+
+ }
129+
+ .text-red-400 {
130+
+ color: var(--colors-red-400)
131+
+ }
132+
+ .text-red-500 {
133+
+ color: var(--colors-red-500)
134+
+ }
135+
136+
"
137+
`)
138+
})
139+
140+
test('if "base" styles are not added then variables should not be added', async () => {
141+
expect(
142+
await utils.diffOnly(
143+
{
144+
content: [utils.content()],
145+
darkMode: 'class',
146+
corePlugins: ['textColor'],
147+
theme: {
148+
colors: {
149+
red: {
150+
400: 'var(--colors-red-400)',
151+
500: 'var(--colors-red-500)',
152+
},
153+
},
154+
155+
variables: {
156+
DEFAULT: {
157+
colors: {
158+
red: {
159+
400: '#000000',
160+
500: '#111111',
161+
},
162+
},
163+
},
164+
},
165+
166+
darkVariables: {
167+
DEFAULT: {
168+
colors: {
169+
red: {
170+
400: '#222222',
171+
500: '#333333',
172+
},
173+
},
174+
},
175+
},
176+
},
177+
178+
plugins: [
179+
tailwindcssVariables({
180+
toBase: true,
181+
}),
182+
],
183+
},
184+
185+
false
186+
)
187+
).toMatchInlineSnapshot(`
188+
"
189+
190+
191+
+ .text-red-400 {
192+
+ color: var(--colors-red-400)
193+
+ }
194+
+ .text-red-500 {
195+
+ color: var(--colors-red-500)
196+
+ }
197+
198+
"
199+
`)
200+
})
201+
202+
test('if "base" styles are not added then variables should be added.', async () => {
203+
expect(
204+
await utils.diffOnly(
205+
{
206+
content: [utils.content()],
207+
darkMode: 'class',
208+
corePlugins: ['textColor'],
209+
theme: {
210+
colors: {
211+
red: {
212+
400: 'var(--colors-red-400)',
213+
500: 'var(--colors-red-500)',
214+
},
215+
},
216+
217+
variables: {
218+
DEFAULT: {
219+
colors: {
220+
red: {
221+
400: '#000000',
222+
500: '#111111',
223+
},
224+
},
225+
},
226+
},
227+
228+
darkVariables: {
229+
DEFAULT: {
230+
colors: {
231+
red: {
232+
400: '#222222',
233+
500: '#333333',
234+
},
235+
},
236+
},
237+
},
238+
},
239+
240+
plugins: [
241+
tailwindcssVariables({
242+
toBase: false,
243+
}),
244+
],
245+
},
246+
247+
false
248+
)
249+
).toMatchInlineSnapshot(`
250+
"
251+
252+
253+
+ :root {
254+
+ --colors-red-400: #000000;
255+
+ --colors-red-500: #111111
256+
+ }
257+
+ :root.dark {
258+
+ --colors-red-400: #222222;
259+
+ --colors-red-500: #333333
260+
+ }
261+
+ .text-red-400 {
262+
+ color: var(--colors-red-400)
263+
+ }
264+
+ .text-red-500 {
265+
+ color: var(--colors-red-500)
266+
+ }
267+
268+
"
269+
`)
270+
})
271+
272+
test('toComponents', async () => {
273+
expect(
274+
await utils.diffOnly(
275+
{
276+
content: [utils.content()],
277+
corePlugins: ['textColor'],
278+
darkMode: 'class',
279+
theme: {
280+
colors: {
281+
red: {
282+
400: 'var(--colors-red-400)',
283+
500: 'var(--colors-red-500)',
284+
},
285+
},
286+
287+
variables: {
288+
DEFAULT: {
289+
colors: {
290+
red: {
291+
400: '#000000',
292+
500: '#111111',
293+
},
294+
},
295+
},
296+
},
297+
298+
darkVariables: {
299+
DEFAULT: {
300+
colors: {
301+
red: {
302+
400: '#222222',
303+
500: '#333333',
304+
},
305+
},
306+
},
307+
},
308+
},
309+
310+
plugins: [
311+
tailwindcssVariables({
312+
toBase: false,
313+
}),
314+
],
315+
},
316+
317+
false
318+
)
319+
).toMatchInlineSnapshot(`
320+
"
321+
322+
323+
+ :root {
324+
+ --colors-red-400: #000000;
325+
+ --colors-red-500: #111111
326+
+ }
327+
+ :root.dark {
328+
+ --colors-red-400: #222222;
329+
+ --colors-red-500: #333333
330+
+ }
331+
+ .text-red-400 {
332+
+ color: var(--colors-red-400)
333+
+ }
334+
+ .text-red-500 {
335+
+ color: var(--colors-red-500)
336+
+ }
337+
338+
"
339+
`)
340+
})

‎__tests__/util/_utils.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,30 @@ const snapshotDiff = require('snapshot-diff')
33
const postcss = require('postcss')
44
const path = require('path')
55
const fs = require('fs')
6-
const atImport = require("postcss-import")
6+
const atImport = require('postcss-import')
77

88
module.exports = (contentFile) => {
99
let utils = {}
1010

11-
utils.run = function(config = {}) {
11+
utils.run = function(config = {}, toBase = true) {
1212
let { currentTestName } = expect.getState()
1313
let filename = currentTestName + '.test.css'
1414
if (fs.existsSync(path.resolve(__dirname, '../' + filename))) {
1515
return this.runFromFile(filename, config)
1616
}
1717

18-
return this.runInline(config)
18+
return this.runInline(config, toBase)
1919
}
2020

21-
utils.runInline = (config) => {
21+
utils.runInline = (config, toBase) => {
22+
let styles
23+
if (toBase) {
24+
styles = ['@tailwind base;', '@tailwind components;', '@tailwind utilities;']
25+
} else {
26+
styles = ['@tailwind components;', '@tailwind utilities;']
27+
}
2228
return postcss([tailwind({ corePlugins: [], ...config })])
23-
.process(['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\n'), {
29+
.process(styles.join('\n'), {
2430
from: undefined,
2531
})
2632
.then((result) => result.css)
@@ -37,8 +43,8 @@ module.exports = (contentFile) => {
3743
.then((result) => result.css)
3844
}
3945

40-
utils.diffOnly = async function(options = {}) {
41-
const [before, after] = await Promise.all([utils.run(), utils.run(options)])
46+
utils.diffOnly = async function(options = {}, toBase = true) {
47+
const [before, after] = await Promise.all([utils.run({}, toBase), utils.run(options, toBase)])
4248

4349
return `\n\n${snapshotDiff(before, after, {
4450
aAnnotation: '__REMOVE_ME__',

0 commit comments

Comments
 (0)