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 urlStringNode = node.nodes[0];
const variableName = `${idToPrepend}-${counter++}`; const variableName = `${idToPrepend}-${counter++}`;
urlVariables.set(variableName, urlStringNode.value); urlVariables.set(variableName, urlStringNode.value);
const varNode = { node.value = "var";
type: "function", node.nodes = [{ type: "word", value: `--${variableName}` }];
value: "var",
nodes: [{ type: "word", value: `--${variableName}` }],
};
// replace the url-string node with this var-node
node.nodes[0] = varNode;
}); });
decl.assign({prop: decl.prop, value: parsed.toString()}) 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 }); 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) => {
const declaration = new Declaration({ prop: `--${key}`, value: `"${value}"`}); const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
newRule.append(declaration); newRule.append(declaration);
}); });
root.append(newRule); 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 = const outputCSS =
`div { `div {
background: no-repeat center/80% url(var(--icon-url-0)); background: no-repeat center/80% var(--icon-url-0);
} }
button { button {
background: url(var(--icon-url-1)); background: var(--icon-url-1);
}`+ }`+
` `
:root { :root {
--icon-url-0: "../img/image.png"; --icon-url-0: url("../img/image.png");
--icon-url-1: "/home/foo/bar/cool.jpg"; --icon-url-1: url("/home/foo/bar/cool.jpg");
} }
`; `;
await run( inputCSS, outputCSS, { }, assert); await run( inputCSS, outputCSS, { }, assert);