feat: tailwindcss plugins (#127)

* feat: tailwindcss plugins * use esm syntax * add identifier prop * remove name * fix issue where plugins weren't being added after initial execution --------- Co-authored-by: AdrianGonz97 <[email protected]>
sveltejs · Oct 16, 2024 · 9fcc3ef · 9fcc3ef
1 parent 7027e5d
commit 9fcc3ef
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 18 deletions.
diff --git a/.changeset/stupid-parents-grin.md b/.changeset/stupid-parents-grin.md
@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: tailwindcss plugins
diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts
@@ -1,14 +1,55 @@
-import { defineAdder, defineAdderOptions } from '@sveltejs/cli-core';
+import { defineAdder, defineAdderOptions, type PackageDefinition } from '@sveltejs/cli-core';
 import { addImports } from '@sveltejs/cli-core/css';
-import { array, common, exports, functions, imports, object } from '@sveltejs/cli-core/js';
+import { array, common, exports, imports, object, type AstTypes } from '@sveltejs/cli-core/js';
 import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers';
 import { addSlot } from '@sveltejs/cli-core/html';
 
+type Plugin = {
+	id: string;
+	package: string;
+	version: string;
+	identifier: string;
+};
+
+const plugins: Plugin[] = [
+	{
+		id: 'typography',
+		package: '@tailwindcss/typography',
+		version: '^0.5.15',
+		identifier: 'typography'
+	},
+	{
+		id: 'forms',
+		package: '@tailwindcss/forms',
+		version: '^0.5.9',
+		identifier: 'forms'
+	},
+	{
+		id: 'container-queries',
+		package: '@tailwindcss/container-queries',
+		version: '^0.1.1',
+		identifier: 'containerQueries'
+	},
+	{
+		id: 'aspect-ratio',
+		package: '@tailwindcss/aspect-ratio',
+		version: '^0.4.2',
+		identifier: 'aspectRatio'
+	}
+];
+
+const pluginPackages: Array<PackageDefinition<typeof options>> = plugins.map((x) => ({
+	name: x.package,
+	version: x.version,
+	dev: true,
+	condition: ({ options }) => options.plugins.includes(x.id)
+}));
+
 export const options = defineAdderOptions({
 	plugins: {
 		type: 'multiselect',
 		question: 'Which plugins would you like to add?',
-		options: [{ value: 'typography', label: 'Typography' }],
+		options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })),
 		default: []
 	}
 });
@@ -22,18 +63,13 @@ export default defineAdder({
 	packages: [
 		{ name: 'tailwindcss', version: '^3.4.9', dev: true },
 		{ name: 'autoprefixer', version: '^10.4.20', dev: true },
-		{
-			name: '@tailwindcss/typography',
-			version: '^0.5.14',
-			dev: true,
-			condition: ({ options }) => options.plugins.includes('typography')
-		},
 		{
 			name: 'prettier-plugin-tailwindcss',
 			version: '^0.6.5',
 			dev: true,
 			condition: ({ dependencyVersion }) => Boolean(dependencyVersion('prettier'))
-		}
+		},
+		...pluginPackages
 	],
 	files: [
 		{
@@ -47,22 +83,31 @@ export default defineAdder({
 					root = common.typeAnnotateExpression(rootExport, 'Config');
 				}
 
-				const { astNode: exportDeclaration } = exports.defaultExport(ast, root ?? rootExport);
+				const { astNode: exportDeclaration, value: node } = exports.defaultExport(
+					ast,
+					root ?? rootExport
+				);
 
-				if (!typescript)
+				const config = (
+					node.type === 'TSAsExpression' ? node.expression : node
+				) as AstTypes.ObjectExpression;
+
+				if (!typescript) {
 					common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config");
+				}
 
-				const contentArray = object.property(rootExport, 'content', array.createEmpty());
+				const contentArray = object.property(config, 'content', array.createEmpty());
 				array.push(contentArray, './src/**/*.{html,js,svelte,ts}');
 
-				const themeObject = object.property(rootExport, 'theme', object.createEmpty());
+				const themeObject = object.property(config, 'theme', object.createEmpty());
 				object.property(themeObject, 'extend', object.createEmpty());
 
-				const pluginsArray = object.property(rootExport, 'plugins', array.createEmpty());
+				const pluginsArray = object.property(config, 'plugins', array.createEmpty());
 
-				if (options.plugins.includes('typography')) {
-					const requireCall = functions.call('require', ['@tailwindcss/typography']);
-					array.push(pluginsArray, requireCall);
+				for (const plugin of plugins) {
+					if (!options.plugins.includes(plugin.id)) continue;
+					imports.addDefault(ast, plugin.package, plugin.identifier);
+					array.push(pluginsArray, { type: 'Identifier', name: plugin.identifier });
 				}
 
 				return generateCode();