Global stylesheets (during create-svelte depending on the chosen CS…

…S preprocessor) (#726)

* Add a global stylesheet during create-svelte depending on the chosen CSS preprocessor

* Changeset for "Add a global stylesheet during `create-svelte` depending on the chosen CSS preprocessor"

* Indent `$layout.svelte` using tabs instead of spaces

* Switch `global.css` to `app.css`

* Make examples use `app.css`

.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

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>

examples/sandbox/src/app.css

@@ -0,0 +1,3 @@
+:root {
+	font-family: sans-serif;
+}

examples/sandbox/src/routes/$layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

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;

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', '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', '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);
@@ -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', '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);

packages/create-svelte/template-additions/src/app.css

@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}

packages/create-svelte/template-additions/src/app.less

@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}

packages/create-svelte/template-additions/src/app.scss

@@ -0,0 +1,4 @@
+:root {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+}

packages/create-svelte/template/src/routes/$layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

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;