react-lib-tools 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/scripts/compile-examples.ts

@@ -5,7 +5,7 @@ import { syntaxHighlight } from "./utils/syntax-highlight.ts";
 import { trimExcludedText } from "./utils/examples/trimExcludedText.ts";
 
 export async function compileExamples({
-  fileExtensions = [".html", ".ts", ".tsx"],
+  fileExtensions = [".css", ".html", ".ts", ".tsx"],
   inputPath = ["src", "routes"],
   outputDirName = "examples"
 }: {
@@ -45,7 +45,9 @@ export async function compileExamples({
     }
 
     let html;
-    if (file.endsWith(".html")) {
+    if (file.endsWith(".css")) {
+      html = await syntaxHighlight(rawText, "CSS");
+    } else if (file.endsWith(".html")) {
       html = await syntaxHighlight(rawText, "HTML");
     } else if (file.endsWith(".js") || file.endsWith(".jsx")) {
       html = await syntaxHighlight(

package/scripts/utils/syntax-highlight.ts

@@ -1,3 +1,4 @@
+import { cssLanguage } from "@codemirror/lang-css";
 import { htmlLanguage } from "@codemirror/lang-html";
 import {
   jsxLanguage,
@@ -16,7 +17,7 @@ type Token = {
   value: string;
 };
 
-export type Language = "HTML" | "JS" | "JSX" | "TS" | "TSX";
+export type Language = "CSS" | "HTML" | "JS" | "JSX" | "TS" | "TSX";
 
 type State = {
   parsedTokens: Token[];
@@ -30,6 +31,11 @@ export async function syntaxHighlight(code: string, language: Language) {
   let extension: LRLanguage;
   let prettierParser: BuiltInParserName;
   switch (language) {
+    case "CSS": {
+      extension = cssLanguage.configure({ dialect: "selfClosing" });
+      prettierParser = "css";
+      break;
+    }
     case "HTML": {
       extension = htmlLanguage.configure({ dialect: "selfClosing" });
       prettierParser = "html";