Merge pull request #718 from vector-im/fix-css-compile-variables

Theming - Some more changes for compile-variables plugin
This commit is contained in:
R Midhun Suresh 2022-04-13 14:19:21 +05:30 committed by GitHub
commit aacd0e6dfb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 4 deletions

View file

@ -16,8 +16,17 @@ limitations under the License.
const offColor = require("off-color").offColor;
module.exports.derive = function (value, operation, argument) {
module.exports.derive = function (value, operation, argument, isDark) {
const argumentAsNumber = parseInt(argument);
if (isDark) {
// For dark themes, invert the operation
if (operation === 'darker') {
operation = "lighter";
}
else if (operation === 'lighter') {
operation = "darker";
}
}
switch (operation) {
case "darker": {
const newColorString = offColor(value).darken(argumentAsNumber / 100).hex();

View file

@ -33,6 +33,7 @@ const valueParser = require("postcss-value-parser");
let aliasMap;
let resolvedMap;
let baseVariables;
let isDark;
function getValueFromAlias(alias) {
const derivedVariable = aliasMap.get(alias);
@ -78,7 +79,7 @@ function resolveDerivedVariable(decl, derive) {
if (!value) {
throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
}
const derivedValue = derive(value, operation, argument);
const derivedValue = derive(value, operation, argument, isDark);
resolvedMap.set(wholeVariable, derivedValue);
}
}
@ -123,6 +124,7 @@ function populateMapWithDerivedVariables(map, cssFileLocation) {
* @param {string} value - The base value on which an operation is applied
* @param {string} operation - The operation to be applied (eg: darker, lighter...)
* @param {string} argument - The argument for this operation
* @param {boolean} isDark - Indicates whether this theme is dark
*/
/**
*
@ -134,6 +136,8 @@ module.exports = (opts = {}) => {
aliasMap = new Map();
resolvedMap = new Map();
baseVariables = new Map();
isDark = false;
return {
postcssPlugin: "postcss-compile-variables",
@ -143,6 +147,7 @@ module.exports = (opts = {}) => {
// If this is a runtime theme, don't derive variables.
return;
}
isDark = cssFileLocation.includes("dark=true");
/*
Go through the CSS file once to extract all aliases and base variables.
We use these when resolving derived variables later.
@ -153,8 +158,13 @@ module.exports = (opts = {}) => {
if (opts.compiledVariables){
populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
}
// Publish both the base-variables and derived-variables to the other postcss-plugins
const combinedMap = new Map([...baseVariables, ...resolvedMap]);
// Also produce a mapping from alias to completely resolved color
const resolvedAliasMap = new Map();
aliasMap.forEach((value, key) => {
resolvedAliasMap.set(key, resolvedMap.get(value));
});
// Publish the base-variables, derived-variables and resolved aliases to the other postcss-plugins
const combinedMap = new Map([...baseVariables, ...resolvedMap, ...resolvedAliasMap]);
result.messages.push({
type: "resolved-variable-map",
plugin: "postcss-compile-variables",