I'm trying to extract the values of CSS transform strings using this regular expression (\w+)\(([^)]*)\) like translateX(10px) or translateY(calc(-50% - 100px)).
It works great on simple transform values like:
translateX(10px)
will returns
translateX and 10px
But if I try to parse a CSS calc value:
translateY(calc(-50% - 100px))
it returns
translateY and calc(-50% - 100px
Notice the missing ) at the end of calc(-50% - 100px ?
For now I managed to fix this problem by using this regular expression /(\w+)(\([^)]*\)+)/g, that returns the values with the parenthesis and then slice the results to remove them :
translateY(calc(-50% - 100px))
returns:
translateY and (calc(-50% - 100px));
then
(calc(-50% - 100px)).slice(1, -1)
returns:
calc(-50% - 100px);
But this introduce an extra step and I was wondering if it was possible to do all that in one single Regular Expression.