diff --git a/CHANGELOG.md b/CHANGELOG.md index 261693348977..409d7b27830d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Only check selectors containing base apply candidates for circular dependencies ([#8222](https://github.com/tailwindlabs/tailwindcss/pull/8222)) - Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204)) +### Changed + +- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270)) + ### Added - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587)) diff --git a/src/cli-peer-dependencies.js b/src/cli-peer-dependencies.js index cdb0708b7a5a..87076590b361 100644 --- a/src/cli-peer-dependencies.js +++ b/src/cli-peer-dependencies.js @@ -1,4 +1,6 @@ -export let postcss = require('postcss') +export function lazyPostcss() { + return require('postcss') +} export function lazyAutoprefixer() { return require('autoprefixer') diff --git a/src/cli.js b/src/cli.js index 1fab938bab02..88e6f134c0c5 100644 --- a/src/cli.js +++ b/src/cli.js @@ -1,6 +1,6 @@ #!/usr/bin/env node -import { postcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js' +import { lazyPostcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js' import chokidar from 'chokidar' import path from 'path' @@ -146,6 +146,15 @@ function oneOf(...options) { ) } +function loadPostcss() { + // Try to load a local `postcss` version first + try { + return require('postcss') + } catch {} + + return lazyPostcss() +} + let commands = { init: { run: init, @@ -576,6 +585,7 @@ async function build() { })(), ].filter(Boolean) + let postcss = loadPostcss() let processor = postcss(plugins) function processCSS(css) { @@ -709,6 +719,7 @@ async function build() { let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__') let copy = plugins.slice() copy.splice(tailwindPluginIdx, 1, tailwindPlugin) + let postcss = loadPostcss() let processor = postcss(copy) function processCSS(css) {