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

Find list of resolved colors from result

Browse source 
and also throw only if secondary color was provided
This commit is contained in:
RMidhunSuresh 2022-03-27 20:00:43 +05:30
parent 8c6400ab2c
commit 7046fcc7c7
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
scripts/postcss/css-url-processor.js
View file

@ -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;