Improve build times (joomla#42325)

C-Lodder · web-flow · commit ff0670eda259 · 2023-11-10T13:05:46.000+01:00
diff --git a/build/build-modules-js/error-pages.es6.js b/build/build-modules-js/error-pages.es6.js
@@ -4,10 +4,8 @@ const {
 const Ini = require('ini');
 const { dirname } = require('path');
 const Recurs = require('recursive-readdir');
-const Postcss = require('postcss');
-const Autoprefixer = require('autoprefixer');
-const CssNano = require('cssnano');
-const { minify } = require('terser');
+const { transform } = require('esbuild');
+const LightningCSS = require('lightningcss');
 
 const RootPath = process.cwd();
 const dir = `${RootPath}/installation/language`;
@@ -35,10 +33,13 @@ module.exports.createErrorPages = async (options) => {
   let cssContent = await readFile(`${srcPath}/template.css`, { encoding: 'utf8' });
   let jsContent = await readFile(`${srcPath}/template.js`, { encoding: 'utf8' });
 
-  const cssMin = await Postcss([Autoprefixer, CssNano]).process(cssContent, { from: undefined });
+  const { code } = LightningCSS.transform({
+    code: Buffer.from(cssContent),
+    minify: true,
+  });
 
-  cssContent = cssMin.css;
-  jsContent = await minify(jsContent);
+  cssContent = code;
+  jsContent = await transform(jsContent, { minify: true });
 
   const processIni = async (file) => {
     const languageStrings = Ini.parse(await readFile(file, { encoding: 'utf8' }));
diff --git a/build/build-modules-js/init/exemptions/tinymce.es6.js b/build/build-modules-js/init/exemptions/tinymce.es6.js
@@ -1,9 +1,8 @@
 const {
   existsSync, copy, readFile, writeFile, mkdir,
 } = require('fs-extra');
-const CssNano = require('cssnano');
-const Postcss = require('postcss');
-const { minify } = require('terser');
+const LightningCSS = require('lightningcss');
+const { transform } = require('esbuild');
 
 const { join } = require('path');
 
@@ -72,10 +71,13 @@ module.exports.tinyMCE = async (packageName, version) => {
   /* Create the Highlighter plugin */
   // Get the css
   let cssContent = await readFile('build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.css', { encoding: 'utf8' });
-  cssContent = await Postcss([CssNano()]).process(cssContent, { from: undefined });
+  cssContent = LightningCSS.transform({
+    code: Buffer.from(cssContent),
+    minify: true,
+  }).code;
   // Get the JS
   let jsContent = await readFile('build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es6.js', { encoding: 'utf8' });
-  jsContent = await minify(jsContent, { sourceMap: false, format: { comments: false } });
+  jsContent = await transform(jsContent, { minify: true });
   // Write the HTML file
   const htmlContent = `<!DOCTYPE html>
 <html>
diff --git a/build/build-modules-js/init/minify-vendor.es6.js b/build/build-modules-js/init/minify-vendor.es6.js
@@ -1,7 +1,7 @@
 const { lstat, readFile, writeFile } = require('fs-extra');
 const { sep, basename } = require('path');
 const recursive = require('recursive-readdir');
-const { minify } = require('terser');
+const { transform } = require('esbuild');
 
 const RootPath = process.cwd();
 
@@ -69,7 +69,7 @@ const minifyJS = async (file) => {
   if (isMinified || needsDotJS) {
     minified = content;
   } else {
-    minified = (await minify(content, { sourceMap: false, format: { comments: false } })).code;
+    minified = (await transform(content, { minify: true })).code;
   }
 
   const newFile = needsDotJS ? file.replace('.min.js', '.js') : file.replace('.js', '.min.js');
diff --git a/build/build-modules-js/javascript/build-bootstrap-js.es6.js b/build/build-modules-js/javascript/build-bootstrap-js.es6.js
@@ -2,7 +2,7 @@ const {
   readdir, readFile, writeFile, unlink,
 } = require('fs').promises;
 const { resolve } = require('path');
-const { minify } = require('terser');
+const { transform } = require('esbuild');
 const rimraf = require('rimraf');
 const rollup = require('rollup');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
@@ -17,7 +17,7 @@ const outputFolder = 'media/vendor/bootstrap/js';
 
 const createMinified = async (file) => {
   const initial = await readFile(resolve(outputFolder, file), { encoding: 'utf8' });
-  const mini = await minify(initial.replace('./popper.js', `./popper.min.js?${bsVersion}`).replace('./dom.js', `./dom.min.js?${bsVersion}`), { sourceMap: false, format: { comments: false } });
+  const mini = await transform(initial.replace('./popper.js', `./popper.min.js?${bsVersion}`).replace('./dom.js', `./dom.min.js?${bsVersion}`), { minify: true });
   await writeFile(resolve(outputFolder, file), initial.replace('./popper.js', `./popper.js?${bsVersion}`).replace('./dom.js', `./dom.js?${bsVersion}`), { encoding: 'utf8', mode: 0o644 });
   await writeFile(resolve(outputFolder, file.replace('.js', '.min.js')), mini.code, { encoding: 'utf8', mode: 0o644 });
 };
@@ -161,7 +161,7 @@ module.exports.bootstrapJs = async () => {
     try {
       await buildLegacy(inputFolder, 'index.es6.js');
       const es5File = await readFile(resolve(outputFolder, 'bootstrap-es5.js'), { encoding: 'utf8' });
-      const mini = await minify(es5File, { sourceMap: false, format: { comments: false } });
+      const mini = await transform(es5File, { minify: true });
       await writeFile(resolve(outputFolder, 'bootstrap-es5.min.js'), mini.code, { encoding: 'utf8', mode: 0o644 });
       // eslint-disable-next-line no-console
       console.log('✅ Legacy done!');
diff --git a/build/build-modules-js/javascript/compile-to-es2017.es6.js b/build/build-modules-js/javascript/compile-to-es2017.es6.js
@@ -1,13 +1,11 @@
 const { access, writeFile } = require('fs').promises;
 const { constants } = require('fs');
-const Autoprefixer = require('autoprefixer');
-const CssNano = require('cssnano');
 const { basename, sep, resolve } = require('path');
 const rollup = require('rollup');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const { babel } = require('@rollup/plugin-babel');
-const Postcss = require('postcss');
+const LightningCSS = require('lightningcss');
 const { renderSync } = require('sass-embedded');
 const { minifyJsCode } = require('./minify.es6.js');
 const { handleESMToLegacy } = require('./compile-to-es5.es6.js');
@@ -35,8 +33,11 @@ const getWcMinifiedCss = async (file) => {
     }
 
     if (typeof compiled === 'object' && compiled.css) {
-      return Postcss([Autoprefixer(), CssNano()])
-        .process(compiled.css.toString(), { from: undefined });
+      const { code } = LightningCSS.transform({
+        code: Buffer.from(compiled.css.toString()),
+        minify: true,
+      });
+      return code;
     }
   }
 
diff --git a/build/build-modules-js/javascript/minify.es6.js b/build/build-modules-js/javascript/minify.es6.js
@@ -1,4 +1,4 @@
-const { minify } = require('terser');
+const { transform } = require('esbuild');
 const { readFile, writeFile } = require('fs-extra');
 const { basename } = require('path');
 /**
@@ -9,7 +9,7 @@ const { basename } = require('path');
  */
 const minifyFile = async (file) => {
   const fileContent = await readFile(file, { encoding: 'utf8' });
-  const content = await minify(fileContent, { sourceMap: false, format: { comments: false } });
+  const content = await transform(fileContent, { minify: true });
   await writeFile(file.replace('.js', '.min.js'), content.code, { encoding: 'utf8', mode: 0o644 });
   // eslint-disable-next-line no-console
   console.log(`✅ Legacy js file: ${basename(file)}: minified`);
@@ -21,7 +21,7 @@ const minifyFile = async (file) => {
  * @param code
  * @returns {Promise<void>}
  */
-const minifyCode = async (code) => minify(code, { sourceMap: false, format: { comments: false } });
+const minifyCode = async (code) => transform(code, { minify: true });
 
 module.exports.minifyJs = minifyFile;
 module.exports.minifyJsCode = minifyCode;
diff --git a/build/build-modules-js/stylesheets/handle-css.es6.js b/build/build-modules-js/stylesheets/handle-css.es6.js
@@ -2,9 +2,7 @@ const {
   copy, readFile, writeFile, ensureDir,
 } = require('fs-extra');
 const { dirname, sep } = require('path');
-const Postcss = require('postcss');
-const Autoprefixer = require('autoprefixer');
-const CssNano = require('cssnano');
+const LightningCSS = require('lightningcss');
 
 module.exports.handleCssFile = async (file) => {
   const outputFile = file.replace(`${sep}build${sep}media_source${sep}`, `${sep}media${sep}`);
@@ -18,10 +16,13 @@ module.exports.handleCssFile = async (file) => {
     }
 
     const content = await readFile(file, { encoding: 'utf8' });
-    const cssMin = await Postcss([Autoprefixer, CssNano]).process(content, { from: undefined });
+    const { code } = LightningCSS.transform({
+      code: Buffer.from(content),
+      minify: true,
+    });
 
     // Ensure the folder exists or create it
-    await writeFile(outputFile.replace('.css', '.min.css'), cssMin.css.toString(), { encoding: 'utf8', mode: 0o644 });
+    await writeFile(outputFile.replace('.css', '.min.css'), code, { encoding: 'utf8', mode: 0o644 });
 
     // eslint-disable-next-line no-console
     console.log(`✅ CSS file copied/minified: ${file}`);
diff --git a/build/build-modules-js/stylesheets/handle-scss.es6.js b/build/build-modules-js/stylesheets/handle-scss.es6.js
@@ -1,10 +1,8 @@
-const Autoprefixer = require('autoprefixer');
-const CssNano = require('cssnano');
 const rtlcss = require('rtlcss');
 const { writeFile } = require('fs').promises;
 const { ensureDir } = require('fs-extra');
 const { dirname, sep } = require('path');
-const Postcss = require('postcss');
+const LightningCSS = require('lightningcss');
 const Sass = require('sass-embedded');
 
 module.exports.handleScssFile = async (file) => {
@@ -21,28 +19,34 @@ module.exports.handleScssFile = async (file) => {
     process.exit(1);
   }
 
-  const plugins = [Autoprefixer];
-  if (cssFile.endsWith('-rtl.css')) plugins.push(rtlcss);
+  let contents = LightningCSS.transform({
+    code: Buffer.from(compiled.css.toString()),
+    minify: false,
+  }).code;
 
-  // Auto prefixing
-  const cleaner = Postcss(plugins);
-  const res = await cleaner.process(compiled.css.toString(), { from: undefined });
+  if (cssFile.endsWith('-rtl.css')) {
+    contents = rtlcss.process(contents);
+  }
 
   // Ensure the folder exists or create it
   await ensureDir(dirname(cssFile), {});
   await writeFile(
     cssFile,
-    res.css,
+    contents,
     { encoding: 'utf8', mode: 0o644 },
   );
 
-  const cssMin = await Postcss([CssNano]).process(res.css, { from: undefined });
+  const cssMin = LightningCSS.transform({
+    code: Buffer.from(contents),
+    minify: true,
+    exclude: LightningCSS.Features.VendorPrefixes,
+  });
 
   // Ensure the folder exists or create it
   await ensureDir(dirname(cssFile.replace('.css', '.min.css')), {});
   await writeFile(
     cssFile.replace('.css', '.min.css'),
-    cssMin.css,
+    cssMin.code,
     { encoding: 'utf8', mode: 0o644 },
   );
 
diff --git a/build/build-modules-js/stylesheets/scss-transform.es6.js b/build/build-modules-js/stylesheets/scss-transform.es6.js
@@ -1,9 +1,7 @@
-const Autoprefixer = require('autoprefixer');
-const CssNano = require('cssnano');
 const Fs = require('fs').promises;
 const FsExtra = require('fs-extra');
 const { dirname, sep } = require('path');
-const Postcss = require('postcss');
+const LightningCSS = require('lightningcss');
 const Sass = require('sass-embedded');
 
 module.exports.compile = async (file) => {
@@ -20,24 +18,30 @@ module.exports.compile = async (file) => {
   }
 
   // Auto prefixing
-  const cleaner = Postcss([Autoprefixer()]);
-  const res = await cleaner.process(compiled.css.toString(), { from: undefined });
+  const { code } = LightningCSS.transform({
+    code: Buffer.from(compiled.css.toString()),
+    minify: false,
+  });
 
   // Ensure the folder exists or create it
   await FsExtra.mkdirs(dirname(cssFile), {});
   await Fs.writeFile(
     cssFile,
-    res.css.toString(),
+    code,
     { encoding: 'utf8', mode: 0o644 },
   );
 
-  const cssMin = await Postcss([CssNano]).process(res.css.toString(), { from: undefined });
+  const cssMin = LightningCSS.transform({
+    code: Buffer.from(code),
+    minify: true,
+    exclude: LightningCSS.Features.VendorPrefixes,
+  });
 
   // Ensure the folder exists or create it
   FsExtra.mkdirs(dirname(cssFile.replace('.css', '.min.css')), {});
   await Fs.writeFile(
     cssFile.replace('.css', '.min.css'),
-    cssMin.css.toString(),
+    cssMin.code,
     { encoding: 'utf8', mode: 0o644 },
   );
 
diff --git a/build/media_source/com_media/scss/components/_layout.scss b/build/media_source/com_media/scss/components/_layout.scss
@@ -31,7 +31,7 @@
   padding-left: $col-gutter-width * .5;
 }
 
-@media (min-width: var(--breakpoint-md)) {
+@media (min-width: 768px) {
   [class^="media-col"], [class*=" media-col"] {
     flex: 0 0 100%;
     max-width: 100%;
diff --git a/build/media_source/system/css/sortablelist.css b/build/media_source/system/css/sortablelist.css
@@ -38,7 +38,6 @@
 
 .dndlist-dragged-row {
   background-color: #5bb75b !important;
-  *background-color: #51a351 !important;
   background-image: -ms-linear-gradient(top, #62c462, #51a351) !important;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)) !important;
   background-image: -webkit-linear-gradient(top, #62c462, #51a351) !important;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`padding-left: $col-gutter-width * .5;`
`32`	`32`	`}`
`33`	`33`
`34`		`-@media (min-width: var(--breakpoint-md)) {`
	`34`	`+@media (min-width: 768px) {`
`35`	`35`	`[class^="media-col"], [class*=" media-col"] {`
`36`	`36`	`flex: 0 0 100%;`
`37`	`37`	`max-width: 100%;`