From 6f1d5f03cb2d88bfa514ba835d6c3197a6521cd4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 9 Jun 2021 19:13:30 +0200
Subject: [PATCH] prefer local plugins (#4598)

* prefer local plugins over bundled plugins

* hoist resolving of plugins

* drop `options` when local `cssnano` is found
---
 src/cli.js | 69 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/cli.js b/src/cli.js
index f93b5da808af..2db30cb4710e 100644
--- a/src/cli.js
+++ b/src/cli.js
@@ -448,8 +448,26 @@ async function build() {
       tailwindPlugin,
       !args['--minify'] && formatNodes,
       ...afterPlugins,
-      !args['--no-autoprefixer'] && lazyAutoprefixer(),
-      args['--minify'] && lazyCssnano()({ preset: ['default', { cssDeclarationSorter: false }] }),
+      !args['--no-autoprefixer'] &&
+        (() => {
+          // Try to load a local `autoprefixer` version first
+          try {
+            return require('autoprefixer')
+          } catch {}
+
+          return lazyAutoprefixer()
+        })(),
+      args['--minify'] &&
+        (() => {
+          let options = { preset: ['default', { cssDeclarationSorter: false }] }
+
+          // Try to load a local `cssnano` version first
+          try {
+            return require('cssnano')
+          } catch {}
+
+          return lazyCssnano()(options)
+        })(),
     ].filter(Boolean)
 
     let processor = postcss(plugins)
@@ -485,7 +503,7 @@ async function build() {
 
   let context = null
 
-  function startWatcher() {
+  async function startWatcher() {
     let changedContent = []
     let configDependencies = []
     let contextDependencies = new Set()
@@ -509,6 +527,35 @@ async function build() {
       return resolveConfig()
     }
 
+    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+
+    let plugins = [
+      ...beforePlugins,
+      '__TAILWIND_PLUGIN_POSITION__',
+      !args['--minify'] && formatNodes,
+      ...afterPlugins,
+      !args['--no-autoprefixer'] &&
+        (() => {
+          // Try to load a local `autoprefixer` version first
+          try {
+            return require('autoprefixer')
+          } catch {}
+
+          return lazyAutoprefixer()
+        })(),
+      args['--minify'] &&
+        (() => {
+          let options = { preset: ['default', { cssDeclarationSorter: false }] }
+
+          // Try to load a local `cssnano` version first
+          try {
+            return require('cssnano')
+          } catch {}
+
+          return lazyCssnano()(options)
+        })(),
+    ].filter(Boolean)
+
     async function rebuild(config) {
       env.DEBUG && console.time('Finished in')
 
@@ -548,18 +595,10 @@ async function build() {
 
       tailwindPlugin.postcss = true
 
-      let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
-
-      let plugins = [
-        ...beforePlugins,
-        tailwindPlugin,
-        !args['--minify'] && formatNodes,
-        ...afterPlugins,
-        !args['--no-autoprefixer'] && lazyAutoprefixer(),
-        args['--minify'] && lazyCssnano()({ preset: ['default', { cssDeclarationSorter: false }] }),
-      ].filter(Boolean)
-
-      let processor = postcss(plugins)
+      let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__')
+      let copy = plugins.slice()
+      copy.splice(tailwindPluginIdx, 1, tailwindPlugin)
+      let processor = postcss(copy)
 
       function processCSS(css) {
         let start = process.hrtime.bigint()