Skip to content

Commit 5ea752e

Browse files
thecrypticaceRobinMalfait
thecrypticace
and
RobinMalfait
authored
Add @config support (#9405)
* Refactor CLI * Add `@config` support * Update changelog Co-authored-by: Robin Malfait <[email protected]>
1 parent bf44941 commit 5ea752e

File tree

14 files changed

+1095
-807
lines changed

14 files changed

+1095
-807
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1717
- Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
1818
- Add new `collapse` utility for `visibility: collapse` ([#9181](https://github.com/tailwindlabs/tailwindcss/pull/9181))
1919
- Allow resolving content paths relative to the config file ([#9396](https://github.com/tailwindlabs/tailwindcss/pull/9396))
20+
- Add `@config` support ([#9405](https://github.com/tailwindlabs/tailwindcss/pull/9405))
2021

2122
### Fixed
2223

‎integrations/tailwindcss-cli/tests/integration.test.js

+224
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
let fs = require('fs')
12
let $ = require('../../execute')
23
let { css, html, javascript } = require('../../syntax')
34

@@ -88,6 +89,108 @@ describe('static build', () => {
8889
`
8990
)
9091
})
92+
93+
it('can read from a config file from an @config directive', async () => {
94+
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
95+
await writeInputFile(
96+
'index.css',
97+
css`
98+
@config "./tailwind.config.js";
99+
@tailwind base;
100+
@tailwind components;
101+
@tailwind utilities;
102+
`
103+
)
104+
await writeInputFile(
105+
'tailwind.config.js',
106+
javascript`
107+
module.exports = {
108+
content: {
109+
relative: true,
110+
files: ['./index.html'],
111+
},
112+
theme: {
113+
extend: {
114+
colors: {
115+
yellow: '#ff0',
116+
}
117+
},
118+
},
119+
corePlugins: {
120+
preflight: false,
121+
},
122+
}
123+
`
124+
)
125+
126+
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
127+
env: { NODE_ENV: 'production' },
128+
})
129+
130+
expect(await readOutputFile('main.css')).toIncludeCss(
131+
css`
132+
.bg-yellow {
133+
--tw-bg-opacity: 1;
134+
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
135+
}
136+
`
137+
)
138+
})
139+
140+
it('can read from a config file from an @config directive inside an @import from postcss-import', async () => {
141+
await fs.promises.mkdir('./src/config', { recursive: true })
142+
143+
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
144+
await writeInputFile(
145+
'config/myconfig.css',
146+
css`
147+
@config "../tailwind.config.js";
148+
`
149+
)
150+
await writeInputFile(
151+
'index.css',
152+
css`
153+
@import './config/myconfig';
154+
@import 'tailwindcss/base';
155+
@import 'tailwindcss/components';
156+
@import 'tailwindcss/utilities';
157+
`
158+
)
159+
await writeInputFile(
160+
'tailwind.config.js',
161+
javascript`
162+
module.exports = {
163+
content: {
164+
relative: true,
165+
files: ['./index.html'],
166+
},
167+
theme: {
168+
extend: {
169+
colors: {
170+
yellow: '#ff0',
171+
}
172+
},
173+
},
174+
corePlugins: {
175+
preflight: false,
176+
},
177+
}
178+
`
179+
)
180+
181+
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
182+
env: { NODE_ENV: 'production' },
183+
})
184+
185+
expect(await readOutputFile('main.css')).toIncludeCss(
186+
css`
187+
.bg-yellow {
188+
--tw-bg-opacity: 1;
189+
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
190+
}
191+
`
192+
)
193+
})
91194
})
92195

93196
describe('watcher', () => {
@@ -381,4 +484,125 @@ describe('watcher', () => {
381484

382485
return runningProcess.stop()
383486
})
487+
488+
test('listens for changes to the @config directive', async () => {
489+
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
490+
await writeInputFile(
491+
'index.css',
492+
css`
493+
@config "./tailwind.config.js";
494+
@tailwind base;
495+
@tailwind components;
496+
@tailwind utilities;
497+
`
498+
)
499+
await writeInputFile(
500+
'tailwind.config.js',
501+
javascript`
502+
module.exports = {
503+
content: {
504+
relative: true,
505+
files: ['./index.html'],
506+
},
507+
theme: {
508+
extend: {
509+
colors: {
510+
yellow: '#ff0',
511+
}
512+
},
513+
},
514+
corePlugins: {
515+
preflight: false,
516+
},
517+
}
518+
`
519+
)
520+
await writeInputFile(
521+
'tailwind.2.config.js',
522+
javascript`
523+
module.exports = {
524+
content: {
525+
relative: true,
526+
files: ['./index.html'],
527+
},
528+
theme: {
529+
extend: {
530+
colors: {
531+
yellow: '#ff7',
532+
}
533+
},
534+
},
535+
corePlugins: {
536+
preflight: false,
537+
},
538+
}
539+
`
540+
)
541+
542+
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
543+
await runningProcess.onStderr(ready)
544+
545+
expect(await readOutputFile('main.css')).toIncludeCss(
546+
css`
547+
.bg-yellow {
548+
--tw-bg-opacity: 1;
549+
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
550+
}
551+
`
552+
)
553+
554+
await writeInputFile(
555+
'index.css',
556+
css`
557+
@config "./tailwind.2.config.js";
558+
@tailwind base;
559+
@tailwind components;
560+
@tailwind utilities;
561+
`
562+
)
563+
await runningProcess.onStderr(ready)
564+
565+
expect(await readOutputFile('main.css')).toIncludeCss(
566+
css`
567+
.bg-yellow {
568+
--tw-bg-opacity: 1;
569+
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
570+
}
571+
`
572+
)
573+
574+
await writeInputFile(
575+
'tailwind.2.config.js',
576+
javascript`
577+
module.exports = {
578+
content: {
579+
relative: true,
580+
files: ['./index.html'],
581+
},
582+
theme: {
583+
extend: {
584+
colors: {
585+
yellow: '#fff',
586+
}
587+
},
588+
},
589+
corePlugins: {
590+
preflight: false,
591+
},
592+
}
593+
`
594+
)
595+
await runningProcess.onStderr(ready)
596+
597+
expect(await readOutputFile('main.css')).toIncludeCss(
598+
css`
599+
.bg-yellow {
600+
--tw-bg-opacity: 1;
601+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
602+
}
603+
`
604+
)
605+
606+
return runningProcess.stop()
607+
})
384608
})

0 commit comments

Comments
 (0)