From a76f209b33db31cb5890d1c7148c9259991da4a2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 2 Apr 2022 11:32:22 -0700
Subject: [PATCH] docs: remove svelte-preprocess from svelte.config.js

---
 docs/src/components/Preview.svelte       |  83 +------
 docs/src/global.css                      | 268 +++++++++++++++++++++++
 docs/src/index.js                        |   1 +
 docs/src/layouts/ComponentLayout.svelte  |  58 +----
 docs/src/layouts/Recipe.svelte           |  38 +---
 docs/src/pages/_layout.svelte            | 110 +---------
 docs/svelte.config.js                    |  24 +-
 examples/sapper/src/routes/_error.svelte |   6 -
 8 files changed, 284 insertions(+), 304 deletions(-)
 create mode 100644 docs/src/global.css

diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 3aeebae7..f8d7d4f4 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -47,7 +47,7 @@
   </div>
 </div>
 
-<style global>
+<style>
   .preview {
     margin-bottom: var(--cds-layout-04);
     margin-left: -1rem;
@@ -55,91 +55,10 @@
     max-width: 56rem;
   }
 
-  .code-override .bx--snippet {
-    max-width: none;
-  }
-
-  .code-override .bx--copy-btn,
-  .code-override .bx--snippet,
-  .code-override button.bx--btn.bx--snippet-btn--expand {
-    background-color: #262626;
-    color: #f4f4f4;
-  }
-
-  .code-override .bx--copy-btn:hover,
-  .code-override button.bx--btn.bx--snippet-btn--expand:hover {
-    background-color: #393939;
-  }
-
-  .code-override .bx--snippet__icon {
-    fill: #f4f4f4;
-  }
-
-  .code-override .bx--snippet-container pre {
-    font-size: var(--cds-code-02-font-size);
-    line-height: var(--cds-code-02-line-height);
-    letter-spacing: var(--cds-code-02-letter-spacing);
-    cursor: text;
-  }
-
-  .code-override .bx--snippet--multi .bx--snippet-container pre {
-    overflow-x: auto;
-  }
-
-  .token.tag,
-  .token.operator {
-    color: #6ea6ff;
-  }
-
-  .token.attr-name {
-    color: #3ddbd9; /* teal 30 */
-  }
-
-  .token.function {
-    color: #9ef0f0;
-  }
-
-  .token.token.language-javascript,
-  .token.attr-value {
-    color: #d4bbff; /* purple 30 */
-  }
-
-  .token.keyword {
-    color: #bb8eff;
-  }
-
-  .token.punctuation {
-    color: #a8a8a8; /* gray 40 */
-  }
-
-  .token.script .token.language-javascript {
-    color: #3ddbd9; /* teal 30 */
-  }
-
-  .token.string {
-    color: #fa75a6;
-  }
-
-  .token.boolean {
-    color: #bb8eff;
-  }
-
-  .token.number {
-    color: #a7f0ba;
-  }
-
-  .token.comment {
-    color: #bebebe;
-  }
-
   .code-override {
     border: 1px solid #262626;
   }
 
