[FR] `element-plus` ^1.0.2-beta.59 support

[wenfangdu]

Due to an i18n breaking change in 1.0.2-beta.59, the current generated setup would throw:

These dependencies were not found:

* element-plus/lib/theme-chalk/use-locale-props.css in ./src/main.js
* element-plus/lib/theme-chalk/use-locale.css in ./src/main.js
* element-plus/lib/use-locale in ./src/main.js
* element-plus/lib/use-locale-props in ./src/main.js

Related issue:

• [Bug Report] i18n breaks when using on-demand-import element-plus#2755

[jw-foss]

Do you want to update this for the updates?

[wenfangdu]

@JeremyWuuuuu Yes, I can do it if the upstream issue gets fixed.

[jw-foss]

Use locale didn't have any exported CSS since it is not a component at all, to get this fixed, you need to update the plugin configuration, to ignore the pattern of /^use/

[jw-foss]

To be more specific:

babel.config.js

{
  customStyleName: (name) => {
      if (/^use/.test(name)) return ''
      name = name.slice(3)
        return `element-plus/packages/theme-chalk/src/${name}.scss`;
      },
}

[jw-foss]

The vite plugin goes the same way, you need to do a little bit tweak on that though, we are planning to build a vite plugin of our own, so that you won't need to worry about that anymore.

[wenfangdu]

@JeremyWuuuuu I've updated babel.config.js to the following in my repro:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: name =>
          /^use/.test(name) ? '' : `element-plus/lib/theme-chalk/${name}.css`,
      },
    ],
  ],
}

Seems not working.

[jdinartejesus]

@wenfangdu you forgot to add the name.slice(3).

From Jeremy:

{
  customStyleName: (name) => {
      if (/^use/.test(name)) return ''
      name = name.slice(3)
        return `element-plus/packages/theme-chalk/src/${name}.scss`;
      },
}

[wenfangdu]

@JeremyWuuuuu Even return empty string for customStyleName will throw:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: () => '',
      },
    ],
  ],
}

These dependencies were not found:

* element-plus/lib/use-locale in ./src/main.js
* element-plus/lib/use-locale-props in ./src/main.js
* element-plus/packages/theme-chalk/src/-locale-props.scss in ./src/main.js
* element-plus/packages/theme-chalk/src/-locale.scss in ./src/main.js

To install them, you can run: npm install --save element-plus/lib/use-locale element-plus/lib/use-locale-props element-plus/packages/theme-chalk/src/-locale-props.scss element-plus/packages/theme-chalk/src/-locale.scss

I've updated my repro to reflect this, please have a look.

[wenfangdu]

I gave up using option 2, option 1 works just fine. I've fixed the above repro using option 1.