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

Move code to callback and fix alias code

Browse source
This commit is contained in:
RMidhunSuresh 2022-03-09 17:20:05 +05:30
parent a83850ebf3
commit 79f363fb9d
3 changed files with 44 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
postcss/color.js Normal file
View file

@ -0,0 +1,14 @@
const offColor = require("off-color").offColor;
module.exports.derive = function (value, operation, argument) {
switch (operation) {
case "darker": {
const newColorString = offColor(value).darken(argument / 100).hex();
return newColorString;
}
case "lighter": {
const newColorString = offColor(value).lighten(argument / 100).hex();
return newColorString;
}
}
}

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

@ -1,13 +1,11 @@
const offColor = require("off-color").offColor;
const valueParser = require("postcss-value-parser");
let aliasMap;
let resolvedMap;
const RE_VARIABLE_VALUE = /var\((--(.+)--(.+)-(.+))\)/;
function getValueFromAlias(alias) {
function getValueFromAlias(alias, variables) {
const derivedVariable = aliasMap.get(`--${alias}`);
return resolvedMap.get(derivedVariable); // what if we haven't resolved this variable yet?
return variables[derivedVariable] ?? resolvedMap.get(`--${derivedVariable}`); // what if we haven't resolved this variable yet?
}
function parseDeclarationValue(value) {
@ -23,7 +21,7 @@ function parseDeclarationValue(value) {
return variables;
}
function resolveDerivedVariable(decl, variables) {
function resolveDerivedVariable(decl, {variables, derive}) {
const RE_VARIABLE_VALUE = /--(.+)--(.+)-(.+)/;
const variableCollection = parseDeclarationValue(decl.value);
for (const variable of variableCollection) {
@ -36,26 +34,15 @@ function resolveDerivedVariable(decl, variables) {
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 = offColor(colorString).darken(argument / 100).hex();
resolvedMap.set(wholeVariable, newColorString);
break;
}
case "lighter": {
const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
const newColorString = offColor(colorString).lighten(argument / 100).hex();
resolvedMap.set(wholeVariable, newColorString);
break;
}
}
const value = variables[baseVariable] ?? getValueFromAlias(baseVariable, variables);
const derivedValue = derive(value, operation, argument);
resolvedMap.set(wholeVariable, derivedValue);
}
}
}
function extractAlias(decl) {
const wholeVariable = decl.value.match(RE_VARIABLE_VALUE)?.[1];
const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1];
if (decl.prop.startsWith("--") && wholeVariable) {
aliasMap.set(decl.prop, wholeVariable);
}
@ -82,7 +69,7 @@ function addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration
module.exports = (opts = {}) => {
aliasMap = new Map();
resolvedMap = new Map();
const { variables } = opts;
const {variables} = opts;
return {
postcssPlugin: "postcss-compile-variables",
@ -93,7 +80,7 @@ module.exports = (opts = {}) => {
later.
*/
root.walkDecls(decl => extractAlias(decl));
root.walkDecls(decl => resolveDerivedVariable(decl, variables));
root.walkDecls(decl => resolveDerivedVariable(decl, opts));
addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration });
},
};

28
postcss/test.js
View file

@ -1,9 +1,10 @@
const offColor = require("off-color").offColor;
const postcss = require("postcss");
const plugin = require("./css-compile-variables");
const derive = require("./color").derive;
async function run(input, output, opts = {}, assert) {
let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
let result = await postcss([plugin({ ...opts, derive })]).process(input, { from: undefined, });
assert.strictEqual(
result.css.replaceAll(/\s/g, ""),
output.replaceAll(/\s/g, "")
@ -78,12 +79,25 @@ module.exports.tests = function tests() {
--foo-color--darker-20: ${transformedColor2.hex()};
}
`;
await run(
inputCSS,
outputCSS,
{ variables: { "foo-color": "#ff0" } },
assert
);
await run( inputCSS, outputCSS, { variables: { "foo-color": "#ff0" } }, assert);
},
"multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
const inputCSS = `div {
--my-alias: var(--foo-color);
background-color: linear-gradient(var(--my-alias--lighter-50), var(--my-alias--darker-20));
}`;
const transformedColor1 = offColor("#ff0").lighten(0.5);
const transformedColor2 = offColor("#ff0").darken(0.2);
const outputCSS =
inputCSS +
`
:root {
--foo-color: #ff0;
--my-alias--lighter-50: ${transformedColor1.hex()};
--my-alias--darker-20: ${transformedColor2.hex()};
}
`;
await run( inputCSS, outputCSS, { variables: { "foo-color": "#ff0" } }, assert);
}
};
};