make tailwind work again

Author: manuel3108

packages/sv/lib/addons/tailwindcss/index.ts

@@ -1,6 +1,7 @@
 import { defineAddon, defineAddonOptions } from '../../core/index.ts';
 import { imports, vite } from '../../core/tooling/js/index.ts';
 import * as svelte from '../../core/tooling/svelte/index.ts';
+import * as css from '../../core/tooling/css/index.ts';
 import { parseCss, parseJson, parseScript, parseSvelte } from '../../core/tooling/parsers.ts';
 
 const plugins = [
@@ -59,38 +60,28 @@ export default defineAddon({
 		});
 
 		sv.file(files.stylesheet, (content) => {
-			let atRules = parseCss(content).ast.nodes.filter((node) => node.type === 'atrule');
-
-			const findAtRule = (name: string, params: string) =>
-				atRules.find(
-					(rule) =>
-						rule.name === name &&
-						// checks for both double and single quote variants
-						rule.params.replace(/['"]/g, '') === params
-				);
-
-			let code = content;
-			const importsTailwind = findAtRule('import', 'tailwindcss');
-			if (!importsTailwind) {
-				code = "@import 'tailwindcss';\n" + code;
-				// reparse to account for the newly added tailwindcss import
-				atRules = parseCss(code).ast.nodes.filter((node) => node.type === 'atrule');
-			}
+			const { ast, generateCode } = parseCss(content);
 
-			const lastAtRule = atRules.findLast((rule) => ['plugin', 'import'].includes(rule.name));
-			const pluginPos = lastAtRule!.source!.end!.offset;
+			// since we are prepending all the `AtRule` let's add them in reverse order,
+			// so they appear in the expected order in the final file
 
 			for (const plugin of plugins) {
 				if (!options.plugins.includes(plugin.id)) continue;
 
-				const pluginRule = findAtRule('plugin', plugin.package);
-				if (!pluginRule) {
-					const pluginImport = `\n@plugin '${plugin.package}';`;
-					code = code.substring(0, pluginPos) + pluginImport + code.substring(pluginPos);
-				}
+				css.addAtRule(ast, {
+					name: 'plugin',
+					params: `'${plugin.package}'`,
+					append: false
+				});
 			}
 
-			return code;
+			css.addAtRule(ast, {
+				name: 'import',
+				params: `'tailwindcss'`,
+				append: false
+			});
+
+			return generateCode();
 		});
 
 		if (!kit) {

packages/sv/lib/core/tooling/index.ts

@@ -111,7 +111,12 @@ export function serializeCss(ast: SvelteAst.CSS.StyleSheet): string {
 		const child = ast.children[i];
 		result += sveltePrint(child).code;
 
-		if (i < ast.children.length - 1) result += '\n\n';
+		if (i < ast.children.length - 1) {
+			const next = ast.children[i + 1];
+
+			if (child.type === 'Atrule' && next.type === 'Atrule') result += '\n';
+			else result += '\n\n';
+		}
 	}
 
 	return result;