WIP

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",
+    "xxhashjs": "^0.2.2"
-    "bs58": "^4.0.1"
   },
   "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"
   }
 }

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;

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"