Weird behaviour of autoprefixer, when using linear-gradient

[floxo115]

Hi! I found some unexpected behaviour with the autoprefixing of linear-gradient. Everything works as long as i run the app with "npm run dev". A -webkit-gradient is generated and everything looks as expected. But if I run "npm run build" and serve the computed dir with a server, there is no -wekit-gradient.

I tested this behaviour with a newly installed version of the webpack template and simply changed the style of the App.vue file to:

<style>
#app {
  background-image: linear-gradient(left, red, blue);
}
</style>

If this is a intendet behaviour, I'am sorry for opening an issue, but I find it a little bit odd and did't see any other existing issue related to it.

[LinusBorg]

At first, I was abit perplexed, but a quick trial and error showed me that's not so much a problem with "the" (postcss-) Autoprefixer (which adds the prefixes), as it is with optimize-css-assets-webpack-plugin, which in turn uses cssnano to minify css, whih removes prefixes based on the browsersupport defined in package.json's browsersList field.

http://cssnano.co/optimisations/autoprefixer/

Why exactly does that happen, and which one is right (the autoprexier adding it initially, or cssnano stripping it again afterwards)?

When I look up linear-gradient on caniuse.com, it states that it's supported in all browsers, so there's no need for this prefix at all:

https://caniuse.com/#search=linear-gradient

However When I run your example in my Chrome browser, the background really doesn't show up, and devtools tells me that linear-gradient(left, red, blue) is an invalid property value.

So I went to MDN, which made me aware that this comes down to a simply syntax problem:

[the first argument] consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.

In other words: your CSS syntax was simply invalid, but that problem was masked by the autoprefixer who turned you invalid CSS into a valid prefixed counterpart.

---

// wrong
background-image: linear-gradient(left, red, blue);
// right
background-image: linear-gradient(to left, red, blue);

---