Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
huangxiaochang opened this issue Jun 9, 2021 · 10 comments
Closed

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

huangxiaochang opened this issue Jun 9, 2021 · 10 comments
Labels
feat: sfc feat: sfc-style-vars

Comments

@huangxiaochang
Copy link

@huangxiaochang huangxiaochang commented Jun 9, 2021 •
edited by yyx990803

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
Copy link
Author

@huangxiaochang huangxiaochang commented Jun 9, 2021

@edison1105
Copy link
Member

@edison1105 edison1105 commented Jun 25, 2021

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

@huangxiaochang
Copy link
Author

@huangxiaochang huangxiaochang commented Jun 26, 2021

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
Copy link
Member

@edison1105 edison1105 commented Jun 26, 2021

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
Copy link
Author

@huangxiaochang huangxiaochang commented Jun 27, 2021

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.

@edison1105 edison1105 mentioned this issue Jul 2, 2021
Closed
@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Jul 14, 2021

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 yyx990803 closed this Jul 14, 2021
@yyx990803 yyx990803 reopened this Jul 16, 2021
@yyx990803 yyx990803 mentioned this issue Jul 16, 2021
Merged
yyx990803 added a commit to vuejs/vue-loader that referenced this issue Jul 16, 2021
@yyx990803
fix: pick up production env in thread-loader context
821a3a3 
fix vuejs/core#3921
@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Jul 16, 2021

Fixed in vue-loader@16.3.1.

@yyx990803 yyx990803 closed this Jul 16, 2021
@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Jul 16, 2021

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

@huangxiaochang huangxiaochang mentioned this issue Jul 17, 2021
Closed
@xinxinhe1810
Copy link

@xinxinhe1810 xinxinhe1810 commented Sep 7, 2021

用的 webpack 5 、改成 vue-loader@16.3.1 ，没有用 thread-loader 生产环境还是有问题。

@huangxiaochang
Copy link
Author

@huangxiaochang huangxiaochang commented Sep 13, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feat: sfc feat: sfc-style-vars
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@yyx990803 @edison1105 @xinxinhe1810 @huangxiaochang