Fix cloning issues (tailwindlabs#4646)

* ensure postcss 7 is dropped from dev dependencies as well

Drop incorrect "help" text

* ensure we are cloning nodes

This is an issue in postcss 7 and fixed in postcss 8. However the compat build still suffers form this issue.

Author: RobinMalfait

scripts/compat.js

@@ -37,34 +37,23 @@ if (process.argv.includes('--prepare')) {
   // 5. Remove peerDependencies
   delete packageJson.peerDependencies
 
-  // 6. Use new name
+  // 6. Cleanup devDependencies
+  for (let key in packageJson.devDependencies) {
+    if (key.includes('postcss')) delete packageJson.devDependencies[key]
+  }
+
+  // 7. Use new name
   packageJson.name = '@tailwindcss/postcss7-compat'
 
-  // 7. Make sure you can publish
+  // 8. Make sure you can publish
   packageJson.publishConfig = { access: 'public' }
 
-  // 8. Write package.json with the new contents
+  // 9. Write package.json with the new contents
   fs.writeFileSync(fromRootPath('package.json'), JSON.stringify(packageJson, null, 2), 'utf8')
 
-  // 9. Print some useful information to make publishing easy
+  // 10. 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(
-    [
-      // 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 (

src/jit/lib/generateRules.js

@@ -54,7 +54,7 @@ function applyPrefix(matches, context) {
   for (let match of matches) {
     let [meta] = match
     if (meta.options.respectPrefix) {
-      let container = postcss.root({ nodes: [match[1]] })
+      let container = postcss.root({ nodes: [match[1].clone()] })
       container.walkRules((r) => {
         r.selector = prefixSelector(context.tailwindConfig.prefix, r.selector)
       })
@@ -72,7 +72,7 @@ function applyImportant(matches) {
   let result = []
 
   for (let [meta, rule] of matches) {
-    let container = postcss.root({ nodes: [rule] })
+    let container = postcss.root({ nodes: [rule.clone()] })
     container.walkRules((r) => {
       r.selector = updateAllClasses(r.selector, (className) => {
         return `!${className}`
@@ -109,8 +109,7 @@ function applyVariant(variant, matches, context) {
         continue
       }
 
-      let container = postcss.root()
-      container.append(rule.clone())
+      let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction] of variantFunctionTuples) {
         let clone = container.clone()
@@ -297,7 +296,7 @@ function generateRules(candidates, context) {
           }
         })
       } else if (typeof context.tailwindConfig.important === 'string') {
-        let container = postcss.root({ nodes: [rule] })
+        let container = postcss.root({ nodes: [rule.clone()] })
         container.walkRules((r) => {
           if (inKeyframes(r)) {
             return