Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 19:21:23 -05:00
Code Issues Activity

Merge pull request #4856 from penpot/ladybenko-8337-enable-ds-css-override

Browse source 
Enable design system CSS override + fix debug css compiling
This commit is contained in:
Eva Marco 2024-07-09 08:11:07 +02:00 • committed by GitHub
commit 2bb59671dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/scripts/_helpers.js
View file

@ -27,6 +27,8 @@ export function startWorker() {
});
}
export const isDebug = process.env.NODE_ENV !== "production";
async function findFiles(basePath, predicate, options = {}) {
predicate =
predicate ??
@ -75,20 +77,33 @@ export async function compileSass(worker, path, options) {
return worker.exec("compileSass", [path, options]);
}
export async function compileSassDebug(worker) {
const result = await compileSass(worker, "resources/styles/debug.scss", {});
return `${result.css}\n`;
}
export async function compileSassAll(worker) {
const limitFn = pLimit(4);
const sourceDir = "src";
let files = await fs.readdir(sourceDir, { recursive: true });
files = files.filter((path) => path.endsWith(".scss"));
files = files.map((path) => ph.join(sourceDir, path));
const isDesignSystemFile = (path) => {
return path.startsWith("app/main/ui/ds/");
};
const procs = [
compileSass(worker, "resources/styles/main-default.scss", {}),
compileSass(worker, "resources/styles/debug.scss", {}),
];
let files = (await fs.readdir(sourceDir, { recursive: true })).filter(
isSassFile,
);
for (let path of files) {
const appFiles = files
.filter((path) => !isDesignSystemFile(path))
.map((path) => ph.join(sourceDir, path));
const dsFiles = files
.filter(isDesignSystemFile)
.map((path) => ph.join(sourceDir, path));
const procs = [compileSass(worker, "resources/styles/main-default.scss", {})];
for (let path of [...dsFiles, ...appFiles]) {
const proc = limitFn(() => compileSass(worker, path, { modules: true }));
procs.push(proc);
}
@ -96,7 +111,7 @@ export async function compileSassAll(worker) {
const result = await Promise.all(procs);
return result.reduce(
(acc, item, index) => {
(acc, item) => {
acc.index[item.outputPath] = item.css;
acc.items.push(item.outputPath);
return acc;
@ -105,16 +120,6 @@ export async function compileSassAll(worker) {
);
}
function compare(a, b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
}
export function concatSass(data) {
const output = [];
@ -175,7 +180,7 @@ async function renderTemplate(path, context = {}, partials = {}) {
context = Object.assign({}, context, {
ts: ts,
isDebug: process.env.NODE_ENV !== "production",
isDebug,
});
return mustache.render(content, context, partials);
@ -400,6 +405,11 @@ export async function compileStyles() {
await fs.mkdir("./resources/public/css", { recursive: true });
await fs.writeFile("./resources/public/css/main.css", result);
if (isDebug) {
let debugCSS = await compileSassDebug(worker);
await fs.writeFile("./resources/public/css/debug.css", debugCSS);
}
const end = process.hrtime(start);
log.info("done: compile styles", `(${ppt(end)})`);
worker.terminate();

3
frontend/scripts/compile.js
View file

@ -1,6 +1,3 @@
import fs from "node:fs/promises";
import ppt from "pretty-time";
import log from "fancy-log";
import * as h from "./_helpers.js";
await h.compileStyles();