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

Formatting change

Browse source
This commit is contained in:
RMidhunSuresh 2022-03-10 17:21:38 +05:30
parent 5210123977
commit f732164b5f
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -61,16 +61,16 @@ 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)) {
const declaration = new Declaration({ prop: `--${key}`, value }); const declaration = new Declaration({prop: `--${key}`, value});
newRule.append(declaration); newRule.append(declaration);
} }
// Add derived css variables to :root // Add derived css variables to :root
resolvedMap.forEach((value, key) => { resolvedMap.forEach((value, key) => {
const declaration = new Declaration({ prop: key, value }); const declaration = new Declaration({prop: key, value});
newRule.append(declaration); newRule.append(declaration);
}); });
root.append(newRule); root.append(newRule);
@ -94,7 +94,7 @@ module.exports = (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
@ -102,7 +102,7 @@ module.exports = (opts = {}) => {
*/ */
root.walkDecls(decl => extractAlias(decl)); root.walkDecls(decl => extractAlias(decl));
root.walkDecls(decl => resolveDerivedVariable(decl, opts)); root.walkDecls(decl => resolveDerivedVariable(decl, opts));
addResolvedVariablesToRootSelector(root, opts.variables, { Rule, Declaration }); addResolvedVariablesToRootSelector(root, opts.variables, {Rule, Declaration});
}, },
}; };
}; };