Autoprefixer & postcss plugins on postcss loader

[wab]

Submit a feature request or bug report

• I've read the guidelines for Contributing to Roots Projects
• This is a feature request
• This is a bug report
• This request isn't a duplicate of an existing issue
• I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse forums

---

What is the current behavior?

Autoprefixer (or any postcss plugin like postcssFlexbugsFixes) seems not to proceed on scss files.

What is the expected or desired behavior?

Prefix or plugin result on output css file

---

Bug report

Please provide steps to reproduce, including full log output:

with loader

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

and this config :

new webpack.LoaderOptionsPlugin({
      minimize: config.enabled.minify,
      debug: config.enabled.watcher,
      stats: {
        colors: true,
      },
      postcss: [
        autoprefixer({
          add: true,
          browsers: [
            'last 2 versions',
            'android 4',
            'opera 12',
          ],
        }),
      ],
      eslint: {
        failOnWarning: false,
        failOnError: true,
      },
 }),

for example a simple main.scss entry like

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

.move {
  animation: move 10s steps(10) infinite alternate;
}

.flex {
  display: flex;
  > * {
    flex: 1;
  }
}

.fs {
  &:fullscreen {
    width: 100vw;
    height: 100vh;
  }
}

output to main.css

@keyframes move {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 100px;
    left: 100px;
  }
}

.move {
  animation: move 10s steps(10) infinite alternate;
}

.flex {
  display: flex;
}

.flex > * {
  flex: 1;
}

.fs:fullscreen {
  width: 100vw;
  height: 100vh;
}


/*# sourceMappingURL=main.css.map*/

example of output main.css with gulp & sage-8 with the same entry :

@-webkit-keyframes move{0%{top:0;left:0}to{top:100px;left:100px}}@keyframes move{0%{top:0;left:0}to{top:100px;left:100px}}.move{-webkit-animation:move 10s steps(10) infinite alternate;animation:move 10s steps(10) infinite alternate}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.flex>*{-webkit-box-flex:1;-ms-flex:1;flex:1}.fs:-webkit-full-screen{width:100vw;height:100vh}.fs:-moz-full-screen{width:100vw;height:100vh}.fs:-ms-fullscreen{width:100vw;height:100vh}.fs:fullscreen{width:100vw;height:100vh}
/*# sourceMappingURL=main.css.map */

Please describe your local environment:

WordPress version: 4.6

OS: OS X Yosemite

NPM/Node version: 5.6.0 / 3.3.3

Where did the bug happen? Development or remote servers?

development but same with npm run build:production

Is there a related Discourse thread or were any utilized (please link them)?

maybe this one : https://discourse.roots.io/t/flexbox-prefix-not-being-compiled/7797

[itmustbe]

I am having this problem too with Sage-9.0.0-alpha3 out-of-the-box with Wordpress 4.6.1 and NPM/Node 6.9.0/3.10.8 on OS X El Capitan. The issue is happening locally during development and when running build:production. All properties that require Autoprefixer are affected (not just flex). Basically PostCSS/Autoprefixer just isn't firing for whatever reason, either in development or production). I tried updating my node modules with npm; when I tried updating postcss-loader from 0.13.0 to 1.0.0 (thinking that might help) I ran into a different error to do with a missing PostCSS config file so I rolled back to 0.13.0 (I also realized that we cannot update Webpack past 2.1.0-beta22 because of breaking changes). No matter what I try, whether it be a fresh install of Sage with nothing changed at all, or whether I tweak various settings in webpack.config.js trying to get Autoprefixer to work, and whether or not I update node modules, I cannot get Autoprefixer to do its thing, and have temporarily resorted to writing the prefixes in myself :(

[itmustbe]

Related to this Discourse thread: https://discourse.roots.io/t/sage-9-postcss-and-autoprefixer-not-working-straight-out-of-the-box/7974

[coffeeneed]

Same problem here.

Loader

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

Config

    new webpack.LoaderOptionsPlugin({
      minimize: config.enabled.minify,
      debug: config.enabled.watcher,
      stats: { colors: true },
      postcss: [
        autoprefixer({
          browsers: [
            'last 3 versions',
            'android 4',
            'opera 12',
            '> 1%'
          ],
        }),
      ],
      eslint: {
        failOnWarning: false,
        failOnError: true,
      },
    }),

CSS

body {
  font: 100%;
  background: 000;
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
}
div {
   display: flex;
}
section {
-ms-transition:     -ms-transform .3s ease-in-out;
}

Environment
Windows 10
Latest WP as of today
Latest Sage as of today
npm 3.10.9
Node 6.9.1
xampp local server

[wab]

maybe a track in the postcss/autoprefixer documentation : https://github.com/postcss/autoprefixer#no-prefixes-in-production

[coffeeneed]

@wab Thanks for your efforts. Even though it's strange that not too many report this error, this might be the problem. However, this happens on run npm build and not just production with npm run build:production. If not Autoprefixer's definition of production is something else.

To be sure, I also tried with remove: false and add: false options, and it didn't do anything.

[retlehs]

closed by #1751