feat(cli): co-locate css file from usage (+layout.svelte) (#780)

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

Author: 3 people

.changeset/busy-sides-play.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(tailwind): add vscode setting for tailwind

.changeset/rich-tires-talk.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(create): co-locate css file from usage (`layout.css` & `+layout.svelte`)

documentation/docs/30-add-ons/50-tailwind.md

@@ -14,7 +14,7 @@ npx sv add tailwindcss
 
 - Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
 - Tailwind Vite plugin
-- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)
+- updated `layout.css` and `+layout.svelte` (for SvelteKit) or `app.css` and `App.svelte` (for non-SvelteKit Vite apps)
 - integration with `prettier` if using that package
 
 ## Options

packages/addons/prettier/index.ts

@@ -7,7 +7,7 @@ export default defineAddon({
 	shortDescription: 'formatter',
 	homepage: 'https://prettier.io',
 	options: {},
-	run: ({ sv, dependencyVersion }) => {
+	run: ({ sv, dependencyVersion, kit }) => {
 		const tailwindcssInstalled = Boolean(dependencyVersion('tailwindcss'));
 		if (tailwindcssInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.7.1');
 
@@ -53,7 +53,7 @@ export default defineAddon({
 				if (!plugins.includes('prettier-plugin-tailwindcss')) {
 					data.plugins.unshift('prettier-plugin-tailwindcss');
 				}
-				data.tailwindStylesheet ??= './src/app.css';
+				data.tailwindStylesheet ??= kit ? `${kit?.routesDirectory}/layout.css` : './src/app.css';
 			}
 			if (!plugins.includes('prettier-plugin-svelte')) {
 				data.plugins.unshift('prettier-plugin-svelte');

packages/addons/tailwindcss/index.ts

@@ -35,6 +35,16 @@ export default defineAddon({
 	run: ({ sv, options, files, typescript, kit, dependencyVersion }) => {
 		const prettierInstalled = Boolean(dependencyVersion('prettier'));
 
+		const stylesheet = kit
+			? ({
+					rootPath: `${kit.routesDirectory}/layout.css`,
+					relativePath: './layout.css'
+				} as const)
+			: ({
+					rootPath: 'src/app.css',
+					relativePath: './app.css'
+				} as const);
+
 		sv.devDependency('tailwindcss', '^4.1.14');
 		sv.devDependency('@tailwindcss/vite', '^4.1.14');
 		sv.pnpmBuildDependency('@tailwindcss/oxide');
@@ -58,7 +68,7 @@ export default defineAddon({
 			return generateCode();
 		});
 
-		sv.file('src/app.css', (content) => {
+		sv.file(stylesheet.rootPath, (content) => {
 			let atRules = parseCss(content).ast.nodes.filter((node) => node.type === 'atrule');
 
 			const findAtRule = (name: string, params: string) =>
@@ -96,13 +106,13 @@ export default defineAddon({
 		if (!kit) {
 			sv.file('src/App.svelte', (content) => {
 				const { script, generateCode } = parseSvelte(content, { typescript });
-				imports.addEmpty(script.ast, { from: './app.css' });
+				imports.addEmpty(script.ast, { from: stylesheet.relativePath });
 				return generateCode({ script: script.generateCode() });
 			});
 		} else {
 			sv.file(`${kit?.routesDirectory}/+layout.svelte`, (content) => {
 				const { script, template, generateCode } = parseSvelte(content, { typescript });
-				imports.addEmpty(script.ast, { from: '../app.css' });
+				imports.addEmpty(script.ast, { from: stylesheet.relativePath });
 
 				if (content.length === 0) {
 					const svelteVersion = dependencyVersion('svelte');
@@ -120,6 +130,15 @@ export default defineAddon({
 			});
 		}
 
+		sv.file('.vscode/settings.json', (content) => {
+			const { data, generateCode } = parseJson(content);
+
+			data['files.associations'] ??= {};
+			data['files.associations']['*.css'] = 'tailwind';
+
+			return generateCode();
+		});
+
 		if (prettierInstalled) {
 			sv.file('.prettierrc', (content) => {
 				const { data, generateCode } = parseJson(content);
@@ -130,7 +149,7 @@ export default defineAddon({
 
 				if (!plugins.includes(PLUGIN_NAME)) plugins.push(PLUGIN_NAME);
 
-				data.tailwindStylesheet ??= './src/app.css';
+				data.tailwindStylesheet ??= stylesheet.rootPath;
 
 				return generateCode();
 			});

packages/create/templates/demo/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Header from './Header.svelte';
-	import '../app.css';
+	import './layout.css';
 
 	/** @type {{children: import('svelte').Snippet}} */
 	let { children } = $props();