tailwindcss ui: Add tailwindcss prettier rules

redwoodjs · Jun 23, 2022 · d39ec4b · d39ec4b
1 parent 19204b2
commit d39ec4b
Showing 1 changed file with 77 additions and 1 deletion.
diff --git a/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js b/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js
@@ -59,7 +59,13 @@ const tailwindImportsAndNotes = [
 export const handler = async ({ force, install }) => {
   const rwPaths = getPaths()
 
-  const packages = ['postcss', 'postcss-loader', 'tailwindcss', 'autoprefixer']
+  const packages = [
+    'postcss',
+    'postcss-loader',
+    'tailwindcss',
+    'autoprefixer',
+    'prettier-plugin-tailwindcss',
+  ]
 
   const recommendedVSCodeExtensions = [
     'csstools.postcss',
@@ -189,6 +195,76 @@ export const handler = async ({ force, install }) => {
         }
       },
     },
+    {
+      title: 'Adding tailwind config entry in prettier...',
+      task: async (_ctx) => {
+        const prettierConfigPath = path.join(rwPaths.base, 'prettier.config.js')
+        // Add tailwindcss ordering plugin to prettier
+        const prettierConfig = fs.readFileSync(prettierConfigPath, 'utf-8')
+        const tailwindConfigPath = path.relative(
+          rwPaths.base,
+          path.join(rwPaths.web.config, 'tailwind.config.js')
+        )
+
+        let newPrettierConfig = prettierConfig
+        if (newPrettierConfig.includes('"tailwindConfig": ')) {
+          if (force) {
+            newPrettierConfig = newPrettierConfig.replace(
+              /"tailwindConfig": .*(,)?/,
+              `"tailwindConfig": "./${tailwindConfigPath}",`
+            )
+          } else {
+            throw new Error(
+              'tailwindConfig setting already exists in prettier configuration.\nUse --force to override existing config.'
+            )
+          }
+        } else {
+          newPrettierConfig = newPrettierConfig.replace(
+            /,(\n\s*)\}/,
+            `,\n  "tailwindConfig": "./${tailwindConfigPath}",$1}`
+          )
+        }
+
+        fs.writeFileSync(prettierConfigPath, newPrettierConfig)
+      },
+    },
+    {
+      title: 'Adding tailwind prettier plugin...',
+      task: async (_ctx, task) => {
+        const prettierConfigPath = path.join(rwPaths.base, 'prettier.config.js')
+        // Add tailwindcss ordering plugin to prettier
+        const prettierConfig = fs.readFileSync(prettierConfigPath, 'utf-8')
+
+        let newPrettierConfig = prettierConfig
+        if (newPrettierConfig.includes('"plugins": [')) {
+          const pluginsMatch = newPrettierConfig.match(
+            /"plugins": \[[\sa-z\(\)'\-,]*]/
+          )
+
+          const matched = pluginsMatch && pluginsMatch[0]
+
+          if (
+            matched &&
+            (matched.includes("require('prettier-plugin-tailwindcss')") ||
+              matched.includes('require("prettier-plugin-tailwindcss")'))
+          ) {
+            task.skip('tailwindcss-plugin-prettier already required in plugins')
+          } else {
+            newPrettierConfig = newPrettierConfig.replace(
+              /"plugins": \[(\n\s+)*/,
+              `"plugins": [$1require('prettier-plugin-tailwindcss'),$1`
+            )
+          }
+        } else {
+          newPrettierConfig = newPrettierConfig.replace(
+            /,(\n\s*)\}/,
+            `,\n  "plugins": [\n    require('prettier-plugin-tailwindcss'),\n  ],$1}`
+          )
+        }
+
+        fs.writeFileSync(prettierConfigPath, newPrettierConfig)
+      },
+    },
   ])
 
   try {