New styles generated by the PostCSS plugin are not converted by CSS Modules.

[wswmsword]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I'm using the jsx component and the PostCSS plugin postcss-mobile-forever to do the style conversion. The plugin keeps the original style and generates the new media query style, I expect both the original style and the media query style's selector to be correctly converted to CSS Modules, but in fact, only the original style is correctly converted, and the new media query style's selector still has the original selector name. I was expecting both the original style and the media query style selector to be converted to CSS Modules correctly, but in fact only the original style was converted correctly, and the new media query style selector was generated with the same name(Translation by DeepL).

中文

我使用 jsx 组件，同时用 postcss-mobile-forever 这个 PostCSS 插件做样式的转换，这个插件会保留原有的样式，同时生成新的媒体查询样式，我期望原有样式和媒体查询样式的选择器都正确地被转为 CSS Modules 的形式，但实际上只有原有样式被正确转换，新生成的媒体查询样式的选择器还是原来的选择器名称。

The image below shows that the original .jsx is converted to ._jsx_ckbbb_1, while the one generated by the plugin and in the media query is not converted and remains as .jsx(Translation by DeepL):

中文

下图展示了原有的 .jsx 转为了 ._jsx_ckbbb_1，而插件生成的、在媒体查询里的没有被转换，仍然是 .jsx：

At the same time I tested the SFC component, the SFC component can be converted normally, the original style selector name and the style selector name of the media query generated by the plugin are the same, the following picture shows the style selector name of the SFC component(Translation by DeepL):

中文

同时我测试了 SFC 组件，SFC 组件能够正常转换，原有样式的选择器名称和插件生成的媒体查询的样式选择器名称一致，下面的图片展示了 SFC 组件的样式选择器的名称情况：

Reproduction

https://github.com/wswmsword/postcss-mobile-forever/tree/main/example/others/vite-vue-jsx

Steps to reproduce

npm i
npm run dev

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.25 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 7.27.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-vue: ^4.2.3 => 4.2.3 
    @vitejs/plugin-vue-jsx: ^3.0.1 => 3.0.1 
    vite: ^4.4.0 => 4.4.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.