Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Format file

Browse source
This commit is contained in:
RMidhunSuresh 2022-03-07 11:33:44 +05:30
parent 92084e8005
commit b6f5e68e9e
1 changed files with 42 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
postcss/css-compile-variables.js
View file

@ -5,35 +5,35 @@ let resolvedMap;
const RE_VARIABLE_VALUE = /var\((--(.+)--(.+)-(.+))\)/; const RE_VARIABLE_VALUE = /var\((--(.+)--(.+)-(.+))\)/;
function getValueFromAlias(alias) { function getValueFromAlias(alias) {
const derivedVariable = aliasMap.get(`--${alias}`); const derivedVariable = aliasMap.get(`--${alias}`);
return resolvedMap.get(derivedVariable); // what if we haven't resolved this variable yet? return resolvedMap.get(derivedVariable); // what if we haven't resolved this variable yet?
} }
function resolveDerivedVariable(decl, variables) { function resolveDerivedVariable(decl, variables) {
const matches = decl.value.match(RE_VARIABLE_VALUE); const matches = decl.value.match(RE_VARIABLE_VALUE);
if (matches) { if (matches) {
const [,wholeVariable, baseVariable, operation, argument] = matches; const [, wholeVariable, baseVariable, operation, argument] = matches;
if (!variables[baseVariable]) { if (!variables[baseVariable]) {
// hmm.. baseVariable should be in config..., maybe this is an alias? // hmm.. baseVariable should be in config..., maybe this is an alias?
if (!aliasMap.get(`--${baseVariable}`)) { if (!aliasMap.get(`--${baseVariable}`)) {
throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`); 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;
}
}
} }
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) { function extractAlias(decl) {
@ -44,7 +44,7 @@ function extractAlias(decl) {
} }
} }
function addResolvedVariablesToRootSelector( root, variables, { Rule, Declaration }) { function addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration }) {
const newRule = new Rule({ selector: ":root", source: root.source }); const newRule = new Rule({ selector: ":root", source: root.source });
// Add base css variables to :root // Add base css variables to :root
for (const [key, value] of Object.entries(variables)) { for (const [key, value] of Object.entries(variables)) {
@ -63,23 +63,23 @@ function addResolvedVariablesToRootSelector( root, variables, { Rule, Declaratio
* @type {import('postcss').PluginCreator} * @type {import('postcss').PluginCreator}
*/ */
module.exports = (opts = {}) => { module.exports = (opts = {}) => {
aliasMap = new Map(); aliasMap = new Map();
resolvedMap = new Map(); resolvedMap = new Map();
const { variables } = opts; const { variables } = opts;
return { return {
postcssPlugin: "postcss-compile-variables", postcssPlugin: "postcss-compile-variables",
Once(root, {Rule, Declaration}) { Once(root, { Rule, Declaration }) {
/* /*
Go through the CSS file once to extract all aliases. Go through the CSS file once to extract all aliases.
We use the extracted alias when resolving derived variables We use the extracted alias when resolving derived variables
later. later.
*/ */
root.walkDecls(decl => extractAlias(decl)); root.walkDecls(decl => extractAlias(decl));
root.walkDecls(decl => resolveDerivedVariable(decl, variables)); root.walkDecls(decl => resolveDerivedVariable(decl, variables));
addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration }); addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration });
}, },
}; };
}; };
module.exports.postcss = true; module.exports.postcss = true;