From dde7500418cbbca265b13b1abb5478f3e87b67a6 Mon Sep 17 00:00:00 2001 From: Daniel Loomer Date: Wed, 1 Jul 2020 15:17:59 -0400 Subject: [PATCH] 0.9.1: mangle properties to reduce gzip size by ~30 bytes --- CHANGELOG.md | 8 ++++++ build.js | 7 ++++- package-lock.json | 14 ++++----- package.json | 4 +-- src/index.js | 72 +++++++++++++++++++++++++---------------------- 5 files changed, 62 insertions(+), 43 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 453e4e5..8cf010e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## 0.9.1 + +_2020-07-01_ + +Updated the build script to mangle property names prefixed with an underscore and went through the source code replacing the previously short property names with longer ones that will be mangled. + +This improves the readability of the source code a bit as well as reducing the gzip dist size by ~30 bytes 🎉 + ## 0.9.0 _2020-04-21_ diff --git a/build.js b/build.js index cf828b5..b5de307 100644 --- a/build.js +++ b/build.js @@ -21,6 +21,7 @@ const terserOut = Terser.minify( { module: true, ecma: 8, + mangle: { properties: { regex: /^_/ } }, sourceMap: { filename: outName, url: outName + '.map' } } ) @@ -59,7 +60,11 @@ const bubleOut = buble.transform(moduleToBrowser(input), { }) const bubleTerserOut = Terser.minify( { [es5SrcName]: bubleOut.code }, - { ecma: 5, sourceMap: { filename: es5OutName, url: es5OutName + '.map' } } + { + ecma: 5, + mangle: { properties: { regex: /^_/ } }, + sourceMap: { filename: es5OutName, url: es5OutName + '.map' } + } ) const reportDiff = (path, newCode) => { diff --git a/package-lock.json b/package-lock.json index 4b5f965..13f05ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "zaftig", - "version": "0.8.4", + "version": "0.9.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -884,9 +884,9 @@ "dev": true }, "source-map-support": { - "version": "0.5.16", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz", - "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==", + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", + "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", "dev": true, "requires": { "buffer-from": "^1.0.0", @@ -938,9 +938,9 @@ "dev": true }, "terser": { - "version": "4.6.11", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.11.tgz", - "integrity": "sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA==", + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", + "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==", "dev": true, "requires": { "commander": "^2.20.0", diff --git a/package.json b/package.json index 03b5867..6fdd85a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zaftig", - "version": "0.9.0", + "version": "0.9.1", "description": "css for your js", "source": "src/index.js", "main": "dist/zaftig.es5.min.js", @@ -28,6 +28,6 @@ "buble": "^0.20", "jsdom": "^16", "ospec": "^4.1.1", - "terser": "^4.6.11" + "terser": "^4.8.0" } } diff --git a/src/index.js b/src/index.js index a5e0439..3c840f9 100644 --- a/src/index.js +++ b/src/index.js @@ -180,34 +180,40 @@ const makeZ = (conf = {}) => { } const appendSpecialRule = ctx => { - if (ctx.media) { - ctx.sub.forEach(c => c.media && (c.sel = ctx.sel + ' and ' + c.sel)) - ctx.sel = '@media ' + ctx.sel + if (ctx._media) { + ctx._nested.forEach( + nested => nested._media && (nested._selector = ctx._selector + ' and ' + nested._selector) + ) + ctx._selector = '@media ' + ctx._selector } - if (ctx.rul) addToSheet(ctx.sel, ctx.rul.replace(/^/gm, ' ') + '\n') - if (ctx.sub) ctx.sub.forEach(appendSpecialRule) + if (ctx._rules) addToSheet(ctx._selector, ctx._rules.replace(/^/gm, ' ') + '\n') + if (ctx._nested) ctx._nested.forEach(appendSpecialRule) } - const appendSpecial = (sel, rules, psel = '', pctx) => { + const appendSpecial = (sel, ctx, psel = '', parent) => { const media = sel.indexOf('@media') == 0 - const ctx = { - sel: media ? sel.slice(sel.indexOf(' ') + 1) : sel, - media, - sub: [], - rul: media ? wrap(psel, rules.rul) : '' + const special = { + _selector: media ? sel.slice(sel.indexOf(' ') + 1) : sel, + _media: media, + _nested: [], + _rules: media ? wrap(psel, ctx._rules) : '' } - rules.sub.forEach(n => appendRule(n.sel, n, psel == ':root' ? '' : psel, ctx)) - if (pctx) pctx.sub.push(ctx) - else appendSpecialRule(ctx) + ctx._nested.forEach(nested => + appendRule(nested._selector, nested, psel == ':root' ? '' : psel, special) + ) + if (parent) parent._nested.push(special) + else appendSpecialRule(special) } - const appendRule = (sel, rules, psel = '', pctx) => { + const appendRule = (sel, ctx, psel = '', parent) => { if (/^@(media|keyframes)/.test(sel)) - return appendSpecial(sel, rules, psel == '' ? ':root' : psel, pctx) - if (psel && (!pctx || pctx.media)) sel = processSelector(sel, psel) - if (pctx) pctx.rul += wrap(sel, rules.rul) - else addToSheet(sel, rules.rul) - rules.sub.forEach(n => appendRule(n.sel, n, sel == ':root' ? '' : sel, pctx)) + return appendSpecial(sel, ctx, psel == '' ? ':root' : psel, parent) + if (psel && (!parent || parent._media)) sel = processSelector(sel, psel) + if (parent) parent._rules += wrap(sel, ctx._rules) + else addToSheet(sel, ctx._rules) + ctx._nested.forEach(nestedCtx => + appendRule(nestedCtx._selector, nestedCtx, sel == ':root' ? '' : sel, parent) + ) } const runHelper = (key, value) => { @@ -222,8 +228,8 @@ const makeZ = (conf = {}) => { if (!key) return // special instructions if (key[0] == '$') { - if (key == '$name') return (ctx.name = value) - if (key == '$compose') return (ctx.cmp = value) + if (key == '$name') return (ctx._name = value) + if (key == '$compose') return (ctx._compose = value) // everything else is a css var key = '--' + key.slice(1) } @@ -231,8 +237,8 @@ const makeZ = (conf = {}) => { const helper = runHelper(key, value) if (helper) { const parsed = parseRules(helper) - ctx.rul += parsed.rul - ctx.sub = ctx.sub.concat(parsed.sub) + ctx._rules += parsed._rules + ctx._nested = ctx._nested.concat(parsed._nested) return } if (!value) return debug && err('no value for', key) @@ -253,13 +259,13 @@ const makeZ = (conf = {}) => { .join(' ') const rule = ` ${key}: ${value};\n` if (debug && !isValidCss(id, rule)) err('invalid css', rule) - ctx.rul += rule + ctx._rules += rule } const PROP = 1 const VALUE = 2 const parseRules = memo(str => { - const ctx = [{ rul: '', sub: [] }] + const ctx = [{ _rules: '', _nested: [] }] str = str && str.trim() if (!str) return ctx[0] str += ';' // append semi to properly commit last rule @@ -273,15 +279,15 @@ const makeZ = (conf = {}) => { if (char == '\n' || ((char == ';' || char == '}') && !quote)) { // end of rule, process key/value assignRule(ctx[depth], curProp, buffer.trim() + quote) - if (char == '}') ctx[--depth].sub.push(ctx.pop()) + if (char == '}') ctx[--depth]._nested.push(ctx.pop()) mode = PROP curProp = buffer = quote = '' } else if (char == '{' && !quote) { // block open, pre-process helper and create new ctx ctx[++depth] = { - sel: runHelper(curProp, buffer.trim()) || (curProp + ' ' + buffer).trim(), - rul: '', - sub: [] + _selector: runHelper(curProp, buffer.trim()) || (curProp + ' ' + buffer).trim(), + _rules: '', + _nested: [] } mode = PROP curProp = buffer = '' @@ -314,15 +320,15 @@ const makeZ = (conf = {}) => { const createStyle = memo(rules => { const parsed = parseRules(rules) const className = - (parsed.name ? parsed.name.replace(/\s+/, '-') + '-' : '') + id + '-' + (idCount += 1) + (parsed._name ? parsed._name.replace(/\s+/, '-') + '-' : '') + id + '-' + (idCount += 1) appendRule('.' + className, parsed) - return new Style(className + (parsed.cmp ? ' ' + parsed.cmp : '')) + return new Style(className + (parsed._compose ? ' ' + parsed._compose : '')) }) const z = handleTemplate(createStyle) z.global = handleTemplate(rules => appendRule(':root', parseRules(rules))) z.anim = handleTemplate(createKeyframes) - z.style = handleTemplate(rules => parseRules(rules).rul) + z.style = handleTemplate(rules => parseRules(rules)._rules) z.getSheet = () => style z.helper = spec => Object.assign(helpers, spec) z.setDebug = flag => (debug = flag)