Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

✨ Watch css assets specifically for storybook

Browse source
This commit is contained in:
Belén Albeza 2024-08-01 15:06:04 +02:00
parent 8bcc2a4932
commit 7cdfd5a6d3
2 changed files with 88 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/package.json
View file

@ -34,11 +34,12 @@
"compile:cljs": "clojure -M:dev:shadow-cljs compile main",
"compile:storybook": "node ./scripts/compile-storybook.js",
"watch": "node ./scripts/watch.js",
"watch:storybook": "node ./scripts/watch-storybook.js",
"e2e:server": "node ./scripts/e2e-server.js",
"e2e:test": "playwright test --project default",
"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:watch": "concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch:storybook\"",
"storybook:build": "yarn run storybook:compile && storybook build"
},
"devDependencies": {

86
frontend/scripts/watch-storybook.js Normal file
View file

@ -0,0 +1,86 @@
import fs from "node:fs/promises";
import ph from "node:path";
import log from "fancy-log";
import * as h from "./_helpers.js";
import ppt from "pretty-time";
const worker = h.startWorker();
let sass = null;
async function compileSassAll() {
const start = process.hrtime();
log.info("init: compile storybook styles");
sass = await h.compileSassStorybook(worker);
let output = await h.concatSass(sass);
await fs.writeFile("./resources/public/css/ds.css", output);
const end = process.hrtime(start);
log.info("done: compile storybook styles", `(${ppt(end)})`);
}
async function compileSass(path) {
const start = process.hrtime();
log.info("changed:", path);
const result = await h.compileSass(worker, path, { modules: true });
sass.index[result.outputPath] = result.css;
const output = h.concatSass(sass);
await fs.writeFile("./resources/public/css/ds.css", output);
const end = process.hrtime(start);
log.info("done:", `(${ppt(end)})`);
}
await fs.mkdir("./resources/public/css/", { recursive: true });
await compileSassAll();
await h.copyAssets();
await h.compileSvgSprites();
await h.compileTemplates();
await h.compilePolyfills();
log.info("watch: scss src (~)");
h.watch("src", h.isSassFile, async function (path) {
const isPartial = ph.basename(path).startsWith("_");
const isCommon = isPartial || ph.dirname(path).endsWith("/ds");
if (isCommon) {
await compileSassAll(path);
} else {
await compileSass(path);
}
});
log.info("watch: scss: resources (~)");
h.watch("resources/styles", h.isSassFile, async function (path) {
log.info("changed:", path);
await compileSassAll();
});
log.info("watch: templates (~)");
h.watch("resources/templates", null, async function (path) {
log.info("changed:", path);
await h.compileTemplates();
});
log.info("watch: translations (~)");
h.watch("translations", null, async function (path) {
log.info("changed:", path);
await h.compileTemplates();
});
log.info("watch: assets (~)");
h.watch(
["resources/images", "resources/fonts", "resources/plugins-runtime"],
null,
async function (path) {
log.info("changed:", path);
await h.compileSvgSprites();
await h.copyAssets();
await h.compileTemplates();
},
);
worker.terminate();