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

Fix css logic

Browse source
This commit is contained in:
RMidhunSuresh 2022-03-25 16:06:40 +05:30
parent f07a3ea5b5
commit 0a186dd11b
2 changed files with 7 additions and 12 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

@ -34,13 +34,8 @@ function extractUrl(decl) {
const urlStringNode = node.nodes[0];
const variableName = `${idToPrepend}-${counter++}`;
urlVariables.set(variableName, urlStringNode.value);
const varNode = {
type: "function",
value: "var",
nodes: [{ type: "word", value: `--${variableName}` }],
};
// replace the url-string node with this var-node
node.nodes[0] = varNode;
node.value = "var";
node.nodes = [{ type: "word", value: `--${variableName}` }];
});
decl.assign({prop: decl.prop, value: parsed.toString()})
}
@ -49,7 +44,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
const newRule = new Rule({ selector: ":root", source: root.source });
// Add derived css variables to :root
urlVariables.forEach((value, key) => {
const declaration = new Declaration({ prop: `--${key}`, value: `"${value}"`});
const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
newRule.append(declaration);
});
root.append(newRule);

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

@ -28,15 +28,15 @@ module.exports.tests = function tests() {
}`;
const outputCSS =
`div {
background: no-repeat center/80% url(var(--icon-url-0));
background: no-repeat center/80% var(--icon-url-0);
}
button {
background: url(var(--icon-url-1));
background: var(--icon-url-1);
}`+
`
:root {
--icon-url-0: "../img/image.png";
--icon-url-1: "/home/foo/bar/cool.jpg";
--icon-url-0: url("../img/image.png");
--icon-url-1: url("/home/foo/bar/cool.jpg");
}
`;
await run( inputCSS, outputCSS, { }, assert);