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

Move scope of variables down

Browse source 
This was causing icons to be repeated in the css-file
This commit is contained in:
RMidhunSuresh 2022-06-16 21:29:33 +05:30
parent d322f380ad
commit cfd347335b
1 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
scripts/postcss/css-url-to-variables.js
View file

@ -20,11 +20,9 @@ const valueParser = require("postcss-value-parser");
* This plugin extracts content inside url() into css variables and adds the variables to the root section. * This plugin extracts content inside url() into css variables and adds the variables to the root section.
* This plugin is used in conjunction with css-url-processor plugin to colorize svg icons. * This plugin is used in conjunction with css-url-processor plugin to colorize svg icons.
*/ */
let counter;
let urlVariables;
const idToPrepend = "icon-url"; const idToPrepend = "icon-url";
function findAndReplaceUrl(decl) { function findAndReplaceUrl(decl, urlVariables, counter) {
const value = decl.value; const value = decl.value;
const parsed = valueParser(value); const parsed = valueParser(value);
parsed.walk(node => { parsed.walk(node => {
@ -35,7 +33,8 @@ function findAndReplaceUrl(decl) {
if (!url.match(/\.svg\?primary=.+/)) { if (!url.match(/\.svg\?primary=.+/)) {
return; return;
} }
const variableName = `${idToPrepend}-${counter++}`; const count = counter.next().value;
const variableName = `${idToPrepend}-${count}`;
urlVariables.set(variableName, url); urlVariables.set(variableName, url);
node.value = "var"; node.value = "var";
node.nodes = [{ type: "word", value: `--${variableName}` }]; node.nodes = [{ type: "word", value: `--${variableName}` }];
@ -43,7 +42,7 @@ function findAndReplaceUrl(decl) {
decl.assign({prop: decl.prop, value: parsed.toString()}) decl.assign({prop: decl.prop, value: parsed.toString()})
} }
function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) { function addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables) {
const newRule = new Rule({ selector: ":root", source: root.source }); const newRule = new Rule({ selector: ":root", source: root.source });
// Add derived css variables to :root // Add derived css variables to :root
urlVariables.forEach((value, key) => { urlVariables.forEach((value, key) => {
@ -53,29 +52,35 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
root.append(newRule); root.append(newRule);
} }
function populateMapWithIcons(map, cssFileLocation) { function populateMapWithIcons(map, cssFileLocation, urlVariables) {
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1]; const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
const sharedObject = map.get(location); const sharedObject = map.get(location);
sharedObject["icon"] = Object.fromEntries(urlVariables); sharedObject["icon"] = Object.fromEntries(urlVariables);
} }
function *createCounter() {
for (let i = 0; ; ++i) {
yield i;
}
}
/* * /* *
* @type {import('postcss').PluginCreator} * @type {import('postcss').PluginCreator}
*/ */
module.exports = (opts = {}) => { module.exports = (opts = {}) => {
urlVariables = new Map();
counter = 0;
return { return {
postcssPlugin: "postcss-url-to-variable", postcssPlugin: "postcss-url-to-variable",
Once(root, { Rule, Declaration }) { Once(root, { Rule, Declaration }) {
root.walkDecls(decl => findAndReplaceUrl(decl)); const urlVariables = new Map();
const counter = createCounter();
root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter));
if (urlVariables.size) { if (urlVariables.size) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration }); addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables);
} }
if (opts.compiledVariables){ if (opts.compiledVariables){
const cssFileLocation = root.source.input.from; const cssFileLocation = root.source.input.from;
populateMapWithIcons(opts.compiledVariables, cssFileLocation); populateMapWithIcons(opts.compiledVariables, cssFileLocation, urlVariables);
} }
}, },
}; };