Just wanted to share the scripts I'm using to automatically optimize prosilver's JS & CSS files. Others may find it useful. Hopefully a next phpBB version will automate this ![:)]( "Smile")
update.sh:It uses postcss to inline all css files into one and then optimizes the resulting file. It also concatenates my changes.css files for my customizations.
It uses hashed files to play well with CDNs and browser caches.
package.json (i.e., what you need to install with npm):postcss.config.js:remove-ie-hacks.js:remove-rtl.js:my changes.css:
update.sh:
Code:
cat /www/forum/assets/javascript/core.js /www/forum/styles/prosilver/template/forum_fn.js /www/forum/styles/prosilver/template/ajax.js > tmp.jsnpx terser tmp.js -o min.jsls -lh tmp.js min.jsrm tmp.jsJS_HASH=$(md5sum min.js | cut -c1-4)mv min.js /www/forum/styles/prosilver/template/min.$JS_HASH.jssed -i -E "s|min\.[a-z0-9]+\.js|min.${JS_HASH}.js|g" /www/forum/styles/prosilver/template/overall_footer.htmlsed -i -E "s|min\.[a-z0-9]+\.js|min.${JS_HASH}.js|g" /www/forum/styles/prosilver/template/simple_footer.htmlsed -E 's/@import url\("([^"]+)\?hash=[^"]*"\);/@import "\1";/g' /www/forum/styles/prosilver/theme/stylesheet.css > /www/forum/styles/prosilver/theme/tmp.csscat changes.css >> /www/forum/styles/prosilver/theme/tmp.cssnpx postcss /www/forum/styles/prosilver/theme/tmp.css --config . -o min.cssrm /www/forum/styles/prosilver/theme/tmp.cssls -lh min.cssCSS_HASH=$(md5sum min.css | cut -c1-4)mv min.css /www/forum/styles/prosilver/theme/min.$JS_HASH.csssed -i -E "s|min\.[a-z0-9]+\.css|min.${CSS_HASH}.css|g" /www/forum/styles/prosilver/template/overall_header.htmlsed -i -E "s|min\.[a-z0-9]+\.css|min.${CSS_HASH}.css|g" /www/forum/styles/prosilver/template/simple_header.htmlIt uses hashed files to play well with CDNs and browser caches.
package.json (i.e., what you need to install with npm):
Code:
{ "dependencies": { "cssnano": "^7.0.6", "postcss": "^8.5.3", "postcss-cli": "^11.0.1", "postcss-discard-comments": "^7.0.3", "postcss-discard-empty": "^7.0.0", "postcss-import": "^16.1.0", "postcss-preset-env": "^10.1.6", "postcss-url": "^10.1.3", "rollup": "^2.79.2", "rollup-plugin-terser": "^7.0.2", "terser": "^5.39.0" }}Code:
const removeRtl = require('./remove-rtl');const removeIEHacks = require('./remove-ie-hacks');module.exports = { plugins: [ require("postcss-import"), require('postcss-url')({ url: (asset) => asset.url.replace('./', '') }), removeRtl, require('postcss-preset-env')({ stage: 3, autoprefixer: { remove: true } }), removeIEHacks, require('postcss-discard-comments')({ removeAll: true }), require('postcss-discard-empty'), require('cssnano'), ]}Code:
module.exports = () => { return { postcssPlugin: 'remove-ie-hacks', Declaration(decl) { const prop = decl.prop; const val = decl.value; const isIEFilter = prop === 'filter' && /DXImageTransform\.Microsoft\.gradient/i.test(val); const isBehavior = prop === 'behavior' && /url\(/i.test(val); const isExpression = /expression\(/i.test(val); const isZoom = prop === 'zoom' && val === '1'; if (isIEFilter || isBehavior || isExpression || isZoom) { decl.remove(); } } };};module.exports.postcss = true;Code:
module.exports = () => { return { postcssPlugin: 'remove-rtl', Rule(rule) { if (!rule.selector) return; // Split multiple selectors const selectors = rule.selectors.filter( sel => !sel.includes('.rtl') ); if (selectors.length === 0) { // All selectors were .rtl-related – remove the rule rule.remove(); } else if (selectors.length !== rule.selectors.length) { // Some .rtl selectors – update the rule to only keep the others rule.selectors = selectors; } } };};module.exports.postcss = true;Code:
.postprofile {border-width: 0;float: left;}.site_logo{ width:295px;height:121px; background-image:url("images/logo.avif");}Statistics: Posted by nuno-lopes — Sat May 03, 2025 9:31 am