Curly syntax not working with Calc numeric operators

[5e-Cleric]

Right now, the curly syntax for the calc() function, breaks because the RegEx pattern does not expect mathematical symbols.

This brew should work as an example: https://homebrewery.naturalcrit.com/share/oDUY9Cl2cDd6

Preview for later/ if the brew was deleted:

[ericscheid]

It's not the spaces or the quoting that is breaking.

It is the + in the calc.

This works (because subtracting a negative is addition):

{{background:lightgreen,height:"calc(57px - -3px)"
GREEN
}}

Other math operators also break e.g. * /.

Find the regex — I think it was written with the anticipation of negative numbers being allowed (e.g. margin: -4px), but not with the assumption there would be operators like +, -, * etc.

[5e-Cleric]

Noted, the bug still exists, but if its only a regex error then it is an easy fix.

[ericscheid]

https://github.com/naturalcrit/homebrewery/blob/5bfd0dd53796950d5ff0d065a8a464dfae6736d3/shared/naturalcrit/markdown.js#L37

https://github.com/naturalcrit/homebrewery/blob/5bfd0dd53796950d5ff0d065a8a464dfae6736d3/shared/naturalcrit/markdown.js#L87

https://github.com/naturalcrit/homebrewery/blob/5bfd0dd53796950d5ff0d065a8a464dfae6736d3/shared/naturalcrit/markdown.js#L135

https://github.com/naturalcrit/homebrewery/blob/5bfd0dd53796950d5ff0d065a8a464dfae6736d3/shared/naturalcrit/markdown.js#L170

In each regex there is a pair of patterns [\w\-()$%] that needs to be expanded to [\w,\-+*\/()#%. ] https://regex101.com/r/exp6WA/2

We only need to add +, /, *, according to the css spec https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Probably should also fix editor.jsx (for highlighting) and mustache-syntax.test.js (for unit tests).

[ericscheid]

Other math operators also break e.g. * /.

Technically, the * and / operators don't need to have spaces (unlike addition and subtraction operators), and so this form does work:

{{background:lightgreen,height:calc(57px*3) TEXT}} {{background:lightgreen,height:calc(57px/3) TEXT}}

That is, no spaces around the operators, and no quoting of the property value.

[5e-Cleric]

If you don't mind, gonna give you some Calc operations i know already work, to make sure this works:

calc(400px/(10 + (tan(30deg)/3)*2)) calc((10dvh - 10pc)*(sin(200)/pi))

[ericscheid]

If you don't mind, gonna give you some Calc operations i know already work, to make sure this works:

calc(400px/(10 + (tan(30deg)/3)*2)) calc((10dvh - 10pc)*(sin(200)/pi))

new regex works with them: https://regex101.com/r/exp6WA/2