Разбор фонового изображения CSS

Как мне разобрать CSS background-image , который поддерживает несколько значений, которые могут быть none и функции (например, ] url () и linear-gradient () ) с несколькими аргументами, разделенными запятыми? Кажется, я не могу делать это правильно с регулярными выражениями. Хороший тестовый пример выглядит следующим образом:

  linear-gradient(top left, red, rgba(255,0,0,0))
, url(a)
, image(url(b.svg), 'b.png' 150dpi, 'b.gif', rgba(0,0,255,0.5))
, none

Который я хотел бы преобразовать в следующий массив:

[
      "linear-gradient(top left, red, rgba(255,0,0,0))"
    , "url(a)"
    , "image(url(b.svg), 'b.png' 150dpi, 'b.gif', rgba(0,0,255,0.5))"
    , "none"
]