✨ Change css modules resolving

frontend/gulpfile.js

@@ -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"));
 

frontend/src/app/main/style.clj

@@ -11,9 +11,25 @@
    [clojure.core :as c]
    [clojure.data.json :as json]
    [clojure.java.io :as io]
+   [cuerdas.core :as str]
    [rumext.v2.util :as mfu]))
 
-(def ^:dynamic *css-data* nil)
+;; Should coincide with the `ROOT_NAME` constant in gulpfile.js
+(def ROOT-NAME "app")
+
+(def ^:dynamic *css-prefix* nil)
+
+(defn get-prefix
+  ;; Calculates the css-modules prefix given the filename
+  ;; should be the same as the calculation inside the `gulpfile.js`
+  [fname]
+  (let [file (io/file fname)
+        parts
+        (->> (str/split (.getParent file) #"/")
+             (drop-while #(not= % ROOT-NAME))
+             (rest)
+             (str/join "_"))]
+    (str parts "_" (subs (.getName file) 0 (- (count (.getName file)) 5)) "__")))
 
 (def ^:private xform-css
   (keep (fn [k]
@@ -22,9 +38,8 @@
            (let [knm (name k)
                  kns (namespace k)]
              (case kns
-               "global"  knm
-               "old-css" (if (nil? *css-data*) knm "")
-               (or (get *css-data* (keyword knm)) (str "_not_found_" knm))))
+               "global" knm
+               (str *css-prefix* knm)))
 
            (string? k)
            k))))
@@ -49,14 +64,13 @@
   all classes with space in the same way as `css*`."
   [& selectors]
   (let [fname (-> *ns* meta :file)
-        path  (str (subs fname 0 (- (count fname) 4)) "css.json")
-        data  (read-json-file path)]
+        prefix (get-prefix fname)]
     (if (symbol? (first selectors))
       `(if ~(with-meta (first selectors) {:tag 'boolean})
-         (css* ~@(binding [*css-data* data]
+         (css* ~@(binding [*css-prefix* prefix]
                    (into [] xform-css (rest selectors))))
          (css* ~@(rest selectors)))
-      `(css* ~@(binding [*css-data* data]
+      `(css* ~@(binding [*css-prefix* prefix]
                  (into [] xform-css selectors))))))
 
 (defmacro styles
@@ -76,8 +90,7 @@
                              kns (namespace k)]
                          (case kns
                            "global"  knm
-                           "old-css" (if (nil? *css-data*) knm "")
-                           (or (get *css-data* (keyword knm)) knm)))
+                           (str *css-prefix* knm)))
 
                        (string? k)
                        k)]
@@ -95,7 +108,6 @@
 ;;
 ;;  (stl/css-case new-css-system
 ;;                :left-settings-bar    true
-;;                :old-css/settings-bar true
 ;;                :global/two-row       (<= size 300))
 ;;
 ;; The first argument to the `css-case` macro is optional an if you don't
@@ -118,17 +130,16 @@
 (defmacro css-case
   [& params]
   (let [fname (-> *ns* meta :file)
-        path  (str (subs fname 0 (- (count fname) 4)) "css.json")
-        data  (read-json-file path)]
+        prefix (get-prefix fname)]
 
     (if (symbol? (first params))
       `(if ~(with-meta (first params) {:tag 'boolean})
-         ~(binding [*css-data* data]
+         ~(binding [*css-prefix* prefix]
             (-> (into [] xform-css-case (rest params))
                 (mfu/compile-concat :safe? false)))
          ~(-> (into [] xform-css-case (rest params))
               (mfu/compile-concat :safe? false)))
-      `~(binding [*css-data* data]
+      `~(binding [*css-prefix* prefix]
           (-> (into [] xform-css-case params)
               (mfu/compile-concat  :safe? false))))))