3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-02 17:41:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Change css modules resolving

Browse source
This commit is contained in:
alonso.torres 2023-11-30 00:12:10 +01:00
parent 3d5fd49b2e
commit 727d3cfb77
2 changed files with 43 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/gulpfile.js
View file

@ -1,6 +1,7 @@
const fs = require("fs");
const l = require("lodash");
const path = require("path");
const stringHash = require("string-hash");
const gulp = require("gulp");
const gulpConcat = require("gulp-concat");
@ -12,6 +13,7 @@ const gulpSass = require("gulp-sass")(require("sass"));
const svgSprite = require("gulp-svg-sprite");
const rename = require("gulp-rename");
const autoprefixer = require("autoprefixer");
const modules = require("postcss-modules");
@ -29,12 +31,13 @@ paths.resources = "./resources/";
paths.output = "./resources/public/";
paths.dist = "./target/dist/";
const touchSourceOnStyleChange = false;
/***********************************************
* Marked Extensions
***********************************************/
// Name of Penpot's top level package
const ROOT_NAME = "app";
const renderer = {
link(href, title, text) {
return `<a href="${href}" target="_blank">${text}</a>`;
@ -223,7 +226,18 @@ gulp.task("scss:modules", function () {
.pipe(
gulpPostcss([
modules({
generateScopedName: "[folder]_[name]_[local]_[hash:base64:5]",
getJSON: function (cssFileName, json, outputFileName) {
// We do nothing because we don't want the generated JSON files
},
// Calculates the whole css-module selector name.
// Should be the same as the one in the file `/src/app/main/style.clj`
generateScopedName: function (selector, filename, css) {
const dir = path.dirname(filename);
const name = path.basename(filename, ".css");
const parts = dir.split("/");
const rootIdx = parts.findIndex(s => s === ROOT_NAME);
return parts.slice(rootIdx + 1).join("_") + "_" + name + "__" + selector;
},
}),
autoprefixer(),
]),
@ -350,13 +364,6 @@ gulp.task("dev:dirs", async function (next) {
gulp.task("watch:main", function () {
const watchTask = gulp.watch("src/**/**.scss", gulp.series("scss"));
if (touchSourceOnStyleChange) {
watchTask.on("change", function (path) {
// Replace ".scss" for ".cljs" to refresh the file
gulp.src(path.replace(".scss", ".cljs")).pipe(touch());
});
}
gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));