Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve collapsing of duplicate declarations #6856

Merged
merged 2 commits into from Jan 3, 2022
Merged

Improve collapsing of duplicate declarations #6856

merged 2 commits into from Jan 3, 2022

Commits on Jan 3, 2022

  1. 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
    RobinMalfait committed Jan 3, 2022
    Copy the full SHA
    d99ff19 View commit details
    Browse the repository at this point in the history
  2. update changelog

    RobinMalfait committed Jan 3, 2022
    Copy the full SHA
    99748d5 View commit details
    Browse the repository at this point in the history