Skip to content

Commit

Permalink
Enable postcss-import in the CLI by default in watch mode (#8580)
Browse files Browse the repository at this point in the history
* Add support for postcss-import in watch mode

* Add regression test

* Extract shared logic

* restructure test a little bit

Instead of relying on a arbitrary setTimout value, let's wait for the
file to be created instead.

* update changelog

Co-authored-by: Adam Bergman <adam@fransvilhelm.com>
  • Loading branch information
RobinMalfait and adambrgmn authored Jun 10, 2022
1 parent d32728b commit 0d064ea
Showing 3 changed files with 85 additions and 38 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

- Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576))
- Enable `postcss-import` in the CLI by default in watch mode ([#8574](https://github.com/tailwindlabs/tailwindcss/pull/8574), [#8580](https://github.com/tailwindlabs/tailwindcss/pull/8580))

## [3.1.1] - 2022-06-09

42 changes: 41 additions & 1 deletion integrations/tailwindcss-cli/tests/cli.test.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,14 @@ let resolveToolRoot = require('../../resolve-tool-root')

let version = require('../../../package.json').version

let { readOutputFile, writeInputFile, cleanupFile, fileExists, removeFile } = require('../../io')({
let {
cleanupFile,
fileExists,
readOutputFile,
removeFile,
waitForOutputFileCreation,
writeInputFile,
} = require('../../io')({
output: 'dist',
input: 'src',
})
@@ -374,6 +381,39 @@ describe('Build command', () => {
)
})

test('postcss-import is supported by default in watch mode', async () => {
cleanupFile('src/test.css')

This comment has been minimized.

Copy link
@singhanshveer

singhanshveer Jun 10, 2022

well versed

await writeInputFile('index.html', html`<div class="md:something-cool"></div>`)
await writeInputFile(
'test.css',
css`
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './imported.css';
`
)

let runningProcess = $(
`${EXECUTABLE} --watch --input ./src/test.css --content ./src/index.html --output ./dist/main.css`
)

await waitForOutputFileCreation('main.css')

expect(await readOutputFile('main.css')).toIncludeCss(
css`
@media (min-width: 768px) {
.md\:something-cool {
color: red;
}
}
`
)

return runningProcess.stop()
})

test('postcss-import is included when using a custom postcss configuration', async () => {
cleanupFile('src/test.css')

80 changes: 43 additions & 37 deletions src/cli.js
Original file line number Diff line number Diff line change
@@ -484,6 +484,45 @@ async function build() {
return [beforePlugins, afterPlugins, config.options]
}

function loadBuiltinPostcssPlugins() {
let postcss = loadPostcss()
let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
return [
[
(root) => {
root.walkAtRules('import', (rule) => {
if (rule.params.slice(1).startsWith('tailwindcss/')) {
rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
rule.remove()
}
})
},
(() => {
try {
return require('postcss-import')
} catch {}

return lazyPostcssImport()
})(),
(root) => {
root.walkComments((rule) => {
if (rule.text.startsWith(IMPORT_COMMENT)) {
rule.after(
postcss.atRule({
name: 'import',
params: rule.text.replace(IMPORT_COMMENT, ''),
})
)
rule.remove()
}
})
},
],
[],
{},
]
}

function resolveConfig() {
let config = configPath ? require(configPath) : {}

@@ -568,44 +607,9 @@ async function build() {

tailwindPlugin.postcss = true

let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '

let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
? await loadPostCssPlugins()
: [
[
(root) => {
root.walkAtRules('import', (rule) => {
if (rule.params.slice(1).startsWith('tailwindcss/')) {
rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
rule.remove()
}
})
},
(() => {
try {
return require('postcss-import')
} catch {}

return lazyPostcssImport()
})(),
(root) => {
root.walkComments((rule) => {
if (rule.text.startsWith(IMPORT_COMMENT)) {
rule.after(
postcss.atRule({
name: 'import',
params: rule.text.replace(IMPORT_COMMENT, ''),
})
)
rule.remove()
}
})
},
],
[],
{},
]
: loadBuiltinPostcssPlugins()

let plugins = [
...beforePlugins,
@@ -705,7 +709,9 @@ async function build() {
return resolveConfig()
}

let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
let [beforePlugins, afterPlugins] = includePostCss
? await loadPostCssPlugins()
: loadBuiltinPostcssPlugins()

let plugins = [
...beforePlugins,

0 comments on commit 0d064ea

Please sign in to comment.