Flexbox prefix not being compiled

sage
1

A bit of a strange one - when compiling for production a specific flexbox prefix:

-webkit-flex

seems to be being ignored. So this:

.header__quote{
  -ms-flex: 1 0 0%;
  -webkit-flex: 1 0 0%;
  flex: 1 0 0%;
}

is compiling down to this:

.header__quote{-ms-flex:1 0 0%;flex:1 0 0%;}

Edit: of course autoprefixer should handle all this - so I added ‘safari 8’ specifically to webpack.config.js:

      postcss: [
        autoprefixer({
          browsers: [
            'last 2 versions',
            'android 4',
            'opera 12',
            'safari 8',
          ],
        }),
      ],

but still not getting the output that:
https://autoprefixer.github.io/
with the same filters would indicate.

Screen Shot 2016-10-03 at 21.02.33.png1048×154 13.9 KB

any ideas why or how to fix? I suspect that the minification is stripping the prefix?

I need the prefix for older safari versions

Thanks in advance!

2

You’ll probably want to mess with the autoprefixer options:

Sage 9: https://github.com/roots/sage/blob/master/assets/build/webpack.config.js#L167-L173
Sage 8: https://github.com/roots/sage/blob/sage-8/gulpfile.js#L101-L105

3

@kalenjohnson sorry was editing the post as you posted - see my expanded explanation.

I already added the safari-8 to the webpack postcss config. The prefix is still being removed

4

I’m running up against a bit of a wall. From what I’ve read there are 3 possible candidates for what is happening, but I’m not sure how to configure things best to test.

cssnano - run on production - also contains auto prefixer - though I’m not sure of how to adjust config:
webpack.config.production.js

cssProcessorOptions: { autoprefixer: { remove: false }, discardComments: { removeAll: true } },

has no effect - though removing ‘discardComments’ setting does leave comments

setting browser array in webpack.config.js to

  postcss: [
    autoprefixer({
      browsers: [
        '>1%',
        'last 4 versions',
        'android 4',
        'opera 12',
        'Firefox ESR',
        'not ie < 9',
      ],
    }),
  ],

also has no effect.

I’ve also tried to disable uglifyJs:

maybe someone with abit more webpack config knowledge than me knows how to adjust/ debug this?

5

@chrisk2020 Theat browserlist covers -webkit-flex so it’s probably to do with where in your webpack config you’re specifying postcss.

If you’re using the postcss-loader make sure it’s at the root (the same level as entry, output, etc.) and it should get picked up.

1 Like
6

unfortunately this doesn’t resolve the issue - we’ve also tried moving the browser list to a separate file at the same level as pakage.json

I’m stumped!

7

I was having similar problem (I think). Try to add:

      autoprefixer: {
        add: true,
        browsers: [
          'last 4 versions',
          'android 4',
          'opera 12',
          'ie 9'
        ]      
      }

to the cssProcessorOptions. Mine looks as follows:

  webpackConfig.plugins.push(new OptimizeCssAssetsPlugin({
    cssProcessor: cssnano,
    cssProcessorOptions: {
      discardComments: { removeAll: true },
      safe: true, // crucial in order not to break anything
      autoprefixer: {
        add: true,
        browsers: [
          'last 4 versions',
          'android 4',
          'opera 12',
          'ie 9'
        ]      
      }
    },
    canPrint: true
  }));
8

Thanks @jmarceli that has worked and the correct prefix is there.

I’d hope that there is a way to avoid setting the browser array twice - once for postcss and once for css nano. From what i’ve read there is some talk of removing autoprefixer from cssnano in future releases…

Thanks for the fix though!

9

I’ve investigated that issue some time ago and it is probably some configuration bug in production build. It seems that prefixes are not added before optimization that’s why executing autoprefixer once more through cssnano is required to add those prefixes.
I’m not reporting this as a bug because I didn’t test newest release alpha.3 (because of performance bugs which make it unusable for me).

10

I have the same issue, local/dev fine but staging not working.

I am a bit lost as how you addressed the issue with the above. Was it in gulpfile.js? Unfortunately that doesn’t resolve the issue for me :frowning:

.pipe(concat, filename)
    .pipe(autoprefixer, {
      browsers: [
        'last 4 versions',
        'android 4',
        'opera 12',
        'ie 9'
      ]
    })

Any help would be appreciated, running sage 8.5.0

1 Like
11

Hi buretta,
My issue was with sage 9, so a different flow with webpack etc. and not using gulp
Off the top of my head try adding the
add: true
variable.

12

Yah, I’m having the same issue a @buretta. I can’t even add a -webkit-flex manually without it being stripped away. Would very much appreciate a fix.

13

Can confirm still having this issue after trying what @jmarceli implemented. No flexbox for safari with build:production. @chrisk2020 did you do anything else besides edit cssnano options to get flexbox correctly outputting using build:production?

14

After hours of digging and testing, I got it to work. In addition to using this code posted by @chrisk2020, I added a few extras just to be safe:

cssProcessorOptions: {
        discardComments: { removeAll: true },
        autoprefixer: {
          safe: true, // crucial in order not to break anything
          add: true,
          remove: false,
          browsers: [
            'last 4 versions',
            '> 2%'
          ]
        }
      }

The trick that worked for me was I disabled the css-loader for the sass files to autoprefix.

{
    test: /\.scss$/,
    include: config.paths.assets,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style',
      loader: [
        `css?-autoprefixer`,
        'postcss',
        `resolve-url?${sourceMapQueryStr}`,
        `sass?${sourceMapQueryStr}`
      ]
    }

Hope this helps!!

I read about it here:

1 Like
15

My fix for Sage 8 was to disable the autoprefixer in cssNano:

 .pipe(cssNano, {
      safe: true,
      autoprefixer:false
 })

You can also set autoprefixer: { remove:false }

1 Like
16

I was facing this very problem on Sage 9 today and ended up fixing my issues by moving the order of the plugins options in: postcss.config.js

Mine looks like:

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      autoprefixer: true,
    },
  };
};

Might help no one but perhaps help somebody! :smiley: