feat(docs-generator): add better support for scoped packages

Author: mlaursen

packages/docs-generator/src/utils/compileScssModule.ts

@@ -26,8 +26,11 @@ const canonicalize: Importer<"sync">["canonicalize"] = (url) => {
     return new URL("_colors.scss", `${FILE_URL}/@react-md/core/dist/`);
   }
 
-  if (url.endsWith("@react-md/code")) {
-    return new URL("_code.scss", `${FILE_URL}/@react-md/code/dist/`);
+  // NOTE: If the regexp updates, update in getScssCodeFile as well
+  const [packageName, packageScope] =
+    url.match(/@react-md\/([-a-z0-9]+)$/) || [];
+  if (packageScope) {
+    return new URL(`_${packageScope}.scss`, `${FILE_URL}/${packageName}/dist/`);
   }
 
   let urlWithExtension = url;

packages/docs-generator/src/utils/getScssCodeFile.ts

@@ -8,24 +8,24 @@ import { getProjectRootDir } from "./getProjectRootDir.js";
 
 const rootDir = getProjectRootDir();
 const packagesDir = resolve(rootDir, "packages");
-const coreRoot = resolve(packagesDir, "core");
-const codeRoot = resolve(packagesDir, "code");
 const docsRoot = resolve(rootDir, "apps", "docs");
 
 export function loadDemoScssInNode(fileUrl: string): string {
   const url = fileUrl.replace(FILE_URL, "");
 
-  let filePath: string;
+  let filePath = url;
   if (url.startsWith("/docs")) {
     const name = url.replace("/docs/", "");
 
     filePath = join(docsRoot, name);
-  } else if (url.includes("/code/")) {
-    const name = url.replace("/@react-md/code/", "");
-    filePath = join(codeRoot, name);
   } else {
-    const name = url.replace("/@react-md/core/", "");
-    filePath = join(coreRoot, name);
+    // NOTE: If the regexp updates, update in compileScssModule as well
+    const [packageName = "", packageScope = ""] =
+      url.match(/\/@react-md\/([-a-z0-9]+)\//) || [];
+    if (packageScope) {
+      const name = url.replace(packageName, "");
+      filePath = join(packagesDir, packageScope, name);
+    }
   }
 
   return readFileSync(filePath, "utf8");