mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
Fix css logic
This commit is contained in:
parent
f07a3ea5b5
commit
0a186dd11b
@ -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);
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user