From 60d60e95723de1e3d64ebd0bdc71d3314d67875b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Mar 2022 19:58:46 +0530 Subject: [PATCH] WIP --- package.json | 5 +- postcss/css-compile-variables.js | 87 ++++++++++++++++++++++++++++++++ yarn.lock | 30 ++++++++++- 3 files changed, 119 insertions(+), 3 deletions(-) create mode 100644 postcss/css-compile-variables.js diff --git a/package.json b/package.json index 8fa27f47..3c007244 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "acorn": "^8.6.0", "acorn-walk": "^8.2.0", "aes-js": "^3.1.2", + "bs58": "^4.0.1", "core-js": "^3.6.5", "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush", "escodegen": "^2.0.0", @@ -45,13 +46,13 @@ "text-encoding": "^0.7.0", "typescript": "^4.3.5", "vite": "^2.6.14", - "xxhashjs": "^0.2.2", - "bs58": "^4.0.1" + "xxhashjs": "^0.2.2" }, "dependencies": { "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz", "another-json": "^0.2.0", "base64-arraybuffer": "^0.2.0", + "color": "^4.2.1", "dompurify": "^2.3.0" } } diff --git a/postcss/css-compile-variables.js b/postcss/css-compile-variables.js new file mode 100644 index 00000000..2395f87d --- /dev/null +++ b/postcss/css-compile-variables.js @@ -0,0 +1,87 @@ +import { Color } from "color"; + +let aliasMap; +let resolvedMap; +const RE_VARIABLE_VALUE = /var\((--(.+)--(.+)-(.+))\)/; + +function getValueFromAlias(alias) { + const derivedVariable = aliasMap.get(`--${alias}`); + return resolvedMap.get(derivedVariable); // what if we haven't resolved this variable yet? +} + +function resolveDerivedVariable(decl, variables) { + const matches = decl.value.match(RE_VARIABLE_VALUE); + if (matches) { + const [,wholeVariable, baseVariable, operation, argument] = matches; + if (!variables[baseVariable]) { + // hmm.. baseVariable should be in config..., maybe this is an alias? + if (!aliasMap.get(`--${baseVariable}`)) { + throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`); + } + } + switch (operation) { + case "darker": { + const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); + const newColorString = new Color(colorString).darken(argument / 100).hex(); + resolvedMap.set(wholeVariable, newColorString); + break; + } + case "lighter": { + const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); + const newColorString = new Color(colorString).lighten(argument / 100).hex(); + resolvedMap.set(wholeVariable, newColorString); + break; + } + } + } +} + +function extractAlias(decl) { + const RE_VARIABLE_PROP = /--(.+)/; + const wholeVariable = decl.value.match(RE_VARIABLE_VALUE)?.[1]; + if (RE_VARIABLE_PROP.test(decl.prop) && wholeVariable) { + aliasMap.set(decl.prop, wholeVariable); + } +} + +/* * + * @type {import('postcss').PluginCreator} + */ +module.exports = (opts = {}) => { + aliasMap = new Map(); + resolvedMap = new Map(); + const { variables } = opts; + return { + postcssPlugin: "postcss-compile-variables", + + Once(root) { + /* + Go through the CSS file once to extract all aliases. + We use the extracted alias when resolving derived variables + later. + */ + root.walkDecls(decl => extractAlias(decl)); + }, + + Declaration(declaration) { + resolveDerivedVariable(declaration, variables); + }, + + OnceExit(root, { Rule, Declaration }) { + const newRule = new Rule({ selector: ":root", source: root.source }) + // Add base css variables to :root + for (const [key, value] of Object.entries(variables)) { + const declaration = new Declaration({ prop: `--${key}`, value }); + newRule.append(declaration); + } + // Add derived css variables to :root + resolvedMap.forEach((value, key) => { + const declaration = new Declaration({ prop: key, value }); + newRule.append(declaration); + }); + root.append(newRule); + }, + }; +}; + +module.exports.postcss = true; diff --git a/yarn.lock b/yarn.lock index 87b8ef96..31dde2dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -332,11 +332,27 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@~1.1.4: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-string@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa" + integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + +color@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.1.tgz#498aee5fce7fc982606c8875cab080ac0547c884" + integrity sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colors@^1.3.3: version "1.4.0" resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" @@ -961,6 +977,11 @@ inherits@2: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-core-module@^2.2.0: version "2.5.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491" @@ -1342,6 +1363,13 @@ shebang-regex@^3.0.0: resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= + dependencies: + is-arrayish "^0.3.1" + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"