fix: if the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` #296

yisibl · 2022-09-17T18:07:55Z

Currently only enabled when minify: true.

let opts = {
  minify: true,
  targets: {
    chrome: 61 << 16,
  }
}

Input

.foo {
  background-color: transparent;
  color: rgba(0, 0, 0, 0);
  border-color: rgb(0 0 0 / 0%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), transparent);
}

Before

.foo{color:rgba(0,0,0,0);background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0));border-color:rgba(0,0,0,0)}

After

This is consistent with cssnano.

.foo{color:transparent;background:linear-gradient(90deg,transparent,transparent);border-color:transparent}

…onverted to `transparent`

yisibl · 2022-09-18T03:45:48Z

src/values/color.rs

@@ -370,24 +370,30 @@ impl ToCss for CssColor {
          // If the #rrggbbaa syntax is not supported by the browser targets, output rgba()
          if let Some(targets) = dest.targets {
            if !Feature::CssRrggbbaa.is_compatible(targets) {


@devongovett Maybe it would be better to convert only when dest.minify = true here too? I don't really like the parser conversion format if the CSS is not compressed. What do you think?

fix: if the browser doesn't support #rrggbbaa color syntax, it is c…

3753a38

…onverted to `transparent`

devongovett approved these changes Sep 17, 2022

View reviewed changes

devongovett merged commit 1e7d0f9 into parcel-bundler:master Sep 17, 2022

yisibl commented Sep 18, 2022

View reviewed changes

yisibl deleted the minify-transparent-keyword branch September 18, 2022 03:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: if the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` #296

fix: if the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` #296

yisibl commented Sep 17, 2022 •

edited

yisibl Sep 18, 2022

devongovett Sep 18, 2022

fix: if the browser doesn't support #rrggbbaa color syntax, it is converted to transparent #296

fix: if the browser doesn't support #rrggbbaa color syntax, it is converted to transparent #296

Conversation

yisibl commented Sep 17, 2022 • edited

Input

Before

After

yisibl Sep 18, 2022

Choose a reason for hiding this comment

devongovett Sep 18, 2022

Choose a reason for hiding this comment

fix: if the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` #296

fix: if the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` #296

yisibl commented Sep 17, 2022 •

edited