feat: Dowdload Svelte App with Tailwind CSS and fix app.css bug along side

Author: wyMinLwin

apps/svelte.dev/.env

@@ -1,8 +1,8 @@
-SUPABASE_URL=
-SUPABASE_KEY=
+SUPABASE_URL=https://fgffbwzjvuacbgumcsge.supabase.co
+SUPABASE_KEY=rBCAuM33T4pdrhm1Y3hzGnlxWPfLBb8lI3ZHa3yIuphBBx9DT9/zf7/AuYgP3M3Llst030ect/xZEKiTuer/0w==
 
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
+GITHUB_CLIENT_ID=Ov23ligzz3gnuw49XeqW
+GITHUB_CLIENT_SECRET=98d6876b2cd82f95b01141e6361ebeb8ac453275
 
 # disable prerendering with `PRERENDER=false pnpm build` — this is useful for speeding up builds when previewing locally
 PRERENDER=true

apps/svelte.dev/.gitignore

@@ -8,6 +8,7 @@
 /src/routes/_home/Supporters/donors.js
 /scripts/svelte-template
 /static/svelte-template.json
+/static/svelte-tailwind-template.json
 
 # git-repositories of synced docs go here
 /repos/

apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md

@@ -834,9 +834,9 @@ Svelte 5 is more strict about the HTML structure and will throw a compiler error
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### :is(...) and :where(...) are scoped
+### :is(...), :has(...), and :where(...) are scoped
 
-Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+Previously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.
 
 When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:
 

apps/svelte.dev/scripts/get_svelte_tailwind_template.js

@@ -0,0 +1,102 @@
+// @ts-check
+import { readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { create } from 'sv';
+
+// This download the currente Vite template from Github, adjusts it to our needs, and saves it to static/svelte-template.json
+// This is used by the Svelte REPL as part of the "download project" feature
+
+const viteConfigTailwind =
+	"import { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\nimport tailwindcss from '@tailwindcss/vite'\nexport default defineConfig({\n\tplugins: [sveltekit(),tailwindcss()]\n});\n";
+
+const force = process.env.FORCE_UPDATE === 'true';
+const output_file = fileURLToPath(
+	new URL('../static/svelte-tailwind-template.json', import.meta.url)
+);
+const output_dir = fileURLToPath(new URL('./svelte-tailwind-template', import.meta.url));
+
+try {
+	if (!force && statSync(output_file)) {
+		console.info(`[update/template] ${output_file} exists. Skipping`);
+		process.exit(0);
+	}
+} catch {
+	// create Svelte-Kit skelton app
+	create(output_dir, { template: 'minimal', types: 'typescript', name: 'your-app' });
+
+	function get_all_files(dir) {
+		const files = [];
+		const items = readdirSync(dir, { withFileTypes: true });
+
+		for (const item of items) {
+			const full_path = join(dir, item.name);
+			if (item.isDirectory()) {
+				files.push(...get_all_files(full_path));
+			} else {
+				files.push(full_path.replaceAll('\\', '/'));
+			}
+		}
+
+		return files;
+	}
+
+	const all_files = get_all_files(output_dir);
+	const files = [];
+
+	for (let path of all_files) {
+		const bytes = readFileSync(path);
+		const string = bytes.toString();
+		let data = bytes.compare(Buffer.from(string)) === 0 ? string : [...bytes];
+
+		// vite config to use along with Tailwind CSS
+		if (path.endsWith('vite.config.ts')) {
+			files.push({
+				path: 'vite.config.ts',
+				data: viteConfigTailwind
+			});
+		}
+
+		// add Tailwind CSS as devDependencies
+		if (path.endsWith('package.json')) {
+			try {
+				const pkg = JSON.parse(string);
+
+				pkg.devDependencies ||= {};
+				pkg.devDependencies['tailwindcss'] = '^4.1.8';
+				pkg.devDependencies['@tailwindcss/vite'] = '^4.1.8';
+
+				data = JSON.stringify(pkg, null, 2); // Pretty-print with 2 spaces
+			} catch (err) {
+				console.error('Failed to parse package.json:', err);
+			}
+		}
+
+		if (path.endsWith('routes/+page.svelte')) {
+			data = `<script>\n\timport '../app.css';\n\timport App from './App.svelte';\n</script>\n\n<App />\n`;
+		}
+
+		files.push({ path: path.slice(output_dir.length + 1), data });
+	}
+
+	files.push({
+		path: 'src/routes/+page.js',
+		data:
+			"// Because we don't know whether or not your playground app can run in a server environment, we disable server-side rendering.\n" +
+			'// Make sure to test whether or not you can re-enable it, as SSR improves perceived performance and site accessibility.\n' +
+			'// Read more about this option here: https://svelte.dev/docs/kit/page-options#ssr\n' +
+			'export const ssr = false;\n'
+	});
+
+	// add CSS styles from playground to the project
+
+	files.push({
+		path: 'src/app.css',
+		data: '@import "tailwindcss";'
+	});
+
+	writeFileSync(output_file, JSON.stringify(files));
+
+	// remove output dir afterwards to prevent it messing with Vite watcher
+	rmSync(output_dir, { force: true, recursive: true });
+}

apps/svelte.dev/scripts/get_svelte_template.js

@@ -66,7 +66,7 @@ try {
 		{ encoding: 'utf-8' }
 	);
 	const css = html
-		.slice(html.indexOf('<style>') + 7, html.indexOf('</style>'))
+		.slice(html.indexOf('<style id="injected">') + 19, html.indexOf('</style>'))
 		.split('\n')
 		.map((line) =>
 			// remove leading \t

apps/svelte.dev/scripts/update.js

@@ -9,4 +9,5 @@ const env = {
 
 fork(`${dir}/get_contributors.js`, { env });
 fork(`${dir}/get_donors.js`, { env });
+fork(`${dir}/get_svelte_tailwind_template.js`, { env });
 fork(`${dir}/get_svelte_template.js`, { env });

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -97,10 +97,12 @@
 	}
 
 	async function download() {
-		const { files: components, imports } = repl.toJSON();
+		const { files: components, imports, tailwind } = repl.toJSON();
 
 		const files: Array<{ path: string; data: string }> = await (
-			await fetch('/svelte-template.json')
+			tailwind
+				? await fetch('/svelte-tailwind-template.json')
+				: await fetch('/svelte-template.json')
 		).json();
 
 		if (imports.length > 0) {