-  html[theme="g90"] .code-override {
-    border: 1px solid var(--cds-ui-03);
-  }
-
   .preview-viewer {
     border: 1px solid var(--cds-ui-03);
     border-bottom: 0;
diff --git a/docs/src/global.css b/docs/src/global.css
new file mode 100644
index 00000000..61006422
--- /dev/null
+++ b/docs/src/global.css
@@ -0,0 +1,268 @@
+html[theme="g90"] .code-override {
+  border: 1px solid var(--cds-ui-03);
+}
+
+.code-override .bx--snippet {
+  max-width: none;
+}
+
+.code-override .bx--copy-btn,
+.code-override .bx--snippet,
+.code-override button.bx--btn.bx--snippet-btn--expand {
+  background-color: #262626;
+  color: #f4f4f4;
+}
+
+.code-override .bx--copy-btn:hover,
+.code-override button.bx--btn.bx--snippet-btn--expand:hover {
+  background-color: #393939;
+}
+
+.code-override .bx--snippet__icon {
+  fill: #f4f4f4;
+}
+
+.code-override .bx--snippet-container pre {
+  font-size: var(--cds-code-02-font-size);
+  line-height: var(--cds-code-02-line-height);
+  letter-spacing: var(--cds-code-02-letter-spacing);
+  cursor: text;
+}
+
+.code-override .bx--snippet--multi .bx--snippet-container pre {
+  overflow-x: auto;
+}
+
+.token.tag,
+.token.operator {
+  color: #6ea6ff;
+}
+
+.token.attr-name {
+  color: #3ddbd9; /* teal 30 */
+}
+
+.token.function {
+  color: #9ef0f0;
+}
+
+.token.token.language-javascript,
+.token.attr-value {
+  color: #d4bbff; /* purple 30 */
+}
+
+.token.keyword {
+  color: #bb8eff;
+}
+
+.token.punctuation {
+  color: #a8a8a8; /* gray 40 */
+}
+
+.token.script .token.language-javascript {
+  color: #3ddbd9; /* teal 30 */
+}
+
+.token.string {
+  color: #fa75a6;
+}
+
+.token.boolean {
+  color: #bb8eff;
+}
+
+.token.number {
+  color: #a7f0ba;
+}
+
+.token.comment {
+  color: #bebebe;
+}
+
+.override-tabs a.bx--tabs__nav-link,
+.override-tabs a.bx--tabs__nav-link:focus,
+.override-tabs a.bx--tabs__nav-link:active {
+  width: auto !important;
+}
+
+#select-theme {
+  width: auto;
+}
+
+.prose > p > .bx--link {
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.prose .toc {
+  margin-bottom: var(--cds-layout-01);
+}
+
+.table {
+  position: sticky;
+  max-height: calc(100vh - 3rem);
+  top: 3rem;
+  padding-top: var(--cds-spacing-05);
+  padding-bottom: var(--cds-spacing-05);
+  padding-left: var(--cds-spacing-08);
+  overflow-y: auto;
+}
+
+[data-components] {
+  z-index: 2;
+  position: relative;
+  display: flex;
+}
+
+[data-components] .bx--grid {
+  width: 100%;
+}
+
+@media (max-width: 1056px) {
+  .table {
+    display: none;
+  }
+}
+
+.preview-viewer > .bx--aspect-ratio,
+.preview-viewer [data-outline] {
+  outline: 1px solid var(--cds-interactive-04);
+}
+
+[data-outline] {
+  position: relative;
+}
+
+[data-outline] ~ [data-outline] {
+  margin-top: var(--cds-spacing-08);
+}
+
+#select-theme {
+  width: auto;
+}
+
+.prose > p > .bx--link {
+  font-size: inherit;
+}
+
+.prose .toc {
+  margin-bottom: var(--cds-layout-01);
+}
+
+.table {
+  position: sticky;
+  max-height: calc(100vh - 3rem);
+  top: 3rem;
+  padding-top: var(--cds-spacing-05);
+  padding-bottom: var(--cds-spacing-05);
+  padding-left: var(--cds-spacing-08);
+  overflow-y: auto;
+}
+
+.bx--side-nav__overlay-active {
+  z-index: calc(10 + 1); /** supersede the z-index of code snippets */
+}
+
+.body-short-01 {
+  font-size: var(--cds-body-short-01-font-size);
+  font-weight: var(--cds-body-short-01-font-weight);
+  letter-spacing: var(--cds-body-short-01-letter-spacing);
+  line-height: var(--cds-body-short-01-line-height);
+}
+
+.bx--col > h1 {
+  font-size: var(--cds-display-01-font-size);
+  font-weight: var(--cds-display-01-font-weight);
+  letter-spacing: var(--cds-display-01-letter-spacing);
+  line-height: var(--cds-display-01-line-height);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.big-paragraph {
+  font-size: var(--cds-expressive-heading-03-font-size);
+  font-weight: var(--cds-expressive-heading-03-font-weight);
+  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+  line-height: var(--cds-expressive-heading-03-line-height);
+  margin-top: var(--cds-layout-03);
+  margin-bottom: var(--cds-layout-06);
+}
+
+.big-link,
+.bx--col > .big-paragraph > code {
+  font-size: var(--cds-expressive-heading-03-font-size);
+  font-weight: var(--cds-expressive-heading-03-font-weight);
+  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+  line-height: var(--cds-expressive-heading-03-line-height);
+}
+
+.bx--col > p {
+  max-width: 44rem;
+}
+
+.bx--col > p > code {
+  font-size: var(--cds-code-02-font-size);
+  font-weight: var(--cds-code-02-font-weight);
+  line-height: var(--cds-code-02-line-height);
+  letter-spacing: var(--cds-code-02-letter-spacing);
+  background-color: var(--cds-ui-03);
+  border-radius: 0.25rem;
+  padding: 0 var(--cds-spacing-02);
+}
+
+.bx--col > h2 {
+  font-size: var(--cds-expressive-heading-05-font-size);
+  font-weight: var(--cds-expressive-heading-05-font-weight);
+  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+  line-height: var(--cds-expressive-heading-05-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h3 {
+  font-size: var(--cds-expressive-heading-04-font-size);
+  font-weight: var(--cds-expressive-heading-04-font-weight);
+  letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
+  line-height: var(--cds-expressive-heading-04-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h4 {
+  font-size: var(--cds-expressive-heading-02-font-size);
+  font-weight: var(--cds-expressive-heading-02-font-weight);
+  letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
+  line-height: var(--cds-expressive-heading-02-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > p {
+  margin-bottom: var(--cds-layout-02);
+}
+
+main.bx--content {
+  min-height: calc(100vh - 3rem - 3rem);
+}
+
+@media (max-width: 1056px) {
+  .bx--side-nav ~ .bx--content {
+    margin-left: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .bx--side-nav--expanded ~ .bx--content {
+    white-space: nowrap;
+    min-width: 28rem;
+  }
+}
+
+@media (min-width: 1057px) {
+  .bx--side-nav__navigation {
+    z-index: 1;
+  }
+}
+
+.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
+  max-height: 144rem;
+}
diff --git a/docs/src/index.js b/docs/src/index.js
index 57615822..67d5f68b 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,5 +1,6 @@
 import App from "./App.svelte";
 import "../../css/all.css";
+import "./global.css";
 
 const app = new App({ target: document.body });
 
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 57e33f97..1efd7692 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -149,36 +149,7 @@
   </Column>
 </Content>
 
-<style global>
-  .override-tabs a.bx--tabs__nav-link,
-  .override-tabs a.bx--tabs__nav-link:focus,
-  .override-tabs a.bx--tabs__nav-link:active {
-    width: auto !important;
-  }
-
-  #select-theme {
-    width: auto;
-  }
-
-  .prose > p > .bx--link {
-    font-size: inherit;
-    text-decoration: underline;
-  }
-
-  .prose .toc {
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .table {
-    position: sticky;
-    max-height: calc(100vh - 3rem);
-    top: 3rem;
-    padding-top: var(--cds-spacing-05);
-    padding-bottom: var(--cds-spacing-05);
-    padding-left: var(--cds-spacing-08);
-    overflow-y: auto;
-  }
-
+<style>
   .bar {
     display: flex;
     justify-content: space-between;
@@ -186,16 +157,6 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
-  [data-components] {
-    z-index: 2;
-    position: relative;
-    display: flex;
-  }
-
-  [data-components] .bx--grid {
-    width: 100%;
-  }
-
   .toc h5 {
     margin-bottom: var(--cds-spacing-03);
   }
@@ -205,25 +166,8 @@
   }
 
   @media (max-width: 1056px) {
-    .table {
-      display: none;
-    }
-
     .toc.mobile {
       display: block;
     }
   }
-
-  .preview-viewer > .bx--aspect-ratio,
-  .preview-viewer [data-outline] {
-    outline: 1px solid var(--cds-interactive-04);
-  }
-
-  [data-outline] {
-    position: relative;
-  }
-
-  [data-outline] ~ [data-outline] {
-    margin-top: var(--cds-spacing-08);
-  }
 </style>
diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte
index bb47af2d..1122660a 100644
--- a/docs/src/layouts/Recipe.svelte
+++ b/docs/src/layouts/Recipe.svelte
@@ -64,29 +64,7 @@
   </Column>
 </Content>
 
-<style global>
-  #select-theme {
-    width: auto;
-  }
-
-  .prose > p > .bx--link {
-    font-size: inherit;
-  }
-
-  .prose .toc {
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .table {
-    position: sticky;
-    max-height: calc(100vh - 3rem);
-    top: 3rem;
-    padding-top: var(--cds-spacing-05);
-    padding-bottom: var(--cds-spacing-05);
-    padding-left: var(--cds-spacing-08);
-    overflow-y: auto;
-  }
-
+<style>
   .bar {
     display: flex;
     justify-content: space-between;
@@ -94,16 +72,6 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
-  [data-components] {
-    z-index: 2;
-    position: relative;
-    display: flex;
-  }
-
-  [data-components] .bx--grid {
-    width: 100%;
-  }
-
   .toc h5 {
     margin-bottom: var(--cds-spacing-03);
   }
@@ -113,10 +81,6 @@
   }
 
   @media (max-width: 1056px) {
-    .table {
-      display: none;
-    }
-
     .toc.mobile {
       display: block;
     }
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index bfb82219..d5eb9632 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -146,105 +146,7 @@
   <slot />
 </Theme>
 
-<style global>
-  .bx--side-nav__overlay-active {
-    z-index: calc(10 + 1); /** supersede the z-index of code snippets */
-  }
-
-  .body-short-01 {
-    font-size: var(--cds-body-short-01-font-size);
-    font-weight: var(--cds-body-short-01-font-weight);
-    letter-spacing: var(--cds-body-short-01-letter-spacing);
-    line-height: var(--cds-body-short-01-line-height);
-  }
-
-  .bx--col > h1 {
-    font-size: var(--cds-display-01-font-size);
-    font-weight: var(--cds-display-01-font-weight);
-    letter-spacing: var(--cds-display-01-letter-spacing);
-    line-height: var(--cds-display-01-line-height);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .big-paragraph {
-    font-size: var(--cds-expressive-heading-03-font-size);
-    font-weight: var(--cds-expressive-heading-03-font-weight);
-    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-    line-height: var(--cds-expressive-heading-03-line-height);
-    margin-top: var(--cds-layout-03);
-    margin-bottom: var(--cds-layout-06);
-  }
-
-  .big-link,
-  .bx--col > .big-paragraph > code {
-    font-size: var(--cds-expressive-heading-03-font-size);
-    font-weight: var(--cds-expressive-heading-03-font-weight);
-    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-    line-height: var(--cds-expressive-heading-03-line-height);
-  }
-
-  .bx--col > p {
-    max-width: 44rem;
-  }
-
-  .bx--col > p > code {
-    font-size: var(--cds-code-02-font-size);
-    font-weight: var(--cds-code-02-font-weight);
-    line-height: var(--cds-code-02-line-height);
-    letter-spacing: var(--cds-code-02-letter-spacing);
-    background-color: var(--cds-ui-03);
-    border-radius: 0.25rem;
-    padding: 0 var(--cds-spacing-02);
-  }
-
-  .bx--col > h2 {
-    font-size: var(--cds-expressive-heading-05-font-size);
-    font-weight: var(--cds-expressive-heading-05-font-weight);
-    letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-    line-height: var(--cds-expressive-heading-05-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > h3 {
-    font-size: var(--cds-expressive-heading-04-font-size);
-    font-weight: var(--cds-expressive-heading-04-font-weight);
-    letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
-    line-height: var(--cds-expressive-heading-04-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > h4 {
-    font-size: var(--cds-expressive-heading-02-font-size);
-    font-weight: var(--cds-expressive-heading-02-font-weight);
-    letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
-    line-height: var(--cds-expressive-heading-02-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > p {
-    margin-bottom: var(--cds-layout-02);
-  }
-
-  main.bx--content {
-    min-height: calc(100vh - 3rem - 3rem);
-  }
-
-  @media (max-width: 1056px) {
-    .bx--side-nav ~ .bx--content {
-      margin-left: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    .bx--side-nav--expanded ~ .bx--content {
-      white-space: nowrap;
-      min-width: 28rem;
-    }
-  }
-
+<style>
   .platform-name {
     display: flex;
     align-items: baseline;
@@ -264,14 +166,4 @@
       display: none;
     }
   }
-
-  @media (min-width: 1057px) {
-    .bx--side-nav__navigation {
-      z-index: 1;
-    }
-  }
-
-  .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
-    max-height: 144rem;
-  }
 </style>
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index c292634b..64122ac3 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -128,20 +128,18 @@ const NODE_ENV = process.env.NODE_ENV || "production";
 module.exports = {
   extensions: [".svelte", ".svx"],
   preprocess: [
-    require("svelte-preprocess")({
-      typescript: false,
-      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"],
-          }),
-        ],
+    {
+      markup: ({ filename, content }) => {
+        if (/node_modules/.test(filename) || !filename.endsWith(".svelte"))
+          return;
+        return {
+          code: content.replace(
+            /process.env.VERSION/g,
+            JSON.stringify(pkg.version)
+          ),
+        };
       },
-    }),
+    },
     mdsvex({
       remarkPlugins: [plugin, slug, carbonify],
       layout: {
diff --git a/examples/sapper/src/routes/_error.svelte b/examples/sapper/src/routes/_error.svelte
index b84c4deb..c906c6f1 100644
--- a/examples/sapper/src/routes/_error.svelte
+++ b/examples/sapper/src/routes/_error.svelte
@@ -1,8 +1,6 @@
 <script>
   export let status;
   export let error;
-
-  const dev = process.env.NODE_ENV === "development";
 </script>
 
 <svelte:head>
@@ -12,7 +10,3 @@
 <h1>{status}</h1>
 
 <p>{error.message}</p>
-
-{#if dev && error.stack}
-  <pre>{error.stack}</pre>
-{/if}