From d99ff19bb9073c5e1b3a321d2d2a318208f3597a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 3 Jan 2022 14:44:23 +0100 Subject: [PATCH] improve collapsing of duplicate properties In theory, we don't have to do anything because the browser is smart enough to figure everything out. However, leaving in duplicate properties is not that ideal for file size. Our previous method was pretty simple: if you see a declaration you already saw in this rule, delete the previous one and keep the current one. This works pretty well, but this gets rid of **all** the declarations with the same property. This is not great for overrides for older browsers. In a perfect world, we can handle this based on your target browser but this is a lot of unnecessary complexity and will slow things down performance wise. Alternative, we improved the solution by being a bit smarter: 1. Delete duplicate declarations that have the same property and value (this will get rid of **exact** duplications). 2. Delete declarations with the same property and the same **unit**. This means that we will reduce this: ```css .example { height: 50%; height: 100px; height: 20vh; height: 30%; height: 50px; height: 30vh; transform: var(--value); transform: var(--value); } ``` To: ```diff-css .example { - height: 50%; /* Another height exists later with a `%` unit */ - height: 100px; /* Another height exists later with a `px` unit */ - height: 20vh; /* Another height exists later with a `vh` unit */ height: 30%; height: 50px; height: 30vh; - transform: var(--value); /* Value is too complex, but is **exactly** the same as the one below */ transform: var(--value); } ``` This will reduce the values that we are 100% sure that can be safely removed. This will still result in some overrides but the browser can handle those for you. Fixes: #6844 --- src/lib/collapseDuplicateDeclarations.js | 67 ++++++- tests/apply.test.js | 1 + tests/collapse-duplicate-declarations.test.js | 175 ++++++++++++++++++ 3 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 tests/collapse-duplicate-declarations.test.js diff --git a/src/lib/collapseDuplicateDeclarations.js b/src/lib/collapseDuplicateDeclarations.js index 9164f822ea78..d310d58b88b6 100644 --- a/src/lib/collapseDuplicateDeclarations.js +++ b/src/lib/collapseDuplicateDeclarations.js @@ -3,6 +3,7 @@ export default function collapseDuplicateDeclarations() { root.walkRules((node) => { let seen = new Map() let droppable = new Set([]) + let byProperty = new Map() node.walkDecls((decl) => { // This could happen if we have nested selectors. In that case the @@ -14,15 +15,79 @@ export default function collapseDuplicateDeclarations() { } if (seen.has(decl.prop)) { - droppable.add(seen.get(decl.prop)) + // Exact same value as what we have seen so far + if (seen.get(decl.prop).value === decl.value) { + // Keep the last one, drop the one we've seen so far + droppable.add(seen.get(decl.prop)) + // Override the existing one with the new value. This is necessary + // so that if we happen to have more than one declaration with the + // same value, that we keep removing the previous one. Otherwise we + // will only remove the *first* one. + seen.set(decl.prop, decl) + return + } + + // Not the same value, so we need to check if we can merge it so + // let's collect it first. + if (!byProperty.has(decl.prop)) { + byProperty.set(decl.prop, new Set()) + } + + byProperty.get(decl.prop).add(seen.get(decl.prop)) + byProperty.get(decl.prop).add(decl) } seen.set(decl.prop, decl) }) + // Drop all the duplicate declarations with the exact same value we've + // already seen so far. for (let decl of droppable) { decl.remove() } + + // Analyze the declarations based on its unit, drop all the declarations + // with the same unit but the last one in the list. + for (let declarations of byProperty.values()) { + let byUnit = new Map() + + for (let decl of declarations) { + let unit = resolveUnit(decl.value) + if (unit === null) { + // We don't have a unit, so should never try and collapse this + // value. This is because we can't know how to do it in a correct + // way (e.g.: overrides for older browsers) + continue + } + + if (!byUnit.has(unit)) { + byUnit.set(unit, new Set()) + } + + byUnit.get(unit).add(decl) + } + + for (let declarations of byUnit.values()) { + // Get all but the last one + let removableDeclarations = Array.from(declarations).slice(0, -1) + + for (let decl of removableDeclarations) { + decl.remove() + } + } + } }) } } + +let UNITLESS_NUMBER = Symbol('unitless-number') + +function resolveUnit(input) { + let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input) + + if (result) { + return result[1] ?? UNITLESS_NUMBER + } + + return null +} diff --git a/tests/apply.test.js b/tests/apply.test.js index c74bb2875f5d..59807a633129 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -351,6 +351,7 @@ test('@applying classes from outside a @layer respects the source order', async await run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` .baz { + text-decoration-line: underline; text-decoration-line: none; } diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js new file mode 100644 index 000000000000..db165186469b --- /dev/null +++ b/tests/collapse-duplicate-declarations.test.js @@ -0,0 +1,175 @@ +import { run, css, html } from './util/run' + +it('should collapse duplicate declarations with the same units (px)', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .example { + height: 100px; + height: 200px; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .example { + height: 200px; + } + `) + }) +}) + +it('should collapse duplicate declarations with the same units (no unit)', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .example { + line-height: 3; + line-height: 2; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .example { + line-height: 2; + } + `) + }) +}) + +it('should not collapse duplicate declarations with the different units', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .example { + height: 100px; + height: 50%; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .example { + height: 100px; + height: 50%; + } + `) + }) +}) + +it('should collapse the duplicate declarations with the same unit, but leave the ones with different units', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .example { + height: 100px; + height: 50%; + height: 20vh; + height: 200px; + height: 100%; + height: 30vh; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .example { + height: 200px; + height: 100%; + height: 30vh; + } + `) + }) +}) + +it('should collapse the duplicate declarations with the exact same value', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .example { + height: var(--value); + color: blue; + height: var(--value); + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .example { + color: blue; + height: var(--value); + } + `) + }) +}) + +it('should work on a real world example', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + + @layer utilities { + .h-available { + height: 100%; + height: 100vh; + height: -webkit-fill-available; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .h-available { + height: 100%; + height: 100vh; + height: -webkit-fill-available; + } + `) + }) +})