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

V-bind() in SFC CSS does not work when upgrading Electron version #7444

Open
TylerWanta opened this issue Jan 6, 2024 · 0 comments
Open

Comments

@TylerWanta
Copy link

Version

5.0.8

Environment info

System:
    OS: Windows 10 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900KF
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.91)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0
    @vue/babel-helper-vue-transform-on:  1.1.5
    @vue/babel-plugin-jsx:  1.1.5
    @vue/babel-plugin-transform-vue-jsx:  1.4.0
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.4.0
    @vue/babel-sugar-composition-api-inject-h:  1.4.0
    @vue/babel-sugar-composition-api-render-instance:  1.4.0
    @vue/babel-sugar-functional-vue:  1.4.0
    @vue/babel-sugar-inject-h:  1.4.0
    @vue/babel-sugar-v-model:  1.4.0
    @vue/babel-sugar-v-on:  1.4.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router:  5.0.8
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.8 => 5.0.8
    @vue/cli-shared-utils:  5.0.8 (4.5.19)
    @vue/compiler-core:  3.4.5
    @vue/compiler-dom:  3.4.5
    @vue/compiler-sfc:  3.4.5
    @vue/compiler-ssr:  3.4.5
    @vue/component-compiler-utils:  3.3.0
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0
    @vue/reactivity:  3.4.5
    @vue/runtime-core:  3.4.5
    @vue/runtime-dom:  3.4.5
    @vue/server-renderer:  3.4.5
    @vue/shared:  3.4.5
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.7.1
    typescript: ~4.5.5 => 4.5.5
    vue: ^3.2.13 => 3.4.5
    vue-chartjs: ^5.2.0 => 5.3.0
    vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader: ^17.4.2 => 17.4.2 (15.11.1)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

  • Create basic application using vue create
  • Add Electron using vue add electron-builder
  • Create a SFC with V-bind() function in CSS block
  • Upgrade Electron

What is expected?

V-Bind() should work as normal, creating a var and then replacing V-Bind() with var(--created-var)

What is actually happening?

V-Bind() is not creating a CSS variable, resulting in the styling not being applied


----- Before Updating Electron ----
CSS:
image
In DevTools:
image
Note: the variable is defined and I can hover to see the value.

---- After Updating Electron ----
image

Downgrading Electron fixes the issue but isn't a valid option

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant