joomla
/
cms
mirror of https://github.com/joomla/joomla-cms.git
29
0
Fork 0
Code Packages Releases Activity

Improve build times (#42325)

This commit is contained in:
Lodder 2023-11-10 12:05:46 +00:00 committed by GitHub
parent 8cfb7f8b71
commit ff0670eda2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 676 additions and 878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
build/build-modules-js/error-pages.es6.js
View File

@ -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' }));

12
build/build-modules-js/init/exemptions/tinymce.es6.js
View File

@ -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>

4
build/build-modules-js/init/minify-vendor.es6.js
View File

@ -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');

6
build/build-modules-js/javascript/build-bootstrap-js.es6.js
View File

@ -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!');

11
build/build-modules-js/javascript/compile-to-es2017.es6.js
View File

@ -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;
}
}

6
build/build-modules-js/javascript/minify.es6.js
View File

@ -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;

11
build/build-modules-js/stylesheets/handle-css.es6.js
View File

@ -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}`);

26
build/build-modules-js/stylesheets/handle-scss.es6.js
View File

@ -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 },
);

20
build/build-modules-js/stylesheets/scss-transform.es6.js
View File

@ -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 },
);

2
build/media_source/com_media/scss/components/_layout.scss
View File

@ -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%;

1
build/media_source/system/css/sortablelist.css
View File

@ -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;

1431
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -80,12 +80,11 @@
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^3.1.0",
"@vue/compiler-sfc": "^3.3.4",
"autoprefixer": "^10.4.15",
"chokidar": "^3.5.3",
"commander": "^8.3.0",
"core-js": "^3.32.2",
"cssnano": "^5.1.15",
"cypress": "^13.2.0",
"esbuild": "^0.19.5",
"eslint": "^8.49.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.28.1",
@ -94,6 +93,7 @@
"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",
@ -108,7 +108,6 @@
"stylelint": "^14.16.1",
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.7.0",
"terser": "^5.19.4"
"stylelint-scss": "^4.7.0"
}
}
}