[5.1] Drop postcss and own package (#42427)

build/build-modules-js/css-versioning.es6.js

@@ -1,30 +1,52 @@
-const { readFile, writeFile } = require('fs/promises');
-const { existsSync, readFileSync } = require('fs');
-const { resolve, dirname } = require('path');
-const crypto = require('crypto');
-const jetpack = require('fs-jetpack');
-const Postcss = require('postcss');
-const UrlVersion = require('postcss-url-version');
+const { createHash } = require('node:crypto');
+const { readdir, readFile, writeFile } = require('fs/promises');
+const { existsSync, readFileSync } = require('node:fs');
+const { dirname, extname, resolve } = require('node:path');
+const { transform, composeVisitors } = require('lightningcss');
 const { Timer } = require('./utils/timer.es6.js');
 
-const opts = {
-  version: (imagePath, sourceCssPath) => {
-    if (!sourceCssPath) {
-      return (new Date()).valueOf().toString();
-    }
+const skipExternal = true;
+const variable = 'v';
 
-    const directory = dirname(sourceCssPath);
-    if (!(imagePath.startsWith('http') || imagePath.startsWith('//')) && existsSync(resolve(`${directory}/${imagePath}`))) {
-      const fileBuffer = readFileSync(resolve(`${directory}/${imagePath}`));
-      const hashSum = crypto.createHash('md5');
-      hashSum.update(fileBuffer);
+function version(urlString, fromFile) {
+  // Skip external URLs
+  if (skipExternal && (urlString.startsWith('http') || urlString.startsWith('//'))) {
+    return `${urlString}`;
+  }
+  // Skip base64 URLs
+  if (urlString.startsWith('data:')) {
+    return `${urlString}`;
+  }
+  // Skip URLs with existing query
+  if (urlString.includes('?')) {
+    return `${urlString}`;
+  }
 
-      return (hashSum.digest('hex')).substring(0, 6);
-    }
+  if (fromFile && existsSync(resolve(`${dirname(fromFile)}/${urlString}`))) {
+    const hash = createHash('md5');
+    hash.update(readFileSync(resolve(`${dirname(fromFile)}/${urlString}`)));
 
-    return (new Date()).valueOf().toString();
-  },
-};
+    return `${urlString}?${variable}=${hash.digest('hex').substring(0, 6)}`;
+  }
+
+  return `${urlString}?${variable}=${(new Date()).valueOf().toString().substring(0, 6)}`;
+}
+
+/**
+ * @param {from: String} - the filepath for the css file
+ * @returns {import('lightningcss').Visitor} - A visitor that replaces the url
+ */
+function urlVersioning(fromFile) {
+  return {
+    /**
+     * @param {import('lightningcss').Url} url - The url object to transform
+     * @returns {import('lightningcss').Url} - The transformed url object
+     */
+    Url(url) {
+      return { ...url, ...{ url: version(url.url, fromFile) } };
+    },
+  };
+}
 
 /**
  * Adds a hash to the url() parts of the static css
@@ -34,9 +56,13 @@ const opts = {
  */
 const fixVersion = async (file) => {
   try {
-    const cssString = await readFile(file, { encoding: 'utf8' });
-    const data = await Postcss([UrlVersion(opts)]).process(cssString, { from: file });
-    await writeFile(file, data.css, { encoding: 'utf8', mode: 0o644 });
+    const cssString = await readFile(file);
+    const { code } = transform({
+      code: cssString,
+      minify: false,
+      visitor: composeVisitors([urlVersioning(file)]),
+    });
+    await writeFile(file, code, { encoding: 'utf8', mode: 0o644 });
   } catch (error) {
     throw new Error(error);
   }
@@ -50,8 +76,10 @@ const fixVersion = async (file) => {
 module.exports.cssVersioning = async () => {
   const bench = new Timer('Versioning');
 
-  const cssFiles = jetpack.find('media', { matching: '/**/**/*.css' });
-  await Promise.all(cssFiles.map((file) => fixVersion(file)));
+  const cssFiles = (await readdir('media', { withFileTypes: true, recursive: true }))
+    .filter((file) => (!file.isDirectory() && extname(file.name) === '.css'))
+    .map((file) => `${file.path}/${file.name}`);
 
-  bench.stop();
+  Promise.all(cssFiles.map((file) => fixVersion(file)))
+    .then(() => bench.stop());
 };

package.json

@@ -108,15 +108,12 @@
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-vue": "^8.7.1",
     "fs-extra": "^10.1.0",
-    "fs-jetpack": "^5.1.0",
     "ini": "^2.0.0",
     "jasmine-core": "^3.99.1",
     "joomla-cypress": "^0.0.16",
     "lightningcss": "^1.22.1",
     "mysql": "^2.18.1",
-    "postcss": "^8.4.30",
     "postcss-scss": "^4.0.8",
-    "postcss-url-version": "^1.0.4",
     "postgres": "^3.3.5",
     "recursive-readdir": "^2.2.3",
     "rimraf": "^3.0.2",
@@ -131,4 +128,4 @@
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.7.0"
   }
-}
+}