mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Merge pull request #3011 from penpot/alotor-poc-css-modules
✨ Adds CSS modules to the build pipeline
This commit is contained in:
Eva Marco
GitHub
commit
9d43bb4252
6 changed files with 134 additions and 7 deletions
|
|
@ -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"));
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<meta name="twitter:site" content="@penpotapp">
|
||||
<meta name="twitter:creator" content="@penpotapp">
|
||||
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
|
||||
<link id="theme" href="css/main-{{& th}}.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
|
||||
<link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
|
||||
|
||||
<link rel="icon" href="images/favicon.png" />
|
||||
|
||||
|
|
|
|||
21
frontend/src/app/main/style.clj
Normal file
21
frontend/src/app/main/style.clj
Normal file
|
|
@ -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))
|
||||
|
|
@ -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))))
|
||||
|
|
|
|||
|
|
@ -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=
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue