From d325d41b8516e509587db0a06f3c7249cc2ae52b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Sowa?= <lukasz@owlsome.dev>
Date: Thu, 23 Jun 2022 10:13:33 +0200
Subject: [PATCH] tailwindcss ui: Add tailwindcss prettier rules

---
 .../setup/ui/libraries/tailwindcss.js         | 78 ++++++++++++++++++-
 1 file changed, 77 insertions(+), 1 deletion(-)

diff --git a/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js b/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js
index aa174459e9b7..52e537ed6b59 100644
--- 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?)$/,
+            `,\n  tailwindConfig: './${tailwindConfigPath}',$1$2`
+          )
+        }
+
+        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?)$/,
+            `,\n  plugins: [require('prettier-plugin-tailwindcss')],$1$2`
+          )
+        }
+
+        fs.writeFileSync(prettierConfigPath, newPrettierConfig)
+      },
+    },
   ])
 
   try {