Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve collapsing of duplicate declarations (#6856)
* 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 * update changelog
- Loading branch information