WIP
This commit is contained in:
RMidhunSuresh
parent
c09964dc30
commit
60d60e9572
3 changed files with 119 additions and 3 deletions
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
87
postcss/css-compile-variables.js
Normal file
87
postcss/css-compile-variables.js
Normal file
|
|
@ -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;
|
||||
30
yarn.lock
30
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"
|
||||
|
|
|
|||
Reference in a new issue