From 6e77d81099e77ade8786176174d3f0607d7eb98d Mon Sep 17 00:00:00 2001
From: Jacob Babich <jacobbabichpublic+git@gmail.com>
Date: Sat, 27 Mar 2021 16:16:42 -0400
Subject: [PATCH 1/5] Add a global stylesheet during create-svelte depending on
 the chosen CSS preprocessor

---
 packages/create-svelte/cli/modifications/add_css.js       | 6 ++++++
 packages/create-svelte/template-additions/src/global.css  | 4 ++++
 packages/create-svelte/template-additions/src/global.less | 4 ++++
 packages/create-svelte/template-additions/src/global.scss | 4 ++++
 packages/create-svelte/template/src/routes/$layout.svelte | 5 +++++
 packages/create-svelte/template/src/routes/index.svelte   | 5 -----
 6 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 packages/create-svelte/template-additions/src/global.css
 create mode 100644 packages/create-svelte/template-additions/src/global.less
 create mode 100644 packages/create-svelte/template-additions/src/global.scss
 create mode 100644 packages/create-svelte/template/src/routes/$layout.svelte

diff --git a/packages/create-svelte/cli/modifications/add_css.js b/packages/create-svelte/cli/modifications/add_css.js
index 0213e7070b34..0eb72a657391 100644
--- a/packages/create-svelte/cli/modifications/add_css.js
+++ b/packages/create-svelte/cli/modifications/add_css.js
@@ -1,6 +1,7 @@
 import { bold, green } from 'kleur/colors';
 import {
 	add_svelte_preprocess_to_config,
+	copy_from_template_additions,
 	update_component,
 	update_package_json_dev_deps
 } from './utils';
