Incorrect merge result in the `lint-staged.config.js` file

[fengyuanchen]

Version

5.0.0-beta.2

Environment info

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.2
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-beta.2
    @vue/cli-plugin-babel: ~5.0.0-beta.2 => 5.0.0-beta.2
    @vue/cli-plugin-eslint: ~5.0.0-beta.2 => 5.0.0-beta.2
    @vue/cli-plugin-router: ~5.0.0-beta.2 => 5.0.0-beta.2
    @vue/cli-plugin-vuex: ~5.0.0-beta.2 => 5.0.0-beta.2
    @vue/cli-service: ~5.0.0-beta.2 => 5.0.0-beta.2
    @vue/cli-shared-utils:  5.0.0-beta.2
    @vue/component-compiler-utils:  3.2.2
    @vue/eslint-config-airbnb: ^5.3.0 => 5.3.0
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.6.0 => 7.14.0
    vue: ^2.6.11 => 2.6.14
    vue-eslint-parser:  7.9.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.3.1 (15.9.7)
    vue-router: ^3.5.1 => 3.5.2
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.11 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.6.2 => 3.6.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. vue create my-project:

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

2. @my/vue-cli-plugin-stylelint:

// ...
api.extendPackage({
  'lint-staged': {
    '*.{css,scss,sass,html,vue}': 'stylelint --fix',
  },
});
// ...

3. vue add @my/vue-cli-plugin-stylelint.
4. Check the lint-staged.config.js file.

What is expected?

module.exports = {
  '*.{js,jsx,vue}': 'vue-cli-service lint',
  '*.{css,scss,sass,html,vue}': 'stylelint --fix',
};

What is actually happening?

module.exports = {
  '*.{js,jsx,vue}': 'stylelint --fix',
};

---

I guess the place that may go wrong is here.

[screetBloom]

api.extendPackage will just change package.json , It does not rewrite your lint-staged.config.js file

so it is recommended that you use fs do anything you want

const targetPath = path.join(api.getCwd(), './lint-staged.config.js')

let content = fs.readFileSync(targetPath, {
  encoding: 'utf-8',
})

content = content.replace('*.{js,jsx,vue}', '*.{css,scss,sass,html,vue}')
fs.writeFileSync(targetPath, content)