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

Move all code under the Once event

Browse source 
Apparently the other events are common to all plugins.
This commit is contained in:
RMidhunSuresh 2022-03-07 11:32:30 +05:30
parent 60d60e9572
commit 92084e8005
1 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Color } from "color"; const Color = require("color");
let aliasMap; let aliasMap;
let resolvedMap; let resolvedMap;
@ -44,6 +44,21 @@ function extractAlias(decl) {
} }
} }
function addResolvedVariablesToRootSelector( root, variables, { 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);
}
/* * /* *
* @type {import('postcss').PluginCreator} * @type {import('postcss').PluginCreator}
*/ */
@ -54,32 +69,15 @@ module.exports = (opts = {}) => {
return { return {
postcssPlugin: "postcss-compile-variables", postcssPlugin: "postcss-compile-variables",
Once(root) { 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));
addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration });
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);
}, },
}; };
}; };