chore(examples): use JS import in routify

examples/routify/package.json

@@ -21,13 +21,13 @@
     "rollup": "^2.18.1",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-svelte": "^5.2.3",
     "rollup-plugin-svelte-hot": "^0.9.2",
     "rollup-plugin-terser": "^7.0.2",
     "routify-plugin-frontmatter": "^1.0.1",
     "spassr": "^1.1.2",
-    "svelte": "^3.23.2",
-    "svelte-preprocess": "^4.2.1"
+    "svelte": "^3.23.2"
   },
   "routify": {
     "extensions": "svelte,md",

examples/routify/rollup.config.js

@@ -1,7 +1,6 @@
 import { createRollupConfigs } from "./scripts/base.config.js";
 import slug from "remark-slug";
 import { mdsvex } from "mdsvex";
-import autoPreprocess from "svelte-preprocess";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -13,10 +12,7 @@ export const config = {
   production,
   rollupWrapper: (cfg) => cfg,
   svelteWrapper: (svelte) => {
-    svelte.preprocess = [
-      autoPreprocess(),
-      mdsvex({ remarkPlugins: [slug], extension: "md" }),
-    ];
+    svelte.preprocess = [mdsvex({ remarkPlugins: [slug], extension: "md" })];
     svelte.extensions = [".svelte", ".md"];
     return svelte;
   },

examples/routify/scripts/base.config.js

@@ -6,6 +6,7 @@ import { terser } from "rollup-plugin-terser";
 import copy from "rollup-plugin-copy";
 import fs from "fs";
 import replace from "@rollup/plugin-replace";
+import postcss from "rollup-plugin-postcss";
 import { spassr } from "spassr";
 import { version } from "../package.json";
 
@@ -63,6 +64,10 @@ function baseConfig(config, ctx) {
         flatten: false,
       }),
       replace({ "process.env.VERSION": JSON.stringify(version) }),
+      postcss({
+        extract: "bundle.css",
+        extensions: [".css"],
+      }),
       svelte(svelteWrapper(svelteConfig, ctx)),
       resolve({
         browser: true,

examples/routify/src/main.js

@@ -1,3 +1,4 @@
+import "carbon-components-svelte/css/all.css";
 import HMR from "@sveltech/routify/hmr";
 import App from "./App.svelte";
 

examples/routify/src/pages/_layout.svelte

@@ -5,10 +5,6 @@
   import Theme from "../components/Theme.svelte";
 </script>
 
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
-
 <Theme persist theme="g10">
   <Navigation />
   <Content style="background: none; padding: 1rem">