diff --git a/packages/webamp/scripts/postcss-optimize-data-uri-pngs.js b/packages/webamp/scripts/postcss-optimize-data-uri-pngs.js index 94e00d2a..a14abb13 100644 --- a/packages/webamp/scripts/postcss-optimize-data-uri-pngs.js +++ b/packages/webamp/scripts/postcss-optimize-data-uri-pngs.js @@ -1,4 +1,3 @@ -const postcss = require("postcss"); const dataUriToBuffer = require("data-uri-to-buffer"); const imagemin = require("imagemin"); const imageminOptipng = require("imagemin-optipng"); @@ -14,24 +13,31 @@ async function optimizeDataUri(dataUri) { return `data:image/png;base64,${optimized.toString("base64")}`; } -module.exports = postcss.plugin("postcss-optimize-data-uri-pngs", () => { - return async function (css) { - // walkDecls does not let us work async, so we collect the async work we - // need to do here, and await it at the end - const promisesFactories = []; - css.walkDecls(DATA_URL_PROPS_REGEX, (decl) => { - let matches; - // WTF JavaScript. This is the worst API for iterating RegEx matches. - while ((matches = DATA_URL_REGEX.exec(decl.value))) { - const [, dataUri] = matches; - promisesFactories.push(async () => { - decl.value = decl.value.replace( - dataUri, - await optimizeDataUri(dataUri) - ); - }); - } - }); - await Promise.all(promisesFactories.map((p) => p())); +const plugin = () => { + return { + postcssPlugin: "postcss-optimize-data-uri-pngs", + async Once(css) { + // walkDecls does not let us work async, so we collect the async work we + // need to do here, and await it at the end + const promisesFactories = []; + css.walkDecls(DATA_URL_PROPS_REGEX, (decl) => { + let matches; + // WTF JavaScript. This is the worst API for iterating RegEx matches. + while ((matches = DATA_URL_REGEX.exec(decl.value))) { + const [, dataUri] = matches; + promisesFactories.push(async () => { + decl.value = decl.value.replace( + dataUri, + await optimizeDataUri(dataUri) + ); + }); + } + }); + await Promise.all(promisesFactories.map((p) => p())); + }, }; -}); +}; + +plugin.postcss = true; + +module.exports = plugin;