From 431be7fdbb2459523b093a5b04599455094f448b Mon Sep 17 00:00:00 2001 From: wyMinLwin Date: Thu, 5 Jun 2025 22:24:02 +0700 Subject: [PATCH 1/2] feat: Dowdload Svelte App with Tailwind CSS and fix app.css bug along side --- apps/svelte.dev/.env | 8 +- apps/svelte.dev/.gitignore | 1 + .../svelte/07-misc/07-v5-migration-guide.md | 4 +- .../scripts/get_svelte_tailwind_template.js | 102 ++++++++++++++++++ .../svelte.dev/scripts/get_svelte_template.js | 2 +- apps/svelte.dev/scripts/update.js | 1 + .../(authed)/playground/[id]/+page.svelte | 6 +- 7 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 apps/svelte.dev/scripts/get_svelte_tailwind_template.js diff --git a/apps/svelte.dev/.env b/apps/svelte.dev/.env index 43b6ea5cb7..c3a0485155 100644 --- a/apps/svelte.dev/.env +++ b/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 diff --git a/apps/svelte.dev/.gitignore b/apps/svelte.dev/.gitignore index a3079a3c21..b45f37b025 100644 --- a/apps/svelte.dev/.gitignore +++ b/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/ diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md index 20b9326bd7..07b1838fbb 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md +++ b/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: diff --git a/apps/svelte.dev/scripts/get_svelte_tailwind_template.js b/apps/svelte.dev/scripts/get_svelte_tailwind_template.js new file mode 100644 index 0000000000..5fec9acde7 --- /dev/null +++ b/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 = `\n\n\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 }); +} diff --git a/apps/svelte.dev/scripts/get_svelte_template.js b/apps/svelte.dev/scripts/get_svelte_template.js index d525eaa3df..7fc7eba0a3 100644 --- a/apps/svelte.dev/scripts/get_svelte_template.js +++ b/apps/svelte.dev/scripts/get_svelte_template.js @@ -66,7 +66,7 @@ try { { encoding: 'utf-8' } ); const css = html - .slice(html.indexOf('')) + .slice(html.indexOf('')) .split('\n') .map((line) => // remove leading \t diff --git a/apps/svelte.dev/scripts/update.js b/apps/svelte.dev/scripts/update.js index 9c25d958dc..7ec5ef95fe 100644 --- a/apps/svelte.dev/scripts/update.js +++ b/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 }); diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 134402a78e..9761d10749 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/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) { From 5857874a0a4e85b2e7e2eb4c5a98b9736b526c08 Mon Sep 17 00:00:00 2001 From: Wai Yan Min Lwin Date: Fri, 6 Jun 2025 00:03:19 +0700 Subject: [PATCH 2/2] feat: download-Tailwind-enabled-playground --- apps/svelte.dev/.env | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/.env b/apps/svelte.dev/.env index c3a0485155..43b6ea5cb7 100644 --- a/apps/svelte.dev/.env +++ b/apps/svelte.dev/.env @@ -1,8 +1,8 @@ -SUPABASE_URL=https://fgffbwzjvuacbgumcsge.supabase.co -SUPABASE_KEY=rBCAuM33T4pdrhm1Y3hzGnlxWPfLBb8lI3ZHa3yIuphBBx9DT9/zf7/AuYgP3M3Llst030ect/xZEKiTuer/0w== +SUPABASE_URL= +SUPABASE_KEY= -GITHUB_CLIENT_ID=Ov23ligzz3gnuw49XeqW -GITHUB_CLIENT_SECRET=98d6876b2cd82f95b01141e6361ebeb8ac453275 +GITHUB_CLIENT_ID= +GITHUB_CLIENT_SECRET= # disable prerendering with `PRERENDER=false pnpm build` — this is useful for speeding up builds when previewing locally PRERENDER=true