diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index 4dfd8bc86..a445e1bf6 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -12,6 +12,8 @@ const gulpSass = require("gulp-sass")(require("sass"));
const svgSprite = require("gulp-svg-sprite");
const autoprefixer = require("autoprefixer")
+const modules = require("postcss-modules");
+
const clean = require("postcss-clean");
const mkdirp = require("mkdirp");
const rimraf = require("rimraf");
@@ -159,7 +161,7 @@ function templatePipeline(options) {
const tmpl = gulpMustache({
ts: ts,
- th: th,
+ // th: th,
manifest: manifest,
translations: JSON.stringify(locales),
themes: JSON.stringify(themes),
@@ -179,16 +181,36 @@ function templatePipeline(options) {
gulpSass.compiler = sass;
-gulp.task("scss", function() {
+gulp.task("scss:modules", function() {
+ return gulp.src(["src/**/**.scss"])
+ .pipe(gulpSass.sync().on('error', gulpSass.logError))
+ .pipe(gulpPostcss([
+ modules({
+ generateScopedName: "[folder]_[name]_[local]_[hash:base64:5]",
+ }),
+ autoprefixer(),
+ ]))
+ .pipe(gulp.dest(paths.output + "css/"));
+});
+
+gulp.task("scss:main", function() {
return gulp.src(paths.resources + "styles/main-default.scss")
.pipe(gulpSass.sync().on('error', gulpSass.logError))
.pipe(gulpPostcss([
autoprefixer,
- // clean({format: "keep-breaks", level: 1})
]))
.pipe(gulp.dest(paths.output + "css/"));
});
+gulp.task("scss:concat", function() {
+ return gulp.src([paths.output + "css/main-default.css",
+ paths.output + "css/app/**/*.css"])
+ .pipe(gulpConcat("main.css"))
+ .pipe(gulp.dest(paths.output + "css/"));
+});
+
+gulp.task("scss", gulp.series("scss:main", "scss:modules", "scss:concat"));
+
gulp.task("svg:sprite:icons", function() {
return gulp.src(paths.resources + "images/icons/*.svg")
.pipe(gulpRename({prefix: "icon-"}))
@@ -250,6 +272,7 @@ gulp.task("dev:dirs", async function(next) {
});
gulp.task("watch:main", function() {
+ gulp.watch("src/**/**.scss", gulp.series("scss"));
gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));
diff --git a/frontend/package.json b/frontend/package.json
index 7bc107fd6..4a3d1353e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -62,6 +62,7 @@
"luxon": "^3.1.1",
"mousetrap": "^1.6.5",
"opentype.js": "^1.3.4",
+ "postcss-modules": "^6.0.0",
"randomcolor": "^0.6.2",
"react": "~17.0.2",
"react-dom": "~17.0.2",
diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache
index da7083dd3..7e9b555a9 100644
--- a/frontend/resources/templates/index.mustache
+++ b/frontend/resources/templates/index.mustache
@@ -16,7 +16,7 @@
-
+
diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj
new file mode 100644
index 000000000..82dd96a47
--- /dev/null
+++ b/frontend/src/app/main/style.clj
@@ -0,0 +1,21 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.style
+ "A fonts loading macros."
+ (:require
+ [app.common.data :as d]
+ [clojure.data.json :as json]))
+
+(defmacro css
+ [selector]
+ (let [;; Get the associated styles will be module.cljs => module.css.json
+ filename (:file (meta *ns*))
+ styles-file (str "./src/" (subs filename 0 (- (count filename) 4)) "css.json")
+ data (-> (slurp styles-file)
+ (json/read-str))
+ result (get data (d/name selector))]
+ `~result))
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 85ebdab8f..3b15048ed 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -448,7 +448,7 @@
(assert (even? (count params)))
(str/join " " (reduce (fn [acc [k v]]
(if (true? (boolean v))
- (conj acc (name k))
+ (conj acc (d/name k))
acc))
[]
(partition 2 params))))
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4a2d2502a..122df5776 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1281,6 +1281,11 @@ css@^3.0.0:
source-map "^0.6.1"
source-map-resolve "^0.6.0"
+cssesc@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+ integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
cssmin@^0.4.3:
version "0.4.3"
resolved "https://registry.yarnpkg.com/cssmin/-/cssmin-0.4.3.tgz#c9194077e0ebdacd691d5f59015b9d819f38d015"
@@ -2113,6 +2118,13 @@ function-bind@^1.1.1:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+generic-names@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-4.0.0.tgz#0bd8a2fd23fe8ea16cbd0a279acd69c06933d9a3"
+ integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==
+ dependencies:
+ loader-utils "^3.2.0"
+
get-caller-file@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
@@ -2572,6 +2584,11 @@ iconv-lite@^0.6.2:
dependencies:
safer-buffer ">= 2.1.2 < 3.0.0"
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+ integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
ieee754@^1.1.13, ieee754@^1.1.4:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -3235,6 +3252,11 @@ load-json-file@^4.0.0:
pify "^3.0.0"
strip-bom "^3.0.0"
+loader-utils@^3.2.0:
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576"
+ integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
+
locate-path@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -3242,6 +3264,11 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
+lodash.camelcase@^4.3.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+ integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
lodash.clonedeep@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -4121,7 +4148,57 @@ postcss-load-config@^3.0.0:
lilconfig "^2.0.4"
yaml "^1.10.2"
-postcss-value-parser@^4.2.0:
+postcss-modules-extract-imports@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+ integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+ integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+ dependencies:
+ icss-utils "^5.0.0"
+ postcss-selector-parser "^6.0.2"
+ postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+ integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+ dependencies:
+ postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+ integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+ dependencies:
+ icss-utils "^5.0.0"
+
+postcss-modules@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-6.0.0.tgz#cac283dbabbbdc2558c45391cbd0e2df9ec50118"
+ integrity sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==
+ dependencies:
+ generic-names "^4.0.0"
+ icss-utils "^5.1.0"
+ lodash.camelcase "^4.3.0"
+ postcss-modules-extract-imports "^3.0.0"
+ postcss-modules-local-by-default "^4.0.0"
+ postcss-modules-scope "^3.0.0"
+ postcss-modules-values "^4.0.0"
+ string-hash "^1.1.1"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+ version "6.0.11"
+ resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+ integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+ dependencies:
+ cssesc "^3.0.0"
+ util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -5024,6 +5101,11 @@ stream-to-array@^2.3.0:
dependencies:
any-promise "^1.1.0"
+string-hash@^1.1.1:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+ integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
+
string-width@^1.0.1, string-width@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -5530,7 +5612,7 @@ use@^3.1.0:
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=