postcss-preset-env deletes duplicate props / breaks linear gradients

[mnpenner]

Bug description

I have background-image defined 3 times in my source, 1 for each vendor prefix. postcss-preset-env is mangling it to only keep the last one. I don't care if it drops some outdated prefixes, but it no longer works in Chrome.

Source CSS

.breadcrumb_area {
    background-image: -moz-linear-gradient(180deg, #222 0%, #555 100%);
    background-image: -webkit-linear-gradient(180deg, #222 0%, #555 100%);
    background-image: -ms-linear-gradient(180deg, #222 0%, #555 100%);
    position: relative;
    z-index: 1;
    padding: 235px 0 125px;
    overflow: hidden;
}

Expected CSS

Should include whatever permutations of linear-gradient that work in all the major browsers.

Actual CSS

.breadcrumb_area {
    background-image: -ms-linear-gradient(180deg, #222 0%, #555 100%);
    position: relative;
    z-index: 1;
    padding: 235px 0 125px;
    overflow: hidden;
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

Yes

Debug output

Too much reading. Ctrl+F "debug" doesn't show anything on that page.

Here's the output from my terminal without debug:

❯ npx @csstools/csstools-cli postcss-preset-env style4.css
.breadcrumb_area {
    background-image: -ms-linear-gradient(180deg, #222 0%, #555 100%);
    position: relative;
    z-index: 1;
    padding: 235px 0 125px;
    overflow: hidden;
}

Extra config

No config.

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

9

What OS are you experiencing this on?

Linux

Node Version

20

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Hi @mnpenner,

The underlying issue is upstream in autoprefixer : postcss/autoprefixer#1461

The maintainers of autoprefixer have indicated that they are looking for help with that issue.

---

There are multiple ways to resolve this :

• configure autoprefixer to not remove any prefixed CSS with { remove: false }
• add an unprefixed variant : linear-gradient(180deg, #222 0%, #555 100%);
• help to resolve the underlying issue in autoprefixer
• combination of the above

I've also added test coverage for the example in your original post : 5576eb0

This illustrates how you can set { remove: false } for autoprefixer when using postcss-preset-env.

[romainmenke]

I took a brief look at the upstream issue and I don't think it will be fixed :/

Removing prefixed values was always a dubious subfeature of autoprefixer and it has obvious bugs that are really hard to resolve. Adding prefixes is just much easier than removing them.

I think it is better to use autoprefixer as designed :

• write non-prefixed CSS
• use autoprefixer to add prefixes

closing because it is an upstream issue

[mnpenner]

Hi @romainmenke, thanks for looking into this!

The only reason I wanted autoprefixer to possibly remove prefixes is because I inherited a ton of old CSS and I didn't want to comb over it to modernize everything by hand. Otherwise I would just use the newest standard and let autoprefixer add the prefixes as needed.

In that case, I will try the { remove: false } option; thanks for the suggestion!

[mnpenner]

FYI, even with remove: false it removes @supports. e.g.

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
    .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

Becomes

@supports (transform-style:preserve-3d) {
    .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

There is another option, {supports: false} that will make it not touch the @supports, but I don't think it will add them either with this option.

[romainmenke]

Yeah, still an upstream issue in autoprefixer :)
So would be much more valuable to open an issue and discuss this there.

But thank you for the extra info here.