Strange behavior Autoprefixer

[alxshelepenok]

This was observed in my Blog and gatsby-starter-lumen.

I changed the cssnext configuration in gatsby-node.js:

var rucksack = require('rucksack-css')
var lost = require("lost")
var cssnext = require("postcss-cssnext")

exports.modifyWebpackConfig = function(config, env) {
    config.merge({
        postcss: [
            lost(),
            rucksack(),
            cssnext({
                browsers: ['>1%', 'last 2 versions']
            })
        ]
    })

    return config
};

CSS-prefixes are not changed. But they changed after adding postcss-loader to inline CSS html.js#L18. (I think that this is bad practice):

if (process.env.NODE_ENV === 'production') {
    css = <style dangerouslySetInnerHTML={ {    __html: require('!raw!postcss!./public/styles.css')} } />
}

Perhaps this is due to cssnano, which is used in conjunction with cssnext. Because if you remove cssnano of webpack.config.js, then the problem is solved. https://github.com/wpioneer/gatsby/commit/ba330c22759a3a07e244262a0c95625fa0ba7bee

Therefore, I think it's better to use css-loader, which is already used cssnano:
http://cssnext.io/postcss/#postcss-loader
https://github.com/webpack/css-loader#minification

[KyleAMathews]

Sounds reasonable :-) I only use inline styles so not entirely up to speed on this stuff. Would you like to put together a PR to make the updates?

[KyleAMathews]

Also, you want to add a link to your starter to the README? It's looking great!

[alxshelepenok]

Ok, then I'll create a PR now!

Also, you want to add a link to your starter to the README? It's looking great!

Yeah, it would be great =) In the Readme there is a section with the official starters

[KyleAMathews]

@WPioneer I added Lumen just now to the README :-) https://github.com/gatsbyjs/gatsby#gatsby-starters

Is there a online demo of it somewhere? I'll add a link for that as well if there is.

[alxshelepenok]

@KyleAMathews Thank you,

I added ;)

[marcelkalveram]

I'm struggling to modify the autoprefixer settings as well. I've tried your solution @WPioneer but can't get any prefixed value. I need support for IE9.

I've even tried changing the default values in Gatsby's webpack.config.js from 'last 2 browsers' to 'last 2 browsers, ie9' but that didn't help either. Not sure what's going on.

I couldn't find cssnanoanywhere either and I get the same output for develop and production. If anyone could point me in the right direction, that would be much appreciated.

[marcelkalveram]

For anyone struggling with this and stumbling upon this thread. I solved it the following way:

var extractTextWebpackPlugin = require('extract-text-webpack-plugin');

exports.modifyWebpackConfig = function(config, env) {

  if (env === 'build-css') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loader: extractTextWebpackPlugin.extract(['css?minimize', 'autoprefixer?{browsers:"last 2 versions,ie 9"}', 'sass']),
    })
  }

  if (env === 'develop') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loaders: ['style', 'css', 'autoprefixer?{browsers:"last 2 versions,ie 9"}', 'sass'],
    })
  }

  return config
};

I realised that using SASS the PostCSS module wouldn't even be triggered, thus the cssnext config that I was trying to modify wasn't even used.

[zebapy]

@marcelkalveram I'm trying your solution but I'm getting:

ERROR in ./~/css-loader!./~/autoprefixer/lib/autoprefixer.js?{browsers:"last 2 versions,ie 9"}!./~/sass-loader!./css/main.scss
Module build failed: Unknown word (2:7)

  1 | function (css, result) {
> 2 |       var prefixes, ref;
    |       ^
  3 |       prefixes = loadPrefixes({
  4 |         from: (ref = css.source) != null ? ref.input.file : void 0
  5 |       });

 @ ./css/main.scss 4:14-202 13:2-17:4 14:20-208

Any ideas?

[marcelkalveram]

@zebapy That looks like a problem in your main.scss. Can you paste the content of this file in here?

[zebapy]

@marcelkalveram I removed all contents of main.scss (also tried something basic with a body { background-color: red }) and am still getting the error.

[zebapy]

@marcelkalveram no luck still. any ideas?

[KyleAMathews]

autoprefixer-loader suggests using postcss instead https://github.com/passy/autoprefixer-loader

postcss-loader is already setup for prefixing so you should be able to do something like:

loaders: ['style', 'css', 'postcss', 'sass'],

You'd then need to modify the postcss settings to prefix for more than just the past two versions of browsers —

gatsby/lib/utils/webpack.config.js

Line 354 in 80370d7

require('postcss-cssnext')({ browsers: 'last 2 versions' }),

[zebapy]

Thanks @KyleAMathews

For others, this is what I needed because I'm using Sass:

var extractTextWebpackPlugin = require('extract-text-webpack-plugin');

exports.modifyWebpackConfig = function(config, env) {

  config.merge({
    postcss (wp) {
      return [
        require('postcss-cssnext')({ browsers: ['last 2 versions', '> 2%', 'ie 9'] }),
      ]
    },
  })

  if (env === 'build-css') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loader: extractTextWebpackPlugin.extract(['css?minimize', 'postcss', 'sass']),
    })
  }

  if (env === 'develop') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loaders: ['style', 'css', 'postcss', 'sass'],
    })
  }

  return config
};

[kriim]

I had to adapt the example above a little to get it working. I guess partly due to API changes of Gatsby?

Main changes are: use destructuring to get the config and use stage instead of env.

Additionally I enabled source maps for development stage by adding the ?sourceMap query parameters.

Maybe this helps others who are stumbling over this too:

var extractTextWebpackPlugin = require('extract-text-webpack-plugin');

exports.modifyWebpackConfig = function ({ config, stage }) {
  config.merge({
    postcss(wp) {
      return [
        require('postcss-cssnext')({ browsers: ['last 2 versions', '> 2%', 'ie 9'] }),
      ]
    },
  })

  if (stage === 'build-css') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loader: extractTextWebpackPlugin.extract(['css?minimize', 'postcss', 'sass']),
    })
  }

  if (stage === 'develop') {
    config.removeLoader('sass');
    config.loader('sass', {
      test: /\.(sass|scss)/,
      exclude: /\.module\.(sass|scss)$/,
      loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap'],
    })
  }

  return config
};

[antonjb]

@kriim thanks for the example, it was helpful. Something is confusing me though, why in the build stage is it loader(singular) but in develop it's loaders(plural)?

[kriim]

It was like this in the config I adapted. I guess it's due to the extractTextWebpackPlugin which wraps the other loaders in the build-css stage.

But I'm new to the Webpack game myself ;) ...

[dustinhorton]

Unfortunately the proposed workaround didn't work for me—still no prefixing.