Converting CSS custom properties to design tokens

I wanted to convert some CSS variables into design tokens to be stored in JSON. Regular expressions to the rescue.

Enable regex mode in your search in VScode by clicking the ▪* icon or toggle it with the keyboard shortcut ⌥⌘R. Here is the magic incantation.

^[ ]*([^\r\n]+?)(?=:)

This regexr shows the results and breaks the RegEx down.

You can use this regex to select the key in CSS equally. Everything before the colon will be selected here too.

  --color-footer: var(--color-gray-neutral-900);

Next, you can use the To VSCode extension to convert the kebab-case CSS variable keys to camelCase for JSON.