Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #717 from vector-im/fix-css-url-processor

Browse source 
Theming - Fix css-url-processor
This commit is contained in:
R Midhun Suresh 2022-04-13 14:19:36 +05:30 committed by GitHub
commit b76fb70579
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ 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;
let cssPath;
function colorsFromURL(url, colorMap) { function colorsFromURL(url, colorMap) {
const params = new URL(`file://${url}`).searchParams; const params = new URL(`file://${url}`).searchParams;
@ -44,7 +45,6 @@ function processURL(decl, replacer, colorMap) {
} }
const urlStringNode = node.nodes[0]; const urlStringNode = node.nodes[0];
const oldURL = urlStringNode.value; const oldURL = urlStringNode.value;
const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
const oldURLAbsolute = resolve(cssPath, oldURL); const oldURLAbsolute = resolve(cssPath, oldURL);
const colors = colorsFromURL(oldURLAbsolute, colorMap); const colors = colorsFromURL(oldURLAbsolute, colorMap);
if (!colors) { if (!colors) {
@ -68,6 +68,11 @@ module.exports = (opts = {}) => {
postcssPlugin: "postcss-url-to-variable", postcssPlugin: "postcss-url-to-variable",
Once(root, {result}) { 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 postcss-compile-variables should have sent the list of resolved colours down via results
*/ */
@ -79,6 +84,7 @@ module.exports = (opts = {}) => {
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)
*/ */
cssPath = root.source?.input.file.replace(/[^/]*$/, "");
root.walkDecls(decl => processURL(decl, opts.replacer, colorMap)); root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
}, },
}; };

11
scripts/postcss/svg-colorizer.js
View file

@ -16,6 +16,14 @@ limitations under the License.
const fs = require("fs"); const fs = require("fs");
const path = require("path"); const path = require("path");
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. * Builds a new svg with the colors replaced and returns its location.
* @param {string} svgLocation The location of the input svg file * @param {string} svgLocation The location of the input svg file
@ -30,6 +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)."); 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]; const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
const outputPath = path.resolve(__dirname, "../../.tmp"); const outputPath = path.resolve(__dirname, "../../.tmp");
try { try {
fs.mkdirSync(outputPath); fs.mkdirSync(outputPath);
@ -39,7 +48,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
throw e; throw e;
} }
} }
const outputFile = `${outputPath}/${fileName}`; const outputFile = `${outputPath}/${outputName}`;
fs.writeFileSync(outputFile, coloredSVGCode); fs.writeFileSync(outputFile, coloredSVGCode);
return outputFile; return outputFile;
} }