vitejs / vite-plugin-vue

Vite Vue Plugins
MIT License
504 stars 155 forks source link

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

Closed wswmsword closed 2 months ago

wswmsword commented 1 year ago

Related plugins

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](https://github.com/wswmsword/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`:

插件生成的新的样式没有被 CSS Modules 转换

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 组件的样式选择器的名称情况:

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

edison1105 commented 2 months ago

看上去是插件的执行时机太早了。应该在 vite 处理完 css module 之后再执行你的插件。 也许你应该写个 vite 的插件,enforce: 'post' 放到最后执行你的插件。 另外,这不是 vite-plugin-vue 的问题,应该去 vite 仓库里面提 issue