CSS to JS object

Convert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file.

Shape
css
JavaScriptts
The result appears here

Questions

What happens to vendor prefixes?+

A leading dash is dropped and the rest is camelCased with a capital first letter, so -webkit-backdrop-filter becomes WebkitBackdropFilter. That is the spelling React and every CSS-in-JS library expect.

Are custom properties supported?+

Yes, and they keep their double dash as a quoted key, because --card-shadow is not a valid identifier and camelCasing it would break the variable.

Can I paste just declarations?+

Yes. Input with no braces is read as a declaration list, which is what you get from a style attribute or from copying a rule out of dev tools, and you can output it as a ready style prop.

Related tools

HTML to JSXPaste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled.Tailwind class merge playgroundSee exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.CSV to JSONRead a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version