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

Only extract into variables if file is svg

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") {
return;
}
const urlStringNode = node.nodes[0];
const url = node.nodes[0].value;
if (!url.match(/\.svg\?primary=.+/)) {
return;
}
const variableName = `${idToPrepend}-${counter++}`;
urlVariables.set(variableName, urlStringNode.value);
urlVariables.set(variableName, url);
node.value = "var";
node.nodes = [{ type: "word", value: `--${variableName}` }];
});
@ -61,7 +64,9 @@ module.exports = (opts = {}) => {
Once(root, { Rule, Declaration }) {
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 {
"url is replaced with variable": async (assert) => {
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 {
background: url("/home/foo/bar/cool.jpg");
background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
}`;
const outputCSS =
`div {
@ -35,12 +35,18 @@ module.exports.tests = function tests() {
}`+
`
:root {
--icon-url-0: url("../img/image.png");
--icon-url-1: url("/home/foo/bar/cool.jpg");
--icon-url-0: url("../img/image.svg?primary=main-color--darker-20");
--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);
}
};
};