Form validation error

[mayur20188]

plz check img

[seanCodes]

Not sure what the issue is here... are you referring to the #( with the red squiggle underline? If so, that’s not an issue with this port but an issue with the VS Code Less syntax.

For reference, this is an “anonymous mixin”:

An anonymous mixin uses the form of #() or .() starting with . or # just like a regular mixin would.

Closing this but please let me know if I misunderstood or there’s another issue. Thanks!

[RossVertizan]

@seanCodes I have just tried to compile this to css - here is my terminal output:

$ lessc -v && lessc --clean-css="--s1 --advanced" --source-map=app/style/main.css.map app/style/main.less app/style/main.css
lessc 3.10.3 (Less Compiler) [JavaScript]
RuntimeError: error evaluating function `each`: Operation on an invalid type in ...\bootstrap_less_v4\_forms.less on line 247, column 1:
246 //}
247 each(@form-validation-states, #(@data, @state) {
248     @state-name: replace(@state, "@", "");

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is pointing to the same place as the above screenshot.

In my IDE, I get a red squiggle after @form-validation-states, and the message is "a term expected", there is then another squiggle after the @ data (space added to avoid the @ expansion) with the message "")" expected".

I don't know what that means, I'll go and explore, but I think that is what was being reported.

[RossVertizan]

For completeness I tried with less 3.9.0 - I get the same error:

$ lessc -v && lessc --clean-css="--s1 --advanced" --source-map=app/style/main.css.map app/style/main.less app/style/main.css
lessc 3.9.0 (Less Compiler) [JavaScript]
RuntimeError: error evaluating function `each`: Operation on an invalid type in ...\bootstrap_less_v4\_forms.less on line 247, column 1:
246 //}
247 each(@form-validation-states, #(@data, @state) {
248     @state-name: replace(@state, "@", "");

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[RossVertizan]

Sorry, I don't know Less well enough to be able to see what's going on here, so I commented out that section and ran again and found another issue:

SyntaxError: Cannot read property 'denominator' of undefined in ...\bootstrap_less_v4\_custom-forms.less on line 99, column 3:
98              content: "";
99              background: no-repeat 50% / @custom-control-indicator-bg-size;
100     }

So I commented out the background line and re-ran and it now compiles.

I'd appreciate any help you can give to resolve these two issues - I'm on the rather painful path of upgrading from react-bootstrap v0.3 (bootstrap v3) to react-bootstrap v1.0 (bootstrap 4).

[seanCodes]

@RossVertizan Have you customized your variables in any way or are you just using the default values? Could you try adding the flag --math="parens-division" when running on the command line and let me know if it helps?

[RossVertizan]

@seanCodes OK, I took a look at this again and in a clean environment so as not to confuse anything with my other settings. here is what I did:

1. Cloned your GitHub repo to my local machine.

2. "yarn install".

3. ".\node_modules.bin\lessc .\less\bootstrap.less bootstrap.css"
   RuntimeError: error evaluating function each: Operation on an invalid type in H:\git\bootstrap-less-port\less\_forms.less on line 247, column 1: 246 //} 247 each(@form-validation-states, #(@data, @state) { 248 @state-name: replace(@state, "@", "");

4. ".\node_modules.bin\lessc --math="parens-division" .\less\bootstrap.less bootstrap.css"
   ... and .... (drum roll) this works.

Thanks very much for your help. Not sure if you can roll this into a file somewhere to keep the usage clean.