unparsed sass variable from fieldSwitch in vfg.css

[lmj0011]

• I'm submitting a ...
  • bug report

• Do you want to request a feature or report a bug?
  a bug

• What is the current behavior?

dist/vfg.css contains an unparsed variable $field-switch-height

see: https://github.com/vue-generators/vue-form-generator/blob/v2.2.2/dist/vfg.css

which means importing this stylesheet into a vue component like:

import "vue-form-generator/dist/vfg-core.css"

throws an error (in my case, I'm using vue.js via the nuxt.js framework )

NuxtServerError
Module build failed: Error: Lexical error on line 1. Unrecognized text. 100% - ($field-switch-height --------^ at Parser.parseError ...

this error also prevents the "switch" componet of a form from displaying properly, like rendered in this demo of vue-form-generator demo

• What is the expected behavior?

expecting the css file vue-form-generator/dist/vfg-core.css to import without error, and for the Switch component to render like in the vue-form-generator demo

• Please tell us about your environment:

  • Version: [2.2.2 ]
  • Browser: [all ]
  • Language: [ES6/7 | ES5]

[zoul0813]

This bug appears to be present in every release version of VFG 2.x. The $field-switch-height variable is defined and is parsed properly in the rest of the SASS for the component, so I'm guessing the calc(100% - ($field-switch-height - 1px)); line is confusing the SASS compiler.

The switch component appears to work fine in the JSFiddle examples, using the v2.2.2 release so this bug appears to be a compile-time issue?

Looks like we can just remove the $field-switch-height variable from the calc call and replace it with the hard-coded value of 30px (this variable isn't configurable in the component, it's just defined for convenience).

[lmj0011]

@zoul0813

Out of curiosity, where is the source file for vue-form-generator/dist/vfg-core.css at or is coming from?

I'm unable to find it in this repo.

[zoul0813]

The CSS is compiled from the various style tags of the components and merged.

This bug is the fieldSwitch.vue file