разобрать правило градиента CSS с помощью регулярных выражений Javascript

в моем CSS-файле у меня есть правило градиента, например:

background-image:linear-gradient(to right, #FF0000 0%, #00FF00 20px, rgb(0, 0, 255) 100%);

Я хочу получить все части этой строки. Ожидаемый результат:

linear-gradient
to right
#FF0000 
0%, 
#00FF00 
20px, 
rgb(0, 0, 255) 
100%

мне было слишком сложно работать над целой струной, поэтому я решил разбить ее на части.

линейный градиент

.*gradient[^\(]?

цвета

rgb ?\([ 0-9.%,]+?\)|#[0-9a-fA-F]{3,6}\s[0-9]{1,3}[%|px]|#[0-9a-fA-F]{3,6}|(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow){1}(\s[0-9]{1,3}\s*[%|px]?)?

направо

(?

Ответы на вопрос(2)

Ваш ответ на вопрос