Build breaks when using linear-gradient

[imtbl]

I'm using Plyr in one of my projects. Plyr uses linear-gradient, which seems to be causing issues when building with postcss-preset-env enabled, in particular the following occurence: https://github.com/sampotts/plyr/blob/3a8332bdb30e1f64047a0f8a3e60647f0473301b/src/sass/components/sliders.scss#L22-L26

When building, it fails with the following error:

 ERROR  Failed to compile with 1 errors                                                                                          10:03:17 AM

 error  in ./node_modules/plyr/src/sass/plyr.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/index.js):
Unclosed bracket (509:39)

  507 |     -webkit-user-select: none;
  508 |             user-select: none;
> 509 |     background-image: -webkit-gradient(linear, left top, right top, from(currentColor), color-stop(0%, transparent);
      |                                       ^
  510 |     background-image: linear-gradient(to right, currentColor 0%, transparent 0% 0%;
  511 |     background-image: -webkit-gradient(linear, left top, right top, from(currentColor), to(transparent));
  512 |     background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); }

When I disable postcss-preset-env and build without it, it works fine.

I understand that you are mainly combining several other tools in one package and that the issue should lie within one of those tools. I am positive that this was not an issue in 6.0.7, so some change between that release and 6.2.0 might've broken it. I'm using the default configuration:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {}
  }
}

The Browserslist configuration is the following:

// .browserslistrc
> 1%
last 2 versions
not ie <= 8

I was assuming that the issue would be autoprefixer, but using it directly instead of postcss-preset-env works fine.

You can find an example here: https://github.com/mserajnik/postcss-preset-env-linear-gradient-issue

Just run yarn and yarn build and you can see the build breaking.

[imtbl]

Disabling the use of custom properties seems to work as a workaround (as seen here or here):

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      features: {
        'custom-properties': false
      }
    }
  }
}

This issue is likely related to this one.

[pascalduez]

From your output, there's indeed a syntax error in the CSS, missing a closing parenthesis:

-webkit-gradient(linear, left top, right top, from(currentColor), color-stop(0%, transparent);

[imtbl]

@pascalduez

Yes, this is because of the custom properties transpiling mentioned in my last comment. See also the links I‘ve referenced there.

No problem. :D

Edit, to clarify:

The CSS is built from a SCSS source (linked in my initial post) and then transformed/transpiled with PostCSS.

[pascalduez]

@mserajnik Oops, yeah sorry...

[jonathantneal]

This has been fixed in PostCSS Custom Properties v8.0.9 and published in PostCSS Preset Env v6.3.1. 🎉