mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-11-20 03:25:52 +01:00
Code Issues Projects Releases Wiki Activity

Populate shared map with collected icons

Browse Source
This commit is contained in:
RMidhunSuresh 2022-04-02 23:09:20 +05:30
parent 1a50effd86
commit cd4fce0c6f
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scripts/postcss/css-url-to-variables.js
View File

@ -53,6 +53,19 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
root.append(newRule);
}
function populateMapWithDerivedVariables(map, cssFileLocation) {
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
if (map.has(location)) {
/**
* This postcss plugin is going to run on all theme variants of a single theme.
* But we only really need to populate the map once since theme variants only differ
* by the values of the base-variables and we don't care about values here.
*/
return;
}
map.set(location, { "icon": Object.fromEntries(urlVariables) });
}
/* *
* @type {import('postcss').PluginCreator}
*/
@ -67,6 +80,11 @@ module.exports = (opts = {}) => {
if (urlVariables.size) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration });
}
if (opts.compiledVariables){
const cssFileLocation = root.source.input.from;
populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
}
console.log(opts.compiledVariables);
},
};
};

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

@ -16,6 +16,7 @@ limitations under the License.
const plugin = require("../css-url-to-variables");
const run = require("./common").createTestRunner(plugin);
const postcss = require("postcss");
module.exports.tests = function tests() {
return {
@ -46,6 +47,21 @@ module.exports.tests = function tests() {
background: no-repeat url("./img/foo/bar/image.png");
}`;
await run(inputCSS, inputCSS, {}, assert);
},
"map is populated with icons": async (assert) => {
const compiledVariables = new Map();
const inputCSS = `div {
background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
}
button {
background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
}`;
const expectedObject = {
"icon-url-0": "../img/image.svg?primary=main-color--darker-20",
"icon-url-1": "/home/foo/bar/cool.svg?primary=blue&secondary=green",
};
await postcss([plugin({compiledVariables})]).process(inputCSS, { from: "/foo/bar/test.css", });
assert.deepEqual(expectedObject, compiledVariables.get("/foo/bar")["icon"]);
}
};
};