PostCSS config cascade

[calebbergman]

What problem does this feature solve?

vue-loader's documentation states "Note: in 11.0.0 it is recommended to use a PostCSS config file instead. The usage is the same as postcss-loader." postcss-loader supports "Config Cascade" meaning, "you can use different postcss.config.js files in different directories. Config lookup starts from path.dirname(file) and walks the file tree upwards until a config file is found." I have been unable to get this to work using vue-loader.

Ultimately I'd like to be able to use the postcss-scopify plugin to scope all of the css (including vendor/framework styles) belonging to each vue app to mitigate/eliminate style creep inside and outside each app. Currently I have a single webpack.config.js file in my ASP.NET project which houses multiple Vue apps. I'd like to supply each Vue app its own postcss.config.js file in order to customize each Vue app's postcss-scopify plugin to use a unique scope.

Reproduce

1. Create a vue-cli project (vue init webpack app)
2. npm i -D postcss-scopify
3. Add to the .postcssrc.js file in the root directory an entry for postcss-scopify:

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-scopify": '#scope-1'
  }
}

4. Create a second .postcssrc.js file in './src/components' with the following code:

module.exports = {
   "plugins": {
      "postcss-scopify": "#scope-2"
   }
}

5. npm run build

Expected

I expect any styles in Hello[World].vue to be prefixed with '#scope-2' and other styles outside of './src/components' to be prefixed with '#scope-1'.

Reality

Only the postcss.config.js in the root directory is read and used. All styles (including the ones in Hello[World].vue) are prefixed with '#scope-1'.

[Jinjiang]

Currently vue-loader will cache the PostCSS config when it first compiles <style> code and it has no path config.

I have created a PR to add a vue-loader config { postcss: { cascade: true } which allow you to load PostCSS config for each pieces of <style> code. But as it disable the cache so it will slow down the whole process.

Thanks.