⚡️ feat: Tailwind 3 (alpha) option

Author: babichjacob

README.md

@@ -16,7 +16,7 @@ This adder supports SvelteKit and Vite-powered Svelte apps (all the environments
 
 ### ⚙️ Options
 
-- `jit` (default `true`): whether or not to use [Tailwind Just-in-Time Mode](https://tailwindcss.com/docs/just-in-time-mode)
+- `v3` (default `false`): whether or not to use [Tailwind 3](https://github.com/tailwindlabs/tailwindcss/discussions/5668), which is currently in alpha.
 
 ## 🛠 Using Tailwind CSS
 

__metadata.js

@@ -1,12 +1,12 @@
 export const name = "Tailwind CSS";
 
-/** @typedef {{ jit: boolean }} Options */
+/** @typedef {{ v3: boolean }} Options */
 
 /** @type {import("../..").AdderOptions<Options>} */
 export const options = {
-	jit: {
-		context: "https://tailwindcss.com/docs/just-in-time-mode\nIt is recommended, but you will see warning messages in the terminal (because it is in preview) and potentially run into unexpected issues, especially with @apply or nested selectors.",
-		default: true,
-		question: "Do you want to use Tailwind Just-in-Time mode?",
+	v3: {
+		context: "It is currently in alpha.",
+		default: false,
+		question: "Do you want to use Tailwind 3?",
 	},
 };

__run.js

@@ -1,64 +1,20 @@
 import { walk } from "estree-walker";
 import { AtRule } from "postcss";
-import { newTypeScriptEstreeAst } from "../../ast-io.js";
-import { addImport, findImport, getConfigExpression, setDefault } from "../../ast-tools.js";
+import { addImport, findImport, getConfigExpression, setDefault, setPropertyValue } from "../../ast-tools.js";
 import { extension, postcssConfigCjsPath, stylesHint } from "../postcss/stuff.js";
 import { tailwindConfigCjsPath } from "./stuff.js";
 
-const tailwindAotConfig = `const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
-
-const config = {
-	mode: "aot",
-	purge: {
-		content: [
-			"./src/**/*.{html,js,svelte,ts}",
-		],
-		options: {
-			defaultExtractor: (content) => [
-				// If this stops working, please open an issue at https://github.com/svelte-add/svelte-add/issues rather than bothering Tailwind Labs about it
-				...tailwindExtractor(content),
-				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
-				...[...content.matchAll(/(?:class:)*([\\w\\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
-			],
-		},
-		safelist: [/^svelte-[\\d\\w]+$/],
-	},
-	theme: {
-		extend: {},
-	},
-	variants: {
-		extend: {},
-	},
-	plugins: [],
-};
-
-module.exports = config;
-`;
-
-const tailwindJitConfig = `const config = {
-	mode: "jit",
-	purge: [
-		"./src/**/*.{html,js,svelte,ts}",
-	],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-};
-
-module.exports = config;
-`;
-
 /**
  * @param {import("../../ast-io.js").RecastAST} postcssConfigAst
+ * @returns {import("../../ast-io.js").RecastAST}
  */
 const updatePostcssConfig = (postcssConfigAst) => {
 	const configObject = getConfigExpression({
 		cjs: true,
 		typeScriptEstree: postcssConfigAst,
 	});
 
-	if (configObject.type !== "ObjectExpression") throw new Error("postcss config must be an object");
+	if (configObject.type !== "ObjectExpression") throw new Error("PostCSS config must be an object");
 
 	const pluginsList = setDefault({
 		default: {
@@ -173,6 +129,83 @@ const updatePostcssConfig = (postcssConfigAst) => {
 	return postcssConfigAst;
 };
 
+/**
+ * @param {import("../../ast-io.js").RecastAST} tailwindConfigAst
+ * @param {boolean} tailwind3
+ * @returns {import("../../ast-io.js").RecastAST}
+ */
+const updateTailwindConfig = (tailwindConfigAst, tailwind3) => {
+	const configObject = getConfigExpression({
+		cjs: true,
+		typeScriptEstree: tailwindConfigAst,
+	});
+
+	if (configObject.type !== "ObjectExpression") throw new Error("Tailwind config must be an object");
+
+	if (!tailwind3) {
+		setPropertyValue({
+			object: configObject,
+			property: "mode",
+			value: {
+				type: "Literal",
+				value: "jit",
+			},
+		});
+	}
+
+	/** @type {import("estree").ArrayExpression} */
+	const content = {
+		type: "ArrayExpression",
+		elements: [
+			{
+				type: "Literal",
+				value: "./src/**/*.{html,js,svelte,ts}",
+			},
+		],
+	};
+	setDefault({
+		default: content,
+		object: configObject,
+		property: tailwind3 ? "content" : "purge",
+	});
+
+	/** @type {import("estree").ObjectExpression} */
+	const emptyTheme = {
+		type: "ObjectExpression",
+		properties: [],
+	};
+	const themeConfig = setDefault({
+		default: emptyTheme,
+		object: configObject,
+		property: "theme",
+	});
+	if (themeConfig.type !== "ObjectExpression") throw new Error("`theme` in Tailwind config must be an object");
+
+	/** @type {import("estree").ObjectExpression} */
+	const emptyThemeExtend = {
+		type: "ObjectExpression",
+		properties: [],
+	};
+	setDefault({
+		default: emptyThemeExtend,
+		object: themeConfig,
+		property: "extend",
+	});
+
+	/** @type {import("estree").ArrayExpression} */
+	const emptyPlugins = {
+		type: "ArrayExpression",
+		elements: [],
+	};
+	setDefault({
+		default: emptyPlugins,
+		object: configObject,
+		property: "plugins",
+	});
+
+	return tailwindConfigAst;
+};
+
 /**
  *
  * @param {import("../../ast-io.js").PostCSSAst} postcss
@@ -219,9 +252,9 @@ const updateGlobalStylesheet = (postcss) => {
 export const run = async ({ install, options, updateCss, updateJavaScript }) => {
 	await updateJavaScript({
 		path: tailwindConfigCjsPath,
-		async script() {
+		async script({ typeScriptEstree }) {
 			return {
-				typeScriptEstree: newTypeScriptEstreeAst(options.jit ? tailwindJitConfig : tailwindAotConfig),
+				typeScriptEstree: updateTailwindConfig(typeScriptEstree, options.v3),
 			};
 		},
 	});
@@ -244,5 +277,5 @@ export const run = async ({ install, options, updateCss, updateJavaScript }) =>
 		},
 	});
 
-	await install({ package: "tailwindcss" });
+	await install({ package: "tailwindcss", versionOverride: options.v3 ? "next" : undefined });
 };