CSS to React inline style conversion using VSCode Regex Replacer

css_to_react_inline.md

Intro

CSS has a different syntax than react's inline css, which this regex pattern aims to solve by transforming it (right side only).
CSS also kebap-case sytnax and react uses camelCase, making a direct usage of default css unusable (left side).
The current regex only fixes the right side, kebap to camel part needs to be done manually for now. Example

CSS

div {
    overflow-wrap: break-word;
}

React

<div style={{overflowWrap: "break-word"}}></div>

Regex pattern

Search

(:\s)(.*)(;)

Replace with

:"$2",