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

Only extract into variables if file is svg

Browse source
This commit is contained in:
RMidhunSuresh 2022-03-25 18:21:03 +05:30
parent b7a47ae901
commit 1a50effd86
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,9 +31,12 @@ function findAndReplaceUrl(decl) {
if (node.type !== "function" || node.value !== "url") { if (node.type !== "function" || node.value !== "url") {
return; return;
} }
const urlStringNode = node.nodes[0]; const url = node.nodes[0].value;
if (!url.match(/\.svg\?primary=.+/)) {
return;
}
const variableName = `${idToPrepend}-${counter++}`; const variableName = `${idToPrepend}-${counter++}`;
urlVariables.set(variableName, urlStringNode.value); urlVariables.set(variableName, url);
node.value = "var"; node.value = "var";
node.nodes = [{ type: "word", value: `--${variableName}` }]; node.nodes = [{ type: "word", value: `--${variableName}` }];
}); });
@ -61,7 +64,9 @@ module.exports = (opts = {}) => {
Once(root, { Rule, Declaration }) { Once(root, { Rule, Declaration }) {
root.walkDecls(decl => findAndReplaceUrl(decl)); root.walkDecls(decl => findAndReplaceUrl(decl));
addResolvedVariablesToRootSelector(root, { Rule, Declaration }); if (urlVariables.size) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration });
}
}, },
}; };
}; };

16
scripts/postcss/tests/css-url-to-variables.test.js
View file

@ -21,10 +21,10 @@ module.exports.tests = function tests() {
return { return {
"url is replaced with variable": async (assert) => { "url is replaced with variable": async (assert) => {
const inputCSS = `div { const inputCSS = `div {
background: no-repeat center/80% url("../img/image.png"); background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
} }
button { button {
background: url("/home/foo/bar/cool.jpg"); background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
}`; }`;
const outputCSS = const outputCSS =
`div { `div {
@ -35,12 +35,18 @@ module.exports.tests = function tests() {
}`+ }`+
` `
:root { :root {
--icon-url-0: url("../img/image.png"); --icon-url-0: url("../img/image.svg?primary=main-color--darker-20");
--icon-url-1: url("/home/foo/bar/cool.jpg"); --icon-url-1: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
} }
`; `;
await run( inputCSS, outputCSS, { }, assert); await run(inputCSS, outputCSS, { }, assert);
}, },
"non svg urls without query params are not replaced": async (assert) => {
const inputCSS = `div {
background: no-repeat url("./img/foo/bar/image.png");
}`;
await run(inputCSS, inputCSS, {}, assert);
}
}; };
}; };