Disable colormin feature from cssnano
#53393
Open
+39
−1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RobinMalfait
requested review from
timneutkens,
ijjk,
shuding,
huozhi and
a team
as code owners
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
force-pushed
the
fix/remove-colormin-from-cssnano
branch
from
2353605
to
9124f0f
Compare
Took example code from another existing test: `test/e2e/app-dir/app-css/index.test.css`
|
I've opened an issue on cssnano as well in case they'd like to make some changes around this upstream, but since they are looking for new maintainers on that package it might be something anyone can easily prioritize right now and might not happen very quickly: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
cssnano by default tries to convert
rgbcolors to anhslacolor when thehslacolor 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:
Output:
(I pretty printed it to make the diff a bit nicer).
If we would convert this
hslacolor back torgbsyntax, then it results in:Comparing the original value with the last value, then you can see the difference:
html { - background-color: rgb(143 101 98 / 43%); + background-color: rgb(143 100 97 / 43%); /* ^ ^ */ }To solve this issue, we can just disable the
colorminminification ofcssnanoentirely.