From 2818f0562fd1b8ae8c9ec11e74b9947b3189a5a3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 25 May 2022 14:03:07 -0400 Subject: [PATCH 1/2] Add postcss-import support to the CLI --- .../tailwindcss-cli/package-lock.json | 110 +++++++++++++++++- integrations/tailwindcss-cli/package.json | 3 + integrations/tailwindcss-cli/src/imported.css | 5 + .../tailwindcss-cli/tests/cli.test.js | 54 +++++++++ package-lock.json | 56 +++++++++ package.json | 3 +- src/cli-peer-dependencies.js | 4 + src/cli.js | 16 ++- 8 files changed, 247 insertions(+), 4 deletions(-) create mode 100644 integrations/tailwindcss-cli/src/imported.css diff --git a/integrations/tailwindcss-cli/package-lock.json b/integrations/tailwindcss-cli/package-lock.json index c121da5a6153..e3602894561f 100644 --- a/integrations/tailwindcss-cli/package-lock.json +++ b/integrations/tailwindcss-cli/package-lock.json @@ -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" + } } } } diff --git a/integrations/tailwindcss-cli/package.json b/integrations/tailwindcss-cli/package.json index 0ed3dc1fe150..989acb07dc75 100644 --- a/integrations/tailwindcss-cli/package.json +++ b/integrations/tailwindcss-cli/package.json @@ -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", diff --git a/integrations/tailwindcss-cli/src/imported.css b/integrations/tailwindcss-cli/src/imported.css new file mode 100644 index 000000000000..a07bd414c821 --- /dev/null +++ b/integrations/tailwindcss-cli/src/imported.css @@ -0,0 +1,5 @@ +@layer utilities { + .something-cool { + color: red; + } +} diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index e812500582af..e8346c5eafa0 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -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`
`) + 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`
`) + 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`) diff --git a/package-lock.json b/package-lock.json index aa691a7dbda2..dc35d636f17c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8717e9bfa870..004b67fc9b97 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/cli-peer-dependencies.js b/src/cli-peer-dependencies.js index 87076590b361..6b9f986aab28 100644 --- a/src/cli-peer-dependencies.js +++ b/src/cli-peer-dependencies.js @@ -2,6 +2,10 @@ export function lazyPostcss() { return require('postcss') } +export function lazyPostcssImport() { + return require('postcss-import') +} + export function lazyAutoprefixer() { return require('autoprefixer') } diff --git a/src/cli.js b/src/cli.js index 7d184aa45537..c8e8938ea91c 100644 --- a/src/cli.js +++ b/src/cli.js @@ -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, From 85a3a7c6529c06e2cee9bd196238357896488ddd Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 25 May 2022 14:23:08 -0400 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 23420e8ea65a..cb797c11ca34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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