Acerca de esta herramienta
La herramienta CSS a objeto de estilo JS convierte un bloque de CSS en un objeto JavaScript apto para estilos en línea de React o librerías CSS-in-JS como styled-components y Emotion. Analiza las declaraciones localmente en tu navegador —nada se sube— así que migrar una hoja de estilos a estilos en línea está a un pegar-y-copiar de distancia.
Cada nombre de propiedad se pasa a camelCase: background-color pasa a backgroundColor, z-index pasa a zIndex. Los prefijos de proveedor siguen las reglas de React: un -ms- inicial se pasa a minúscula ms (msFilter), mientras que -webkit-, -moz- y -o- se capitalizan a Webkit, Moz y O (WebkitBoxShadow). Las propiedades personalizadas (--brand-color) se mantienen literalmente como claves entrecomilladas. Los valores se emiten como cadenas por defecto, preservando unidades y !important; un interruptor numérico permite que los enteros y decimales escuetos pasen a números sin comillas. Las claves que son identificadores JavaScript válidos se dejan sin comillas; el resto se entrecomilla automáticamente.
Cuando la entrada es un bloque de declaraciones plano (sin selectores) produce un objeto plano, perfecto para una prop style de React. Cuando la entrada contiene reglas completas con selectores, el modo styled/Emotion emite un objeto anidado indexado por cada cadena de selector: la sintaxis de objeto que esas librerías aceptan. Controlas el nombre del const de salida, y todo se escribe como const styles = { ... }; listo para pegar.