[Bug report] v-bind in <style> do not work after vite build

Kaiyan-Zhang commented 2 years ago

I'm using vuepress22.0.0-beta.36version, this is the only package I used.

As it's known by all, we can use v-bind in <style> after vue3.2, and my version of vuepress2 supports vue3.2.

However, it seems that: while the v-bind works in dev mode, it does not work after the vite build.

我正在使用vuepress22.0.0-beta.36版本，我只用了这一个库。

众所周知，在vue3.2之后，我们可以在<style>里面用v-bind。

它似乎在dev模式下是生效的，但是但我用打包之后就不行了。现在vuepress默认用的是vite，我估计是vite的锅。

Bug report

Description

To get the point, there's only one README.md in my project:

<button class="btn"> 点我 </button>
<script>
...
  data() {
    return {
      speed: 1000,
...
</script>

<style>
.btn {
  ...
  animation-duration: v-bind(speed + 'ms');
  ...
}

As you can see, I used v-bind to refer the variable speed defined in data(), that's all. The animation should be activated, but failed to work after vite building.

Steps to reproduce

Reproduction link / repo: https://gitee.com/kaiyan3/eightgames/tree/test/

Please just simply clone this tiny project, checkout to test branch, run npm i; npm run build; to see the problem.

Expected behavior

Under dev mod(vuepress dev docs), the breath animation is activated well.

Actual begavior

I used vuepress build docs, after building, no breath animation.

Environment info

Browser: Chrome
Output of vuepress info:

PS C:\Users\zhang\eightgames> npm run info

> info
> vuepress info
  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 9.67 GB / 15.95 GB
  Binaries:
    Node: 17.7.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.2 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
  Utilities:
    Git: 2.32.0. - C:\Users\zhang\scoop\shims\git.EXE
  Browsers:
    Chrome: Not Found
    Edge: Spartan (10.0.19043), Chromium (10.0.19043), ChromiumDev (10.0.19043)
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.36
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.36
    @vuepress/client:  2.0.0-beta.35
    @vuepress/core:  2.0.0-beta.36
    @vuepress/markdown:  2.0.0-beta.36
    @vuepress/plugin-active-header-links:  2.0.0-beta.36
    @vuepress/plugin-back-to-top:  2.0.0-beta.36
    @vuepress/plugin-container:  2.0.0-beta.36
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.36
    @vuepress/plugin-git:  2.0.0-beta.36
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.36
    @vuepress/plugin-nprogress:  2.0.0-beta.36
    @vuepress/plugin-palette:  2.0.0-beta.36
    @vuepress/plugin-prismjs:  2.0.0-beta.36
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.36
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.35
    @vuepress/theme-default:  2.0.0-beta.36
    @vuepress/utils:  2.0.0-beta.35
    vue:  3.2.31
    vue-loader: Not Found
    vue-router:  4.0.14
    vuepress: ^2.0.0-beta.36 => 2.0.0-beta.36
    vuepress-vite:  2.0.0-beta.36
    vuepress-webpack: Not Found

PS C:\Users\zhang\eightgames>

This is not something for windows, because it's same on mac. 这和我用不用windows没有关系，我在mac上试了也是有bug。

I tried to separate the html from markdown, like what I did in "activate" branch:

# bpm测速

<bpm/>

import { defineClientAppEnhance } from '@vuepress/client'
import bpm from './components/bpm.vue'

export default defineClientAppEnhance(({ app, router, siteData }) => {
    app.component('bpm', bpm)
})

But the buggy phenomenon was still the same.

我知道把markdown和vue写在一起可能不好，但是尽管我把两者分开了，现象还是没有变化。

Vitepress?

Compared to vuepress, I tried vitepress, the v-bind() works there. repo: https://gitee.com/kaiyan3/vitepress-starter

我刚试了一下Vitepress，效果很好，不会有这些问题

meteorlxy commented 2 years ago

Reproduced.

Seems that everything works well with following workaround 🤔

-      speed: 1000,
+      speed: '1000ms',
...
-  animation-duration: v-bind(speed + 'ms');
+  animation-duration: v-bind(speed);

meteorlxy commented 2 years ago

Caused by the usage of postcss-csso. Fixed by removing it.

However, it could still be an issue of vite. Reported here https://github.com/vitejs/vite-plugin-vue/issues/9

vuepress / core