@@ -13,12 +14,15 @@ import {
  */
 export default async function add_css(cwd, which) {
 	if (which === 'css') {
+		copy_from_template_additions(cwd, ['src', 'global.css']);
 		console.log('You can add support for CSS preprocessors like SCSS/Less/PostCSS later.');
 	} else if (which === 'less') {
 		update_package_json_dev_deps(cwd, {
 			less: '^3.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
+		copy_from_template_additions(cwd, ['src', 'global.less']);
+		update_component(cwd, 'src/routes/$layout.svelte', [['../global.css', '../global.less']]);
 		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="less">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="less">']]);
 		add_svelte_preprocess_to_config(cwd);
@@ -35,6 +39,8 @@ export default async function add_css(cwd, which) {
 			sass: '^1.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
+		copy_from_template_additions(cwd, ['src', 'global.scss']);
+		update_component(cwd, 'src/routes/$layout.svelte', [['../global.css', '../global.scss']]);
 		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="scss">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="scss">']]);
 		add_svelte_preprocess_to_config(cwd);
diff --git a/packages/create-svelte/template-additions/src/global.css b/packages/create-svelte/template-additions/src/global.css
new file mode 100644
index 000000000000..1d7e28833464
--- /dev/null
+++ b/packages/create-svelte/template-additions/src/global.css
@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}
diff --git a/packages/create-svelte/template-additions/src/global.less b/packages/create-svelte/template-additions/src/global.less
new file mode 100644
index 000000000000..1d7e28833464
--- /dev/null
+++ b/packages/create-svelte/template-additions/src/global.less
@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}
diff --git a/packages/create-svelte/template-additions/src/global.scss b/packages/create-svelte/template-additions/src/global.scss
new file mode 100644
index 000000000000..1d7e28833464
--- /dev/null
+++ b/packages/create-svelte/template-additions/src/global.scss
@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}
diff --git a/packages/create-svelte/template/src/routes/$layout.svelte b/packages/create-svelte/template/src/routes/$layout.svelte
new file mode 100644
index 000000000000..11cd9f0aecde
--- /dev/null
+++ b/packages/create-svelte/template/src/routes/$layout.svelte
@@ -0,0 +1,5 @@
+<script>
+    import '../global.css';
+</script>
+
+<slot />
diff --git a/packages/create-svelte/template/src/routes/index.svelte b/packages/create-svelte/template/src/routes/index.svelte
index f08c6512f71b..7c1e74abbdc3 100644
--- a/packages/create-svelte/template/src/routes/index.svelte
+++ b/packages/create-svelte/template/src/routes/index.svelte
@@ -11,11 +11,6 @@
 </main>
 
 <style>
-	:root {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-			'Open Sans', 'Helvetica Neue', sans-serif;
-	}
-
 	main {
 		text-align: center;
 		padding: 1em;

From 4f4c11714e777d2e786a68c5a69e138a9448fb8a Mon Sep 17 00:00:00 2001
From: Jacob Babich <jacobbabichpublic+git@gmail.com>
Date: Sat, 27 Mar 2021 17:48:55 -0400
Subject: [PATCH 2/5] Changeset for "Add a global stylesheet during
 `create-svelte` depending on the chosen CSS preprocessor"

---
 .changeset/wet-dingos-perform.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wet-dingos-perform.md

diff --git a/.changeset/wet-dingos-perform.md b/.changeset/wet-dingos-perform.md
new file mode 100644
index 000000000000..b966a2d73eac
--- /dev/null
+++ b/.changeset/wet-dingos-perform.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Add a global stylesheet during create-svelte depending on the chosen CSS preprocessor

From d7faa06cc90f03fcebfdb59507630efa09ae1f2b Mon Sep 17 00:00:00 2001
From: Jacob Babich <jacobbabichpublic+git@gmail.com>
Date: Sat, 27 Mar 2021 18:30:05 -0400
Subject: [PATCH 3/5] Indent `$layout.svelte` using tabs instead of spaces

---
 packages/create-svelte/template/src/routes/$layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create-svelte/template/src/routes/$layout.svelte b/packages/create-svelte/template/src/routes/$layout.svelte
index 11cd9f0aecde..8df369b9306b 100644
--- a/packages/create-svelte/template/src/routes/$layout.svelte
+++ b/packages/create-svelte/template/src/routes/$layout.svelte
@@ -1,5 +1,5 @@
 <script>
-    import '../global.css';
+	import '../global.css';
 </script>
 
 <slot />

From 848d78e69a5d7423321c139f2716fa463cbe456a Mon Sep 17 00:00:00 2001
From: Jacob Babich <jacobbabichpublic+git@gmail.com>
Date: Sun, 28 Mar 2021 00:12:15 -0400
Subject: [PATCH 4/5] Switch `global.css` to `app.css`

---
 packages/create-svelte/cli/modifications/add_css.js    | 10 +++++-----
 .../template-additions/src/{global.css => app.css}     |  0
 .../template-additions/src/{global.less => app.less}   |  0
 .../template-additions/src/{global.scss => app.scss}   |  0
 .../create-svelte/template/src/routes/$layout.svelte   |  2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/create-svelte/template-additions/src/{global.css => app.css} (100%)
 rename packages/create-svelte/template-additions/src/{global.less => app.less} (100%)
 rename packages/create-svelte/template-additions/src/{global.scss => app.scss} (100%)

diff --git a/packages/create-svelte/cli/modifications/add_css.js b/packages/create-svelte/cli/modifications/add_css.js
index 0eb72a657391..0fabe673f275 100644
--- a/packages/create-svelte/cli/modifications/add_css.js
+++ b/packages/create-svelte/cli/modifications/add_css.js
@@ -14,15 +14,15 @@ import {
  */
 export default async function add_css(cwd, which) {
 	if (which === 'css') {
-		copy_from_template_additions(cwd, ['src', 'global.css']);
+		copy_from_template_additions(cwd, ['src', 'app.css']);
 		console.log('You can add support for CSS preprocessors like SCSS/Less/PostCSS later.');
 	} else if (which === 'less') {
 		update_package_json_dev_deps(cwd, {
 			less: '^3.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
-		copy_from_template_additions(cwd, ['src', 'global.less']);
-		update_component(cwd, 'src/routes/$layout.svelte', [['../global.css', '../global.less']]);
+		copy_from_template_additions(cwd, ['src', 'app.less']);
+		update_component(cwd, 'src/routes/$layout.svelte', [['../app.css', '../app.less']]);
 		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="less">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="less">']]);
 		add_svelte_preprocess_to_config(cwd);
@@ -39,8 +39,8 @@ export default async function add_css(cwd, which) {
 			sass: '^1.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
-		copy_from_template_additions(cwd, ['src', 'global.scss']);
-		update_component(cwd, 'src/routes/$layout.svelte', [['../global.css', '../global.scss']]);
+		copy_from_template_additions(cwd, ['src', 'app.scss']);
+		update_component(cwd, 'src/routes/$layout.svelte', [['../app.css', '../app.scss']]);
 		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="scss">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="scss">']]);
 		add_svelte_preprocess_to_config(cwd);
diff --git a/packages/create-svelte/template-additions/src/global.css b/packages/create-svelte/template-additions/src/app.css
similarity index 100%
rename from packages/create-svelte/template-additions/src/global.css
rename to packages/create-svelte/template-additions/src/app.css
diff --git a/packages/create-svelte/template-additions/src/global.less b/packages/create-svelte/template-additions/src/app.less
similarity index 100%
rename from packages/create-svelte/template-additions/src/global.less
rename to packages/create-svelte/template-additions/src/app.less
diff --git a/packages/create-svelte/template-additions/src/global.scss b/packages/create-svelte/template-additions/src/app.scss
similarity index 100%
rename from packages/create-svelte/template-additions/src/global.scss
rename to packages/create-svelte/template-additions/src/app.scss
diff --git a/packages/create-svelte/template/src/routes/$layout.svelte b/packages/create-svelte/template/src/routes/$layout.svelte
index 8df369b9306b..2e511e004988 100644
--- a/packages/create-svelte/template/src/routes/$layout.svelte
+++ b/packages/create-svelte/template/src/routes/$layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import '../global.css';
+	import '../app.css';
 </script>
 
 <slot />

From 01c2a4e891b55b18a5a5164e586dcb654ef5685f Mon Sep 17 00:00:00 2001
From: Jacob Babich <jacobbabichpublic+git@gmail.com>
Date: Sun, 28 Mar 2021 01:48:31 -0400
Subject: [PATCH 5/5] Make examples use `app.css`

---
 examples/hn.svelte.dev/{static/global.css => src/app.css} | 0
 examples/hn.svelte.dev/src/routes/$layout.svelte          | 2 ++
 examples/sandbox/src/app.css                              | 3 +++
 examples/sandbox/src/routes/$layout.svelte                | 5 +++++
 examples/sandbox/src/routes/index.svelte                  | 5 -----
 5 files changed, 10 insertions(+), 5 deletions(-)
 rename examples/hn.svelte.dev/{static/global.css => src/app.css} (100%)
 create mode 100644 examples/sandbox/src/app.css
 create mode 100644 examples/sandbox/src/routes/$layout.svelte

diff --git a/examples/hn.svelte.dev/static/global.css b/examples/hn.svelte.dev/src/app.css
similarity index 100%
rename from examples/hn.svelte.dev/static/global.css
rename to examples/hn.svelte.dev/src/app.css
diff --git a/examples/hn.svelte.dev/src/routes/$layout.svelte b/examples/hn.svelte.dev/src/routes/$layout.svelte
index aabcb5c1832b..a9e084c15f82 100644
--- a/examples/hn.svelte.dev/src/routes/$layout.svelte
+++ b/examples/hn.svelte.dev/src/routes/$layout.svelte
@@ -3,6 +3,8 @@
 	import Nav from '$lib/Nav.svelte';
 	import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
 	import ThemeToggler from '$lib/ThemeToggler.svelte';
+	import '../app.css';
+
 
 	$: section = $page.path.split('/')[1];
 </script>
diff --git a/examples/sandbox/src/app.css b/examples/sandbox/src/app.css
new file mode 100644
index 000000000000..b9c15fc30ffa
--- /dev/null
+++ b/examples/sandbox/src/app.css
@@ -0,0 +1,3 @@
+:root {
+	font-family: sans-serif;
+}
diff --git a/examples/sandbox/src/routes/$layout.svelte b/examples/sandbox/src/routes/$layout.svelte
new file mode 100644
index 000000000000..2e511e004988
--- /dev/null
+++ b/examples/sandbox/src/routes/$layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />
diff --git a/examples/sandbox/src/routes/index.svelte b/examples/sandbox/src/routes/index.svelte
index 2a0fd8ba6ef5..5adc7e2211b8 100644
--- a/examples/sandbox/src/routes/index.svelte
+++ b/examples/sandbox/src/routes/index.svelte
@@ -45,11 +45,6 @@
 </main>
 
 <style>
-	:root {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-			'Open Sans', 'Helvetica Neue', sans-serif;
-	}
-
 	main {
 		text-align: center;
 		padding: 1em;