From 49535807bf1b60c3e8d4dbabacd6108c80e98d04 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 10 Apr 2022 14:59:08 +0530 Subject: [PATCH 1/4] Do not run plugin on runtime theme --- scripts/postcss/css-url-processor.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js index 1a0e4fdf..c050a898 100644 --- a/scripts/postcss/css-url-processor.js +++ b/scripts/postcss/css-url-processor.js @@ -68,6 +68,11 @@ module.exports = (opts = {}) => { postcssPlugin: "postcss-url-to-variable", Once(root, {result}) { + const cssFileLocation = root.source.input.from; + if (cssFileLocation.includes("type=runtime")) { + // If this is a runtime theme, don't process urls. + return; + } /* postcss-compile-variables should have sent the list of resolved colours down via results */ From 6456d4ef7627ec51f1a8e3bdce618e0e9ffc21d3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 10 Apr 2022 14:59:42 +0530 Subject: [PATCH 2/4] Cache cssPath --- scripts/postcss/css-url-processor.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js index c050a898..3ae7c60d 100644 --- a/scripts/postcss/css-url-processor.js +++ b/scripts/postcss/css-url-processor.js @@ -16,6 +16,7 @@ limitations under the License. const valueParser = require("postcss-value-parser"); const resolve = require("path").resolve; +let cssPath; function colorsFromURL(url, colorMap) { const params = new URL(`file://${url}`).searchParams; @@ -44,7 +45,6 @@ function processURL(decl, replacer, colorMap) { } const urlStringNode = node.nodes[0]; const oldURL = urlStringNode.value; - const cssPath = decl.source?.input.file.replace(/[^/]*$/, ""); const oldURLAbsolute = resolve(cssPath, oldURL); const colors = colorsFromURL(oldURLAbsolute, colorMap); if (!colors) { @@ -84,6 +84,7 @@ module.exports = (opts = {}) => { Go through each declaration and if it contains an URL, replace the url with the result of running replacer(url) */ + cssPath = root.source?.input.file.replace(/[^/]*$/, ""); root.walkDecls(decl => processURL(decl, opts.replacer, colorMap)); }, }; From 36782fb4feb83d31f57567f12eb175325608ee7f Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 19:44:29 +0530 Subject: [PATCH 3/4] Use unique filenames Otherwise newly produced svgs will replace other svgs produced earlier in the build. --- scripts/postcss/svg-colorizer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js index 7d527ddb..a3110693 100644 --- a/scripts/postcss/svg-colorizer.js +++ b/scripts/postcss/svg-colorizer.js @@ -16,6 +16,7 @@ limitations under the License. const fs = require("fs"); const path = require("path"); +const {randomUUID} = require('crypto'); /** * Builds a new svg with the colors replaced and returns its location. * @param {string} svgLocation The location of the input svg file @@ -30,6 +31,8 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive)."); } const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1]; + // give unique names so that this svg does not replace other versions of the same svg + const outputName = `${fileName.substring(0, fileName.length - 4)}-${randomUUID()}.svg`; const outputPath = path.resolve(__dirname, "../../.tmp"); try { fs.mkdirSync(outputPath); @@ -39,7 +42,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar throw e; } } - const outputFile = `${outputPath}/${fileName}`; + const outputFile = `${outputPath}/${outputName}`; fs.writeFileSync(outputFile, coloredSVGCode); return outputFile; } From 25a8521efcd7751db4ae8b01c60a21b5f5bf70ea Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 20:15:14 +0530 Subject: [PATCH 4/4] Use hash instead of UUID --- scripts/postcss/svg-colorizer.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js index a3110693..95355ea8 100644 --- a/scripts/postcss/svg-colorizer.js +++ b/scripts/postcss/svg-colorizer.js @@ -16,7 +16,14 @@ limitations under the License. const fs = require("fs"); const path = require("path"); -const {randomUUID} = require('crypto'); +const xxhash = require('xxhashjs'); + +function createHash(content) { + const hasher = new xxhash.h32(0); + hasher.update(content); + return hasher.digest(); +} + /** * Builds a new svg with the colors replaced and returns its location. * @param {string} svgLocation The location of the input svg file @@ -31,8 +38,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive)."); } const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1]; - // give unique names so that this svg does not replace other versions of the same svg - const outputName = `${fileName.substring(0, fileName.length - 4)}-${randomUUID()}.svg`; + const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`; const outputPath = path.resolve(__dirname, "../../.tmp"); try { fs.mkdirSync(outputPath);