Marko trouble parsing certain calc functions in CSS

[gavinmcfarland]

Marko Version: 4.18.10

Details

I'm trying to use certain calc() functions in CSS but Marko is having trouble parsing certain scenarios and breaks producing an error.

Below is an example:

style {
    .example {
        margin-left: calc((-100% / 12 - 200px) / 2);
    }
}

Expected Behavior

Marko should successfully parse the above code.

Actual Behavior

Marko stops and produces the following error:

Error: An error occurred while trying to parse template at path "/Users/limitlessloop/Repos/personal-site/src/templates/project.marko". Error(s) in template:
1) [Users/limitlessloop/Repos/personal-site/src/templates/project.marko:33:5] Mismatched group. A "}" character was found when "(" was expected.

Possible Fix

I think I may have narrowed it down to the percentage sign and the forward slash. I believe there is an issue related to a regex that may be being used for the style block.

I discovered you can get around the problem rewriting the calc function using one of the following methods.

/* Move the percentage so it's not inside the division */
style {
    .example {
        margin-left: calc(((-100 / 12 * 1%) - 200px) / 2);
    }
}

/* Put the percentage in brackets */
style {
    .example {
        margin-left: calc(((-100%) / 12 - 200px) / 2);
    }
}

Additional Info

### Your Environment - Node v12.4.0 - NPM v6.9.0 - macOS 10.14.6 - You can reproduce the error on the "Try online" ### Steps to Reproduce 1. Visit https://markojs.com/try-online/?file=%2Fmarko-language-guide%2Findex.marko&gist= 2. Add the following to the bottom of the index file ```css style { .example { margin-left: calc((-100% / 12 - 200px) / 2); } } ``` 3. You should see the following error produced ``` Mismatched group. A "}" character was found when "(" was expected.at line 18 col 5 ``` ### Stack Trace ``` Error: An error occurred while trying to parse template at path "/Users/limitlessloop/Repos/personal-site/src/templates/project.marko". Error(s) in template: 1) [Users/limitlessloop/Repos/personal-site/src/templates/project.marko:33:5] Mismatched group. A "}" character was found when "(" was expected. ```

[DylanPiercey]

Regenerating your lock file so that you get the latest htmljs-parser should resolve the issue.

[gavinmcfarland]

That's great, thank you!