mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-11-20 03:25:52 +01:00
Find list of resolved colors from result
and also throw only if secondary color was provided
This commit is contained in:
parent
8c6400ab2c
commit
7046fcc7c7
@ -17,25 +17,25 @@ limitations under the License.
|
|||||||
const valueParser = require("postcss-value-parser");
|
const valueParser = require("postcss-value-parser");
|
||||||
const resolve = require("path").resolve;
|
const resolve = require("path").resolve;
|
||||||
|
|
||||||
function colorsFromURL(url, colorVariables) {
|
function colorsFromURL(url, colorMap) {
|
||||||
const params = new URL(`file://${url}`).searchParams;
|
const params = new URL(`file://${url}`).searchParams;
|
||||||
const primary = params.get("primary");
|
const primary = params.get("primary");
|
||||||
if (!primary) {
|
if (!primary) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const secondary = params.get("secondary");
|
const secondary = params.get("secondary");
|
||||||
const primaryColor = colorVariables[primary];
|
const primaryColor = colorMap.get(primary);
|
||||||
const secondaryColor = colorVariables[secondary];
|
const secondaryColor = colorMap.get(secondary);
|
||||||
if (!primaryColor) {
|
if (!primaryColor) {
|
||||||
throw new Error(`Variable ${primary} not found in resolved color variables!`);
|
throw new Error(`Variable ${primary} not found in resolved color variables!`);
|
||||||
}
|
}
|
||||||
if (!secondaryColor) {
|
if (secondary && !secondaryColor) {
|
||||||
throw new Error(`Variable ${secondary} not found in resolved color variables!`);
|
throw new Error(`Variable ${secondary} not found in resolved color variables!`);
|
||||||
}
|
}
|
||||||
return [primaryColor, secondaryColor];
|
return [primaryColor, secondaryColor];
|
||||||
}
|
}
|
||||||
|
|
||||||
function processURL(decl, replacer, colorVariables) {
|
function processURL(decl, replacer, colorMap) {
|
||||||
const value = decl.value;
|
const value = decl.value;
|
||||||
const parsed = valueParser(value);
|
const parsed = valueParser(value);
|
||||||
parsed.walk(async node => {
|
parsed.walk(async node => {
|
||||||
@ -46,7 +46,7 @@ function processURL(decl, replacer, colorVariables) {
|
|||||||
const oldURL = urlStringNode.value;
|
const oldURL = urlStringNode.value;
|
||||||
const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
|
const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
|
||||||
const oldURLAbsolute = resolve(cssPath, oldURL);
|
const oldURLAbsolute = resolve(cssPath, oldURL);
|
||||||
const colors = colorsFromURL(oldURLAbsolute, colorVariables);
|
const colors = colorsFromURL(oldURLAbsolute, colorMap);
|
||||||
if (!colors) {
|
if (!colors) {
|
||||||
// If no primary color is provided via url params, then this url need not be handled.
|
// If no primary color is provided via url params, then this url need not be handled.
|
||||||
return;
|
return;
|
||||||
@ -67,15 +67,22 @@ module.exports = (opts = {}) => {
|
|||||||
return {
|
return {
|
||||||
postcssPlugin: "postcss-url-to-variable",
|
postcssPlugin: "postcss-url-to-variable",
|
||||||
|
|
||||||
Once(root) {
|
Once(root, {result}) {
|
||||||
|
/*
|
||||||
|
postcss-compile-variables should have sent the list of resolved colours down via results
|
||||||
|
*/
|
||||||
|
const {colorMap} = result.messages.find(m => m.type === "resolved-variable-map");
|
||||||
|
if (!colorMap) {
|
||||||
|
throw new Error("Postcss results do not contain resolved colors!");
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
Go through each declaration and if it contains an URL, replace the url with the result
|
Go through each declaration and if it contains an URL, replace the url with the result
|
||||||
of running replacer(url)
|
of running replacer(url)
|
||||||
*/
|
*/
|
||||||
root.walkDecls(decl => processURL(decl, opts.replacer, opts.colors));
|
root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
|
||||||
|
console.log("result", colorMap);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports.postcss = true;
|
module.exports.postcss = true;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user