mystiq
/
hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

This commit is contained in:
RMidhunSuresh 2022-03-03 19:58:46 +05:30
parent c09964dc30
commit 60d60e9572
3 changed files with 119 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -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
View 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
View File

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