Fix usage of postcss.config.js in standalone CLI (#8769)

* Update deps

* Fix usage of postcss config file in standalone CLI

The config file created with `--postcss` would fail because we didn’t stub require to load `tailwindcss` or `autoprefixer` when we should.

* Update tests

* WIP

Author: thecrypticace

standalone-cli/package-lock.json

@@ -12,6 +12,7 @@
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.0",
     "@tailwindcss/typography": "^0.5.0",
+    "fs-extra": "^10.1.0",
     "jest": "^27.2.5",
     "move-file-cli": "^3.0.0",
     "pkg": "^5.3.3",

standalone-cli/package.json

@@ -12,6 +12,10 @@ let localModules = {
   '@tailwindcss/forms': require('@tailwindcss/forms'),
   '@tailwindcss/line-clamp': require('@tailwindcss/line-clamp'),
   '@tailwindcss/typography': require('@tailwindcss/typography'),
+
+  // These are present to allow them to be specified in the PostCSS config file
+  autoprefixer: require('autoprefixer'),
+  tailwindcss: require('tailwindcss'),
 }
 
 Module.prototype.require = function (id) {

standalone-cli/standalone.js

@@ -1 +1,2 @@
 <div class="uppercase"></div>
+<div class="[will-change:opacity]"></div>

standalone-cli/tests/fixtures/basic.html

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-will-change': {},
+  },
+}

standalone-cli/tests/fixtures/postcss.config.js

@@ -1,4 +1,6 @@
 const { execSync } = require('child_process')
+const os = require('os')
+const fs = require('fs-extra')
 
 const platformMap = {
   darwin: 'macos',
@@ -13,7 +15,13 @@ function exec(args) {
 }
 
 it('works', () => {
-  expect(exec('--content tests/fixtures/basic.html')).toContain('.uppercase')
+  let result = exec('--content tests/fixtures/basic.html')
+  expect(result).toContain('.uppercase')
+  expect(result).toContain('.\\[will-change\\:opacity\\]')
+  expect(result).toContain('will-change: opacity')
+
+  // Verify that no plugins are installed that modify the `[will-change:opacity]` class
+  expect(result).not.toContain('backface-visibility: hidden')
 })
 
 it('supports first-party plugins', () => {
@@ -23,3 +31,54 @@ it('supports first-party plugins', () => {
   expect(result).toContain('.line-clamp-2')
   expect(result).toContain('.prose')
 })
+
+it('supports postcss config files', async () => {
+  // We have to run this test outside of any place with node_modules for it to properly test this situation
+  let result = await inIsolatedContext(() => {
+    // Emulate the user adding their own postcss plugins
+    execSync(`npm install postcss-will-change`)
+
+    return exec('--content tests/fixtures/basic.html --postcss tests/fixtures/postcss.config.js')
+  })
+
+  expect(result).toContain('.uppercase')
+
+  // Ensure the custom added postcss plugin is working
+  expect(result).toContain('will-change: opacity')
+  expect(result).toContain('backface-visibility: hidden')
+})
+
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T}
+ */
+async function inIsolatedContext(fn) {
+  // Create a new directory entirely outside of the package for the test
+  let dest = `${os.tmpdir()}/tailwindcss-cli`
+
+  // Recursively copy the dist and tests folders
+  let dirs = ['dist', 'tests']
+
+  await Promise.all(
+    dirs.map((dir) =>
+      fs.copy(`${__dirname}/../${dir}`, `${dest}/${dir}`, {
+        overwrite: true,
+        recursive: true,
+      })
+    )
+  )
+
+  // Change the working directory to the new directory
+  process.chdir(dest)
+
+  try {
+    return await fn()
+  } finally {
+    // Change back to the original working directory
+    process.chdir(__dirname)
+
+    // Delete the new directory
+    await fs.rmdir(dest, { recursive: true })
+  }
+}