CSS to JavaScript style

About

I created this tool for projects, where I’d constantly write CSS and then convert it into object literals for glamor, inline styles or other css-in-js libraries.

It takes following things into account:

• Unitless values (opacity, line-height, font-weight, …)
• Vendor prefixed values
• Escaping different quotes in a single value (e.g. in font-family)
• Not-enclosed CSS declarations (i.e. without selector) for fast copy & paste

Online version

Simply copy & paste the styles you want to convert.

Example input

width: 600px;
min-height: 100vh;
font-weight: 800;
color: #bada55;
opacity: .5;
-webkit-font-smoothing: antialiased;
font-family: "Roboto", 'Open Sans';

(For convenience this works without selectors)

Example output

{
  width: 600,
  minHeight: '100vh',
  fontWeight: 800,
  color: '#bada55',
  opacity: .5,
  WebkitFontSmoothing: 'antialiased',
  fontFamily: '"Roboto", \'Open Sans\''
}

^ This is with disabled px output (helpful for React projects)

→ Check it out by yourself