From 6e5583f00ee11838be398a40e8859f802698e0a0 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Thu, 13 Nov 2025 11:42:31 +0800 Subject: [PATCH 01/13] change css location for kit --- packages/addons/tailwindcss/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 074bbf9ed..f112e19c5 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -58,7 +58,7 @@ export default defineAddon({ return generateCode(); }); - sv.file('src/app.css', (content) => { + sv.file(kit ? `${kit?.routesDirectory}/layout.css`: 'src/app.css', (content) => { let atRules = parseCss(content).ast.nodes.filter((node) => node.type === 'atrule'); const findAtRule = (name: string, params: string) => @@ -102,7 +102,7 @@ export default defineAddon({ } 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: './layout.css' }); if (content.length === 0) { const svelteVersion = dependencyVersion('svelte'); @@ -130,7 +130,7 @@ export default defineAddon({ if (!plugins.includes(PLUGIN_NAME)) plugins.push(PLUGIN_NAME); - data.tailwindStylesheet ??= './src/app.css'; + data.tailwindStylesheet ??= kit ? './src/routes/layout.css' : './src/app.css'; return generateCode(); }); From 975298784721216ca4225e8937fccf3c484770f6 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Thu, 13 Nov 2025 17:09:21 +0800 Subject: [PATCH 02/13] add a vscode fix --- packages/addons/tailwindcss/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index f112e19c5..110a15873 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -120,6 +120,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); @@ -135,5 +144,7 @@ export default defineAddon({ return generateCode(); }); } + + } }); From 7f2667de24951ea860145f6705653986a2e9a6ec Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Thu, 13 Nov 2025 17:54:21 +0800 Subject: [PATCH 03/13] add changeset --- .changeset/rich-tires-talk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-tires-talk.md diff --git a/.changeset/rich-tires-talk.md b/.changeset/rich-tires-talk.md new file mode 100644 index 000000000..934fb02f5 --- /dev/null +++ b/.changeset/rich-tires-talk.md @@ -0,0 +1,5 @@ +--- +'sv': patch +--- + +co-locate the css file from `tailwind` From c880e409a37361c88931c9ebf142685839f38619 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Thu, 13 Nov 2025 17:57:58 +0800 Subject: [PATCH 04/13] lint --- packages/addons/tailwindcss/index.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 110a15873..ac0119cc1 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -58,7 +58,7 @@ export default defineAddon({ return generateCode(); }); - sv.file(kit ? `${kit?.routesDirectory}/layout.css`: 'src/app.css', (content) => { + sv.file(kit ? `${kit?.routesDirectory}/layout.css` : 'src/app.css', (content) => { let atRules = parseCss(content).ast.nodes.filter((node) => node.type === 'atrule'); const findAtRule = (name: string, params: string) => @@ -120,14 +120,14 @@ export default defineAddon({ }); } - sv.file('.vscode/settings.json',(content)=>{ - const {data,generateCode} =parseJson(content) + sv.file('.vscode/settings.json', (content) => { + const { data, generateCode } = parseJson(content); - data['files.associations']??= {} - data['files.associations']['*.css'] = 'tailwind' + data['files.associations'] ??= {}; + data['files.associations']['*.css'] = 'tailwind'; - return generateCode() - }) + return generateCode(); + }); if (prettierInstalled) { sv.file('.prettierrc', (content) => { @@ -144,7 +144,5 @@ export default defineAddon({ return generateCode(); }); } - - } }); From 0ccd4cbfda936b1b3dece16ac7754535911fd3cd Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Sun, 16 Nov 2025 10:36:59 +0800 Subject: [PATCH 05/13] Update .changeset/rich-tires-talk.md Co-authored-by: jyc.dev --- .changeset/rich-tires-talk.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rich-tires-talk.md b/.changeset/rich-tires-talk.md index 934fb02f5..d5a23121e 100644 --- a/.changeset/rich-tires-talk.md +++ b/.changeset/rich-tires-talk.md @@ -2,4 +2,4 @@ 'sv': patch --- -co-locate the css file from `tailwind` +feat(cli): co-locate css file from usage (`+layout.svelte`) From d432bc939d68884007844aa335d21c70d102d1b4 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Sun, 16 Nov 2025 10:37:16 +0800 Subject: [PATCH 06/13] Update packages/addons/tailwindcss/index.ts Co-authored-by: jyc.dev --- packages/addons/tailwindcss/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index ac0119cc1..b15a289db 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -139,7 +139,7 @@ export default defineAddon({ if (!plugins.includes(PLUGIN_NAME)) plugins.push(PLUGIN_NAME); - data.tailwindStylesheet ??= kit ? './src/routes/layout.css' : './src/app.css'; + data.tailwindStylesheet ??= kit ? `${kit?.routesDirectory}/layout.css` : './src/app.css'; return generateCode(); }); From 1f0615c9772d74647c272b3440b4e20a581f9c77 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Sun, 16 Nov 2025 10:46:56 +0800 Subject: [PATCH 07/13] update demo --- packages/addons/prettier/index.ts | 3 ++- packages/create/templates/demo/src/routes/+layout.svelte | 2 +- .../create/templates/demo/src/{app.css => routes/layout.css} | 0 3 files changed, 3 insertions(+), 2 deletions(-) rename packages/create/templates/demo/src/{app.css => routes/layout.css} (100%) diff --git a/packages/addons/prettier/index.ts b/packages/addons/prettier/index.ts index e914668c2..e9e072576 100644 --- a/packages/addons/prettier/index.ts +++ b/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'); @@ -54,6 +54,7 @@ export default defineAddon({ 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'); diff --git a/packages/create/templates/demo/src/routes/+layout.svelte b/packages/create/templates/demo/src/routes/+layout.svelte index 330f10c0d..02ac943b0 100644 --- a/packages/create/templates/demo/src/routes/+layout.svelte +++ b/packages/create/templates/demo/src/routes/+layout.svelte @@ -1,6 +1,6 @@