Skip to content

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

Open
@TylerWanta

Description

@TylerWanta

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions