feat: support prettier-plugin-tailwindcss (#64)

* ⚡ feat: add prettier-plugin-tailwindcss

---------

Co-authored-by: Manuel Serret <[email protected]>

Author: alongcamewayne

__info.js

@@ -1,4 +1,5 @@
 import { extension } from "../postcss/stuff.js";
+import { prettierConfigPath } from "./stuff.js";
 
 export const name = "Tailwind CSS";
 
@@ -70,4 +71,25 @@ export const heuristics = [
 			return true;
 		},
 	},
+	{
+		description: "prettier is configured (if installed)",
+		async detector({ folderInfo, readFile }) {
+			// skip if prettier is not installed
+			const isInstalled = "prettier" in folderInfo.allDependencies;
+			if (!isInstalled) return true;
+
+			// check plugins
+			const tailwindPlugin = "prettier-plugin-tailwindcss" in folderInfo.allDependencies;
+			const sveltePlugin = "prettier-plugin-svelte" in folderInfo.allDependencies;
+			if (!tailwindPlugin || sveltePlugin) return false;
+
+			// prettier-plugin-tailwindcss should replace prettier-plugin-svelte in .prettierrc
+			const prettierConfig = await readFile({ path: prettierConfigPath });
+			if (!prettierConfig) return false;
+
+			const { text } = prettierConfig;
+			const { plugins } = JSON.parse(text);
+			return plugins.includes("prettier-plugin-tailwindcss") && !plugins.includes("prettier-plugin-svelte");
+		},
+	},
 ];

__run.js

@@ -2,7 +2,7 @@ import { walk } from "estree-walker";
 import { AtRule } from "postcss";
 import { addImport, findImport, setDefaultDefaultExport, setDefault, addRootBlockComment } from "../../ast-tools.js";
 import { extension, postcssConfigCjsPath, stylesHint } from "../postcss/stuff.js";
-import { tailwindConfigCjsPath } from "./stuff.js";
+import { tailwindConfigCjsPath, prettierConfigPath } from "./stuff.js";
 
 /**
  * @param {import("../../ast-io.js").RecastAST} postcssConfigAst
@@ -101,7 +101,6 @@ const updatePostcssConfig = (postcssConfigAst) => {
 		pluginsList.elements.splice(maxIndex, 0, {
 			// @ts-expect-error - Force accept the comment - TODO: find a better way to handle this
 			type: "Line",
-			// @ts-expect-error - Force accept the comment
 			value: `Some plugins, like ${goAfter[0]}, need to run before Tailwind`,
 		});
 
@@ -122,7 +121,6 @@ const updatePostcssConfig = (postcssConfigAst) => {
 		pluginsList.elements.splice(maxIndex + 2, 0, {
 			// @ts-expect-error - Force accept the comment
 			type: "Line",
-			// @ts-expect-error - Force accept the comment
 			value: `But others, like ${goBefore[0]}, need to run after`,
 		});
 	} else if (pluginsList.type === "ObjectExpression") {
@@ -290,7 +288,7 @@ const updateGlobalStylesheet = (postcss) => {
 };
 
 /** @type {import("../..").AdderRun<import("./__info.js").Options>} */
-export const run = async ({ install, options, updateCss, updateJavaScript }) => {
+export const run = async ({ install, options, updateCss, updateJavaScript, updateJson, folderInfo }) => {
 	await updateJavaScript({
 		path: tailwindConfigCjsPath,
 		async script({ typeScriptEstree }) {
@@ -322,4 +320,27 @@ export const run = async ({ install, options, updateCss, updateJavaScript }) =>
 	if (options.forms) await install({ package: "@tailwindcss/forms" });
 	if (options.typography) await install({ package: "@tailwindcss/typography" });
 	if (options.daisyui) await install({ package: "daisyui" });
+
+	if ("prettier" in folderInfo.allDependencies) {
+		// update plugins in prettier config
+		await updateJson({
+			path: prettierConfigPath,
+			async json({ obj }) {
+				const plugins = obj.plugins.filter((/** @type {string} */ plugin) => plugin !== "prettier-plugin-svelte");
+				obj.plugins = ["prettier-plugin-tailwindcss", ...plugins];
+				return { obj };
+			},
+		});
+
+		// update package.json
+		await updateJson({
+			path: "/package.json",
+			async json({ obj }) {
+				delete obj.devDependencies["prettier-plugin-svelte"];
+				return { obj };
+			},
+		});
+
+		await install({ package: "prettier-plugin-tailwindcss" });
+	}
 };

stuff.js

@@ -1 +1,2 @@
 export const tailwindConfigCjsPath = "/tailwind.config.cjs";
+export const prettierConfigPath = "/.prettierrc";