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.
```
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:
Expected Behavior
Marko should successfully parse the above code.
Actual Behavior
Marko stops and produces the following error:
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.
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. ```