Improve compat mode (#2775)

* simplify compat mode

* make sure postcss is included

* make sure we cannot go into compatibility mode twice

package.json

@@ -24,7 +24,6 @@
     "prepublishOnly": "npm run babelify && babel-node scripts/build.js",
     "style": "eslint .",
     "test": "jest && eslint .",
-    "precompat": "npm run babelify",
     "compat": "node scripts/compat.js --prepare",
     "compat:restore": "node scripts/compat.js --restore"
   },

scripts/compat.js

@@ -6,53 +6,80 @@ function fromRootPath(...paths) {
   return path.resolve(process.cwd(), ...paths)
 }
 
-function backupPath(...paths) {
-  return path.resolve(process.cwd(), 'node_modules', '__tw_cache__', ...paths)
-}
-
 function copy(fromPath, toPath) {
-  fs.mkdirSync(path.dirname(toPath), { recursive: true })
   fs.copyFileSync(fromPath, toPath)
 }
 
 if (process.argv.includes('--prepare')) {
+  if (
+    fs.existsSync(fromRootPath('package.postcss8.json')) ||
+    fs.existsSync(fromRootPath('src', 'index.postcss8.js'))
+  ) {
+    console.error('\n\n[ABORT] Already in PostCSS 7 compatibility mode!\n\n')
+    process.exit(1)
+  }
+
   const mainPackageJson = require('../package.json')
   const compatPackageJson = require('../package.postcss7.json')
 
   // 1. Backup original package.json file
-  copy(fromRootPath('package.json'), backupPath('package.json'))
+  copy(fromRootPath('package.json'), fromRootPath('package.postcss8.json'))
 
-  // 2. Backup lib/index.js file
-  copy(fromRootPath('lib', 'index.js'), backupPath('lib', 'index.js'))
+  // 2. Backup src/index.js file
+  copy(fromRootPath('src', 'index.js'), fromRootPath('src', 'index.postcss8.js'))
 
-  // 3. Use the postcss7 compat file
-  copy(fromRootPath('lib', 'index.postcss7.js'), fromRootPath('lib', 'index.js'))
+  // 3. Use the PostCSS 7 compat file
+  copy(fromRootPath('src', 'index.postcss7.js'), fromRootPath('src', 'index.js'))
 
   // 4. Deep merge package.json contents
   const packageJson = merge({}, mainPackageJson, compatPackageJson)
 
-  // 5. Write package.json with the new contents
+  // 5. Remove peerDependencies
+  delete packageJson.peerDependencies
+
+  // 6. Write package.json with the new contents
   fs.writeFileSync(fromRootPath('package.json'), JSON.stringify(packageJson, null, 2), 'utf8')
 
-  // 6. Print some useful information to make publishing easy
+  // 7. Print some useful information to make publishing easy
   console.log()
   console.log('You can safely publish `tailwindcss` in PostCSS 7 compatibility mode:\n')
   console.log(
-    ['npm version', 'npm publish --tag compat', 'npm run compat:restore']
+    [
+      // Not necessary, but a quick 'hash', basically the current date/time
+      `git checkout -b compat-${new Date()
+        .toJSON()
+        .replace(/[-:.TZ]/g, '') // Remove weird characters
+        .slice(0, -3)}`, // Remove milliseconds precision
+      'git add .',
+      'git commit -m "compat"',
+      'npm version',
+      'npm publish --tag compat',
+      'npm run compat:restore',
+    ]
       .map((v) => `  ${v}`)
       .join('\n')
   )
   console.log()
 } else if (process.argv.includes('--restore')) {
+  if (
+    !fs.existsSync(fromRootPath('package.postcss8.json')) ||
+    !fs.existsSync(fromRootPath('src', 'index.postcss8.js'))
+  ) {
+    console.error('\n\n[ABORT] Already in latest PostCSS mode!\n\n')
+    process.exit(1)
+  }
+
   // 1. Restore original package.json file
-  copy(backupPath('package.json'), fromRootPath('package.json'))
-  fs.unlinkSync(backupPath('package.json'))
+  copy(fromRootPath('package.postcss8.json'), fromRootPath('package.json'))
+
+  // 2. Restore src/index.js file
+  copy(fromRootPath('src', 'index.postcss8.js'), fromRootPath('src', 'index.js'))
 
-  // 2. Restore lib/index.js file
-  copy(backupPath('lib', 'index.js'), fromRootPath('lib', 'index.js'))
-  fs.unlinkSync(backupPath('lib', 'index.js'))
+  // 3. Cleanup PostCSS 8 related files
+  fs.unlinkSync(fromRootPath('package.postcss8.json'))
+  fs.unlinkSync(fromRootPath('src', 'index.postcss8.js'))
 
-  // 3. Done
+  // 4. Done
   console.log()
   console.log('Restored from PostCSS 7 mode to latest PostCSS mode!')
   console.log()

src/index.postcss7.js

@@ -2,6 +2,7 @@ import path from 'path'
 import fs from 'fs'
 
 import _ from 'lodash'
+import postcss from 'postcss'
 
 import getModuleDependencies from './lib/getModuleDependencies'
 import registerConfigAsDependency from './lib/registerConfigAsDependency'