feat(styles): support scoped styles

examples/rollup/src/App.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "./DynamicImport.svelte";
+  import ScopedStyles from "./ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/rollup/src/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

examples/routify/src/components/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

examples/routify/src/routes/index.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "../components/DynamicImport.svelte";
+  import ScopedStyles from "../components/ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/sveltekit/src/lib/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

examples/sveltekit/src/routes/+page.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "$lib/DynamicImport.svelte";
+  import ScopedStyles from "$lib/ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/vite/src/App.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "./DynamicImport.svelte";
+  import ScopedStyles from "./ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/vite/src/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

examples/vite@svelte-5/src/App.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "./DynamicImport.svelte";
+  import ScopedStyles from "./ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/vite@svelte-5/src/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

examples/webpack/src/App.svelte

@@ -3,6 +3,7 @@
   import typescript from "svelte-highlight/languages/typescript";
   import atomOneDark from "svelte-highlight/styles/atom-one-dark";
   import DynamicImport from "./DynamicImport.svelte";
+  import ScopedStyles from "./ScopedStyles.svelte";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -14,3 +15,5 @@
 <Highlight language={typescript} {code} />
 
 <DynamicImport />
+
+<ScopedStyles />

examples/webpack/src/ScopedStyles.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
+  import github from "svelte-highlight/styles/github.scoped";
+  import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html github}
+  {@html atomOneDark}
+  {@html blackMetalDarkFuneral}
+</svelte:head>
+
+<Highlight class="github" language={typescript} {code} />
+
+<Highlight class="atomOneDark" language={typescript} {code} />
+
+<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

scripts/build-styles.ts

@@ -1,33 +1,39 @@
 import { $, Glob } from "bun";
 import path from "node:path";
+import postcss from "postcss";
 import { createMarkdown } from "./utils/create-markdown";
-import { minifyCss } from "./utils/minify-css";
+import { minifyCss, minifyPreset } from "./utils/minify-css";
+import { pluginScopedStyles } from "./utils/plugin-scoped-styles";
 import { toCamelCase } from "./utils/to-pascal-case";
 import { writeTo } from "./utils/write-to";
-import postcss from "postcss";
+
+const preserveLicenseComments = {
+  // Preserve license comments.
+  remove: (comment: string) => !/(License|Author)/i.test(comment),
+} as const;
 
 const createScopedStyles = (props: { source: string; moduleName: string }) => {
   const { source, moduleName } = props;
 
   return postcss([
-    {
-      postcssPlugin: "postcss-plugin:scoped-styles",
-      Once(root) {
-        root.walkRules((rule) => {
-          rule.selectors = rule.selectors.map((selector) => {
-            if (/^pre /.test(selector)) {
-              selector = `pre.${moduleName}${selector.replace(/^pre /, " ")}`;
-            } else {
-              selector = `.${moduleName} ${selector}`;
-            }
-            return selector;
-          });
-        });
-      },
-    },
+    pluginScopedStyles({ moduleName }),
+    ...minifyPreset(preserveLicenseComments),
   ]).process(source).css;
 };
 
+const createJsStyles = (props: { moduleName: string; content: string }) => {
+  const { moduleName, content } = props;
+
+  const css = minifyCss(
+    // Escape backticks for JS template literal.
+    content.replace(/\`/g, "\\`"),
+    preserveLicenseComments,
+  );
+
+  return `const ${moduleName} = \`<style>${css}</style>\`;\n
+      export default ${moduleName};\n`;
+};
+
 export type ModuleNames = Array<{ name: string; moduleName: string }>;
 
 export async function buildStyles() {
@@ -61,22 +67,10 @@ export async function buildStyles() {
       const content = await Bun.file(absPath).text();
       const css_minified = minifyCss(content);
 
-      // Escape backticks for JS template literal.
-      const content_css_for_js = minifyCss(content.replace(/\`/g, "\\`"), {
-        remove: (comment) => {
-          if (/(License|Author)/i.test(comment)) {
-            // Preserve license comments.
-            return false;
-          }
-
-          return true;
-        },
-      });
-
-      const exportee = `const ${moduleName} = \`<style>${content_css_for_js}</style>\`;\n
-      export default ${moduleName};\n`;
-
-      await writeTo(`src/styles/${name}.js`, exportee);
+      await writeTo(
+        `src/styles/${name}.js`,
+        createJsStyles({ moduleName, content }),
+      );
       await writeTo(
         `src/styles/${name}.d.ts`,
         `export { ${moduleName} as default } from "./";\n`,
@@ -85,6 +79,17 @@ export async function buildStyles() {
 
       const scoped_style = createScopedStyles({ source: content, moduleName });
 
+      await writeTo(
+        `src/styles/${name}.scoped.js`,
+        createJsStyles({ moduleName, content: scoped_style }),
+      );
+      await writeTo(
+        `src/styles/${name}.scoped.d.ts`,
+        `export { ${moduleName} as default } from "./";\n`,
+      );
+
+      await writeTo(`src/styles/${name}.scoped.css`, scoped_style);
+
       scoped_styles += scoped_style;
     } else {
       // Copy over other file types, like images.
@@ -144,6 +149,8 @@ export async function buildStyles() {
 
   // Don't format metadata used in docs.
   await Bun.write("www/data/styles.json", JSON.stringify(styles));
+
+  // For performance, a dedictated CSS file is used for scoped styles in docs.
   await Bun.write(
     "www/data/scoped-styles.css",
     minifyCss(scoped_styles, { removeAll: true }),

scripts/utils/minify-css.ts

@@ -2,11 +2,13 @@ import cssnano from "cssnano";
 import litePreset, { type LiteOptions } from "cssnano-preset-lite";
 import postcss from "postcss";
 
+export const minifyPreset = (
+  discardComments?: LiteOptions["discardComments"],
+) => [cssnano({ preset: litePreset({ discardComments }) })];
+
 export const minifyCss = (
   css: string,
   discardComments?: LiteOptions["discardComments"],
 ) => {
-  return postcss([
-    cssnano({ preset: litePreset({ discardComments }) }),
-  ]).process(css).css;
+  return postcss(minifyPreset(discardComments)).process(css).css;
 };

scripts/utils/plugin-scoped-styles.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from "postcss";
+
+const RE_PRE = /^pre /;
+
+export function pluginScopedStyles({
+  moduleName,
+}: {
+  moduleName: string;
+}): Plugin {
+  return {
+    postcssPlugin: "postcss-plugin:scoped-styles",
+    Once(root) {
+      root.walkRules((rule) => {
+        rule.selectors = rule.selectors.map((selector) => {
+          if (RE_PRE.test(selector)) {
+            selector = `pre.${moduleName}${selector.replace(RE_PRE, " ")}`;
+          } else {
+            selector = `.${moduleName} ${selector}`;
+          }
+
+          return selector;
+        });
+      });
+    },
+  };
+};