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.

Sign up for GitHub

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

Jump to bottom

Disable colormin feature from cssnano #53393

Open
wants to merge 4 commits into
base: canary
Choose a base branch
from
Open

Disable colormin feature from cssnano #53393

wants to merge 4 commits into from
+39 −1

Commits on Jul 31, 2023

  1. disable colormin feature from cssnano 

    cssnano by default tries to convert `rgb` colors to an `hsla` color when
the `hsla` color is shorter for minification purposes.

The issue with this is that the colors aren't the same and we are losing
data when converting to `hsla`.

Input:
```css
html {
  background-color: rgb(143 101 98 / 43%);
}
```

Output:
```css
html {
  background-color: hsla(4, 19%, 47%, .43);
}
```
(I pretty printed it to make the diff a bit nicer).

If we would convert this `hsla` color back to `rgb` syntax, then it
results in:
```css
html {
  background-color: rgb(143 100 97 / 43%);
}
```

Comparing the original value with the last value, then you can see the
difference:
```diff
  html {
-   background-color: rgb(143 101 98 / 43%);
+   background-color: rgb(143 100 97 / 43%);
  /*                            ^  ^        */
  }
```

To solve this issue, we can just disable the `colormin` minification of
`cssnano` entirely.
    @RobinMalfait
    RobinMalfait committed Jul 31, 2023
    Configuration menu
    Copy the full SHA
    9124f0f View commit details
    Browse the repository at this point in the history

  2. add cssnano-colormin e2e test

    @RobinMalfait
    RobinMalfait committed Jul 31, 2023
    Configuration menu
    Copy the full SHA
    cafa6ff View commit details
    Browse the repository at this point in the history

  3. use app-dir test setup instead

    @RobinMalfait
    RobinMalfait committed Jul 31, 2023
    Configuration menu
    Copy the full SHA
    e027303 View commit details
    Browse the repository at this point in the history

  4. use window.getComputedStyle for retrieving the color 

    Took example code from another existing test: `test/e2e/app-dir/app-css/index.test.css`
    @RobinMalfait
    RobinMalfait committed Jul 31, 2023
    Configuration menu
    Copy the full SHA
    5ff6629 View commit details
    Browse the repository at this point in the history