using v-bind in css will have a problem in production env

[huangxiaochang]

Version

3.0.11

Reproduction link

https://github.com/huangxiaochang/vue-next-issue

https://huangxiaochang.github.io/vue-next-issue/

Steps to reproduce

<template>
  <div class="home">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const homeHeight = ref('1000px')
    return {
      homeHeight
    }
  }
});
</script>

<style lang="scss" scoped>
.home {
  min-height: v-bind(homeHeight);
}
</style>

When I build the project, the css block is builded to :

.home[data-v-7347e058]{
   min-height:var(--109c9849)
}

And generating css var code is builded to:

Object(vue_runtime_esm_bundler["z" /* useCssVars */])(function (_ctx) {
    return {
      "fae5bece-homeHeight": _ctx.homeHeight
    };
  });

Because the var name '--109c9849' in css block is not in line with 'fae5bece-homeHeight' in js block,
So the min-height is Incorrect.

This may be a bug in Vue-loader, because it compile css block and script block with different env.(building css block with production, but development in js block).

What is expected?

css var name is consistent between css block and js block

What is actually happening?

it may be a bug in thread-loader used by vue-loader-v16

---

visiting https://huangxiaochang.github.io/vue-next-issue/ and clicking home route, inspecting the 'hello word', you can see it's dom style and css.

[huangxiaochang]

Yes, you are right， it works fine in dev and there be a problems only in production env. I aslo think it's a vue-loader bug, so i should submit this issue to vue-loader? At 2021-06-09 18:18:16, "edison" ***@***.***> wrote: works fine in dev see :sfc demo I think it's a vue-loader bug. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[edison1105]

I did a test, The same code with vite works fine.

[huangxiaochang]

I did a test, The same code with vite works fine.

I am sorry, i forgot to submit the build tool.
I build the project with vue-cli4.5.12. and it have problem.
yes, it works fine with vite,

[edison1105]

The root cause is:
loaderContext.mode is undefined in the reproduction project.
https://github.com/vuejs/vue-loader/blob/next/src/resolveScript.ts#L35

And
https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L17
this.mode is production

so the generated name of cssVars is different.

but in the vue-loader code base, it also works fine.
a vue-cli bug ?

[huangxiaochang]

The root cause is:
loaderContext.mode is undefined in the reproduction project.
https://github.com/vuejs/vue-loader/blob/next/src/resolveScript.ts#L35

And
https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L17
this.mode is production

so the generated name of cssVars is different.

but in the vue-loader code base, it also works fine.
a vue-cli bug ?

Yes, the cause is:
loaderContext.mode is undefined when dealing with ts block in sfc.

It may also be considered a vue-cli bug.

But i think the root cause is thread-loader, which configured to dealing with ts or js in vue-cli default config.

If you remove thread-loader from ts or js rule, it works fine yet.

[yyx990803]

Isn't this a bug of thread-loader causing loader context to lose mode then?

Either way this is not something that can be fixed in Vue core.

/cc @sodatea

[yyx990803]

Fixed in [email protected].

[yyx990803]

FWIW this should still be considered a bug in thread-loader so I opened an issue there: webpack-contrib/thread-loader#123

[xinxinhe1810]

用的 webpack 5 、改成 [email protected] ，没有用 thread-loader 生产环境还是有问题。

[huangxiaochang]

用的 webpack 5 、改成 [email protected] ，没有用 thread-loader 生产环境还是有问题。
Can you submit specific configuration of your project?

[hxgqh]

vue 2.7 with vite in production mode also fails.

reproduction: https://github.com/hxgqh/vite_vue2.7

visit: http://localhost:28847/#/TestVbind