docs(build): build CSS from SCSS

CONTRIBUTING.md

@@ -35,12 +35,6 @@ Install the project dependencies:
 yarn install
 ```
 
-Build the CSS used in the documentation site:
-
-```sh
-yarn build:css
-```
-
 ## Documentation set-up
 
 Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.

docs/package.json

@@ -4,25 +4,31 @@
     "dev": "run-p dev:*",
     "dev:routify": "NODE_ENV=development routify run",
     "dev:svite": "svite",
-    "build": "node scripts/build",
+    "build": "run-s build:*",
+    "build:routify": "routify run -b",
+    "build:svite": "svite build",
     "postbuild": "node scripts/postbuild"
   },
   "devDependencies": {
+    "@carbon/themes": "^10.20.0",
     "@sveltech/routify": "^1.9.9",
+    "autoprefixer": "^10.0.1",
+    "carbon-components": "^10.21.0",
     "carbon-components-svelte": "../",
     "clipboard-copy": "^3.1.0",
     "fs-extra": "^9.0.1",
     "mdsvex": "^0.8.8",
+    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
     "playwright-aws-lambda": "^0.6.0",
     "playwright-core": "^1.4.2",
     "polka": "^0.5.2",
+    "postcss": "^8.1.1",
     "prettier": "^2.1.2",
     "prettier-plugin-svelte": "^1.4.0",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.21.0",
     "remark-slug": "^6.0.0",
-    "shelljs": "^0.8.4",
     "sirv": "^1.0.6",
     "svelte": "3.29.0",
     "svelte-hmr": "0.11.1",

docs/scripts/build.js

@@ -1,11 +0,0 @@
-const shell = require("shelljs");
-
-shell.cd("../");
-shell.exec("yarn");
-shell.exec("yarn build:css");
-shell.exec("yarn link");
-shell.cd("docs");
-shell.exec("yarn link 'carbon-components-svelte'");
-shell.exec("yarn");
-shell.exec("routify run -b");
-shell.exec("svite build");

docs/src/App.svelte

@@ -3,4 +3,45 @@
   import { routes } from "../.routify/routes";
 </script>
 
+<style lang="scss" global>
+  $feature-flags: (
+    ui-shell: true,
+    enable-css-custom-properties: true,
+    grid-columns-16: true
+  );
+
+  @import "@carbon/themes/scss/themes";
+
+  :root {
+    @include carbon--theme($carbon--theme--white, true);
+  }
+
+  :root[theme="g10"] {
+    @include carbon--theme($carbon--theme--g10, true);
+  }
+
+  :root[theme="g90"] {
+    @include carbon--theme($carbon--theme--g90, true);
+  }
+
+  :root[theme="g100"] {
+    @include carbon--theme($carbon--theme--g100, true);
+  }
+
+  $css--font-face: true;
+  $css--helpers: true;
+  $css--body: true;
+  $css--use-layer: true;
+  $css--reset: true;
+  $css--default-type: true;
+  $css--plex: true;
+
+  @import "carbon-components/scss/globals/scss/_css--reset.scss";
+  @import "carbon-components/scss/globals/scss/_css--font-face.scss";
+  @import "carbon-components/scss/globals/scss/_css--helpers.scss";
+  @import "carbon-components/scss/globals/scss/_css--body.scss";
+  @import "carbon-components/scss/globals/grid/_grid.scss";
+  @import "carbon-components/scss/globals/scss/styles.scss";
+</style>
+
 <Router routes="{routes}" />

docs/src/index.js

@@ -1,4 +1,3 @@
-import "/node_modules/carbon-components-svelte/css/all.css";
 import App from "./App.svelte";
 
 const app = new App({

docs/svelte.config.js

@@ -7,6 +7,7 @@ const { format } = require("prettier");
 const pkg = require("../package.json");
 const fs = require("fs");
 const Prism = require("prismjs");
+const { replace, postcss } = require("svelte-preprocess");
 require("prism-svelte");
 
 function createImports(source) {
@@ -126,11 +127,16 @@ module.exports = {
   extensions: [".svelte", ".svx"],
   hydratable: NODE_ENV === "production",
   preprocess: [
-    require("svelte-preprocess")({
-      sourcemap: false,
-      replace: [
-        ["process.env.VERSION", JSON.stringify(pkg.version)],
-        ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
+    require("svelte-preprocess")(),
+    replace([
+      ["process.env.VERSION", JSON.stringify(pkg.version)],
+      ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
+    ]),
+    postcss({
+      plugins: [
+        require("autoprefixer")({
+          overrideBrowserslist: ["last 1 version", "ie >= 11"],
+        }),
       ],
     }),
     mdsvex({