When selecting "separate config files", cli should .browserslistrc over package.json

[yordis]

Version

3.0.0-alpha.9

Steps to reproduce

1. vue create demo-app
2. Select "In dedicated config files" on the question "Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?"

What is expected?

browserlist config to be in .browserlistrc file

What is actually happening?

The browserlist config is in the package.json

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[yordis]

@LinusBorg I am trying to find where I could look for fixing this. Could you give me some directions?

[LinusBorg]

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/lib/util/configTransforms.js

By default, all configs are written into package.json. If the user selects "separate config files", the tranforms defined in the above file will be used to extract configs from package.json into these files.

So you would have to define a new transform for the browserslist field in that file.

That could maybe be as simple as adding this to the export:

module.exports = {
  vue: makeJSTransform('vue.config.js'),
  babel: makeJSONTransform('.babelrc'),
  postcss: makeMutliExtensionJSONTransform('.postcssrc', true),
  eslintConfig: makeMutliExtensionJSONTransform('.eslintrc', true),
  jest: makeJSTransform('jest.config.js')
  browserslist: makeJSONTransform('.browserslistrc')
}

If we make this change, we have to make sure that these plugins actually respect .browserslistrc:

1. babel-preset-env
2. postcss autoprefixer

[yordis]

I just moved it to the file and I got this

(Emitted value instead of an instance of Error) Error loading PostCSS config: Loading PostCSS Plugin failed: missing ) after argument list

 @ ./node_modules/vue-style-loader?{"shadowMode":false,"sourceMap":false}!./node_modules/css-loader?{"sourceMap":false,"minimize":false}!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-367 14:3-18:5 15:22-375
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.ts

[LinusBorg]

https://github.com/browserslist/browserslist#browserslist-

The .browserlistrc file seems to have a different syntax after all, it's not 100% JSON? You might have to write a new transform for that, probably.