✨ Compile storybook target in release and a separate DS stylesheet

frontend/.storybook/preview-head.html

@@ -1,4 +1,4 @@
-<link href="/css/main.css" rel="stylesheet" type="text/css" />
+<link href="/css/ds.css" rel="stylesheet" type="text/css" />
 <style>
   body {
     overflow-y: scroll;

frontend/package.json

@@ -32,11 +32,11 @@
     "translations:find-unused": "node ./scripts/find-unused-translations.js",
     "compile": "node ./scripts/compile.js",
     "compile:cljs": "clojure -M:dev:shadow-cljs compile main",
+    "compile:storybook": "node ./scripts/compile-storybook.js",
     "watch": "node ./scripts/watch.js",
     "e2e:server": "node ./scripts/e2e-server.js",
     "e2e:test": "playwright test --project default",
-    "storybook:compile": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook",
-    "storybook:release": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook && yarn run storybook build",
+    "storybook:compile": "yarn run compile:storybook && clojure -M:dev:shadow-cljs release storybook",
     "storybook:server": "yarn run storybook dev -p 6006 --no-open",
     "storybook:watch": "concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch\"",
     "storybook:build": "yarn run storybook:compile && storybook build"

frontend/scripts/_helpers.js

@@ -82,6 +82,31 @@ export async function compileSassDebug(worker) {
   return `${result.css}\n`;
 }
 
+export async function compileSassStorybook(worker) {
+  const limitFn = pLimit(4);
+  const sourceDir = ph.join("src", "app", "main", "ui", "ds");
+
+  const dsFiles = (await fs.readdir(sourceDir, { recursive: true }))
+    .filter(isSassFile)
+    .map((filename) => ph.join(sourceDir, filename));
+  const procs = [compileSass(worker, "resources/styles/main-default.scss", {})];
+
+  for (let path of dsFiles) {
+    const proc = limitFn(() => compileSass(worker, path, { modules: true }));
+    procs.push(proc);
+  }
+
+  const result = await Promise.all(procs);
+  return result.reduce(
+    (acc, item) => {
+      acc.index[item.outputPath] = item.css;
+      acc.items.push(item.outputPath);
+      return acc;
+    },
+    { index: {}, items: [] },
+  );
+}
+
 export async function compileSassAll(worker) {
   const limitFn = pLimit(4);
   const sourceDir = "src";
@@ -394,6 +419,22 @@ async function generateTemplates() {
   await fs.writeFile("./resources/public/rasterizer.html", content);
 }
 
+export async function compileStorybookStyles() {
+  const worker = startWorker();
+  const start = process.hrtime();
+
+  log.info("init: compile storybook styles");
+  let result = await compileSassStorybook(worker);
+  result = concatSass(result);
+
+  await fs.mkdir("./resources/public/css", { recursive: true });
+  await fs.writeFile("./resources/public/css/ds.css", result);
+
+  const end = process.hrtime(start);
+  log.info("done: compile storybook styles", `(${ppt(end)})`);
+  worker.terminate();
+}
+
 export async function compileStyles() {
   const worker = startWorker();
   const start = process.hrtime();

frontend/scripts/compile-storybook.js

@@ -0,0 +1,7 @@
+import * as h from "./_helpers.js";
+
+await h.compileStorybookStyles();
+await h.copyAssets();
+await h.compileSvgSprites();
+await h.compileTemplates();
+await h.compilePolyfills();

frontend/shadow-cljs.edn

@@ -93,7 +93,7 @@
     {:entries []}
 
     :components
-    {:exports {:default app.main.ui.ds/default}
+    {:exports {default app.main.ui.ds/default}
      :depends-on #{:base}}}
 
    :compiler-options