Vue-cli: CSS not processed by PostCSS when css.extract is false

[adamwathan]

Version

3.0.1

Reproduction link

https://github.com/adamwathan/vue-cli3-extract-postcss-bug

Node and OS info

Node 10.9.0 / yarn 1.9.4 / macOS 10.13.6

Steps to reproduce

1. Create a new vue-cli project

2. Add a vue.config.js file with the following contents:

   module.exports = {
   css: {
     extract: false
   }
   }
   

3. Run npm run build

What is expected?

The final CSS injected by the JS in the dist folder is processed by the configured PostCSS plugins, like autoprefixer.

What is actually happening?

PostCSS plugins are not being applied, so even out of the box autoprefixer isn't working for example. You can see that the transform property in App.vue is not being duplicated with the -webkit prefix for example.

[doublemarked]

I'm experiencing this same problem with 3.0.1, after upgrading from one of the late RCs. It only happens when building for production, and only for files/blocks matching the postcss rule.

I've debugged it a bit. It appears to have been introduced with the following commit,
https://github.com/vuejs/vue-cli/commit/a2c767efc4221b6afbaa33a065a5560b4e44debc

The problem with that commit is that it adds cssnano to the postcss config, and later when postcss-loader loads up, it already has a config object passed in so it doesn't load any of the config (including plugins etc) from package.json / postcssrc, etc. See here: https://github.com/postcss/postcss-loader/blob/master/src/index.js#L36-L52

Not sure what the right fix is to this, but looking forward to figuring out how to fix our build! :)

This has been particularly elusive btw because it only shows up in production builds, due to https://github.com/vuejs/vue-cli/blame/dev/packages/%40vue/cli-service/lib/config/css.js#L60

[yyx990803]

I have located the problem down in vue-loader's loader dedupe causing one instance of postcss-loader to be removed. Should be fixed in the next patch release of vue-loader itself.

[yyx990803]

Fixed in [email protected]

[doublemarked]

@yyx990803 thank you for this fix, I see and understand what you mean regarding vue-loader.

I have a question about the associated commit you made to @vue/cli-service: https://github.com/vuejs/vue-cli/commit/a2d109508fac785d95eec8ee69976925cc367463

You've changed the order of the loaders, causing cssnano run before the postcss-loader which we can configure, and it appears to be causing some problems in our build. For instance, we use postcss-nesting, and cssnano is getting basically invalid CSS (things like & .someclass { ... }) and is "deduping" things in a way that breaks the styles.

[LinusBorg]

Please don't expect an answer for a "are we doig is correctly?" type qestion on a closed issue. Your notification willl be lost in the Feed very quickly.

Either use our forum to ask for help or, if you suspect this issue to be a bug, open a fresh issue. Thanks.

[doublemarked]

@LinusBorg I will remove the final statement, which was really out of politeness. The rest of the comment remains: the commit made associated w/ his fix for this issue seems to be breaking our build.

[LinusBorg]

I'll reopen the issue, I think I see what you are referring to with the order.

@yyx990803 / @sodatea it seems this commit (https://github.com/vuejs/vue-cli/commit/a2d109508fac785d95eec8ee69976925cc367463) really breaks builds using postcss with non-CSS syntax

Why was the order changed in this commit? the commit msg imdicates that the original order has other problems?

[sodatea]

@doublemarked
Can't reproduce locally (screencast here: https://asciinema.org/a/PZf3fcTwGXXrQhlfeJKBkmA1O).
Please open a new issue with a valid reproduction.

[sodatea]

@doublemarked
Discussed with Evan on Slack and he said it was a careless mistake (forgot webpack loader chain executes in reverse order), so I've reverted this commit.

Though I don't think it'll cause major issues as long as you don't define a custom parser, you can fix it in vue.config.js before we launch our next patch release:

module.exports = {
  chainWebpack: config => {
    const langs = ["css", "postcss", "scss", "sass", "less", "stylus"];
    const matches = ["vue-modules", "vue", "normal-modules", "normal"];

    langs.forEach(lang =>
      matches.forEach(match => {
        config.module
          .rule(lang)
          .oneOf(match)
          .use("cssnano")
          .before('postcss-loader')
      })
    );
  }
}

[doublemarked]

@sodatea TYVM! Both for your initial attempt at reproduction and for following-up on this. I can say that our build is having unexpected wonky changes to CSS output that are fixed when reversing that commit or applying your chainWebpack patch. I hadn't yet managed to condense it into a sample, though.