wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add postcss-import support to the CLI (#8437)

Browse source 
* Add postcss-import support to the CLI

* Update changelog
This commit is contained in:
Jordan Pittman 2022-05-25 14:28:52 -04:00 • committed by GitHub
parent 50bed74cdc
commit c4e443acc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 248 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
- Experimental support for variant grouping ([#8405](https://github.com/tailwindlabs/tailwindcss/pull/8405))
- Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
## [3.0.24] - 2022-04-12

110
integrations/tailwindcss-cli/package-lock.json generated
View file

@ -6,7 +6,115 @@
"packages": {
"": {
"name": "tailwindcss-cli",
"version": "0.0.0"
"version": "0.0.0",
"dependencies": {
"tailwindcss": "file:../../"
}
},
"../..": {
"version": "3.0.24",
"license": "MIT",
"dependencies": {
"arg": "^5.0.1",
"chokidar": "^3.5.3",
"color-name": "^1.1.4",
"detective": "^5.2.0",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.2.11",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"lilconfig": "^2.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.0.9",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
"resolve": "^1.22.0"
},
"bin": {
"tailwind": "lib/cli.js",
"tailwindcss": "lib/cli.js"
},
"devDependencies": {
"@swc/cli": "^0.1.57",
"@swc/core": "^1.2.160",
"@swc/jest": "^0.2.21",
"@swc/register": "^0.1.10",
"autoprefixer": "^10.4.7",
"cssnano": "^5.1.9",
"esbuild": "^0.14.39",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^28.0.3",
"jest-diff": "^28.1.0",
"prettier": "^2.6.2",
"prettier-plugin-tailwindcss": "^0.1.11",
"rimraf": "^3.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": ">=12.13.0"
},
"peerDependencies": {
"postcss": "^8.0.9"
}
},
"node_modules/tailwindcss": {
"resolved": "../..",
"link": true
}
},
"dependencies": {
"tailwindcss": {
"version": "file:../..",
"requires": {
"@swc/cli": "^0.1.57",
"@swc/core": "^1.2.160",
"@swc/jest": "^0.2.21",
"@swc/register": "^0.1.10",
"arg": "^5.0.1",
"autoprefixer": "^10.4.7",
"chokidar": "^3.5.3",
"color-name": "^1.1.4",
"cssnano": "^5.1.9",
"detective": "^5.2.0",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"esbuild": "^0.14.39",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"fast-glob": "^3.2.11",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"jest": "^28.0.3",
"jest-diff": "^28.1.0",
"lilconfig": "^2.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.0.9",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"prettier": "^2.6.2",
"prettier-plugin-tailwindcss": "^0.1.11",
"quick-lru": "^5.1.1",
"resolve": "^1.22.0",
"rimraf": "^3.0.0",
"source-map-js": "^1.0.2"
}
}
}
}

3
integrations/tailwindcss-cli/package.json
View file

@ -6,6 +6,9 @@
"build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css",
"test": "jest --runInBand --forceExit"
},
"dependencies": {
"tailwindcss": "file:../../"
},
"jest": {
"testTimeout": 10000,
"displayName": "Tailwind CSS CLI",

5
integrations/tailwindcss-cli/src/imported.css Normal file
View file

@ -0,0 +1,5 @@
@layer utilities {
.something-cool {
color: red;
}
}

54
integrations/tailwindcss-cli/tests/cli.test.js
View file

@ -345,6 +345,60 @@ describe('Build command', () => {
expect(contents).toContain(`/*# sourceMappingURL`)
})
test('postcss-import is supported by default', async () => {
cleanupFile('src/test.css')
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';
`
)
await $(
`${EXECUTABLE} --input ./src/test.css --content ./src/index.html --output ./dist/main.css`
)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
@media (min-width: 768px) {
.md\:something-cool {
color: red;
}
}
`
)
})
test('postcss-import is included when using a custom postcss configuration', async () => {
cleanupFile('src/test.css')
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';
`
)
await $(
`${EXECUTABLE} --input ./src/test.css --content ./src/index.html --output ./dist/main.css --postcss`
)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
@import './imported.css';
`
)
})
test('--help', async () => {
let { combined } = await $(`${EXECUTABLE} --help`)

56
package-lock.json generated
View file

@ -23,6 +23,7 @@
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.13",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-nested": "5.0.6",
@ -5343,6 +5344,14 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/pirates": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz",
@ -5482,6 +5491,22 @@
"postcss": "^8.2.15"
}
},
"node_modules/postcss-import": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
"dependencies": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@ -5997,6 +6022,14 @@
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
"dev": true
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"dependencies": {
"pify": "^2.3.0"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -10545,6 +10578,11 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
},
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
},
"pirates": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz",
@ -10630,6 +10668,16 @@
"dev": true,
"requires": {}
},
"postcss-import": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
"requires": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
}
},
"postcss-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@ -10934,6 +10982,14 @@
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
"dev": true
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"requires": {
"pify": "^2.3.0"
}
},
"readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

3
package.json
View file

@ -76,7 +76,8 @@
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.13",
"postcss": "^8.0.9",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-nested": "5.0.6",

4
src/cli-peer-dependencies.js
View file

@ -2,6 +2,10 @@ export function lazyPostcss() {
return require('postcss')
}
export function lazyPostcssImport() {
return require('postcss-import')
}
export function lazyAutoprefixer() {
return require('autoprefixer')
}

16
src/cli.js
View file

@ -1,6 +1,6 @@
#!/usr/bin/env node
import { lazyPostcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
import chokidar from 'chokidar'
import path from 'path'
@ -581,7 +581,19 @@ async function build() {
let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
? await loadPostCssPlugins()
: [[], [], {}]
: [
[
(() => {
try {
return require('postcss-import')
} catch {}
return lazyPostcssImport()
})(),
],
[],
{},
]
let plugins = [
...beforePlugins,