Sobre esta ferramenta
A ferramenta CSS para Objeto de Estilo JS converte um bloco de CSS em um objeto JavaScript adequado para estilos inline do React ou bibliotecas CSS-in-JS como styled-components e Emotion. Ela analisa as declarações localmente no seu navegador — nada é enviado — então migrar uma folha de estilos para estilos inline é uma questão de colar e copiar.
Cada nome de propriedade é convertido para camelCase: background-color vira backgroundColor, z-index vira zIndex. Prefixos de fornecedor seguem as regras do React — um -ms- inicial vira minúsculo ms (msFilter), enquanto -webkit-, -moz- e -o- viram maiúsculos Webkit, Moz e O (WebkitBoxShadow). Propriedades customizadas (--brand-color) são mantidas literalmente como chaves citadas. Valores são emitidos como strings por padrão, preservando unidades e !important; um alternador numérico permite que inteiros e decimais nus virem números não citados. Chaves que são identificadores JavaScript válidos são deixadas sem aspas; o resto é citado automaticamente.
Quando a entrada é um bloco de declaração simples (sem seletores) ela produz um objeto plano, perfeito para uma prop style do React. Quando a entrada contém regras completas com seletores, o modo styled/Emotion emite um objeto aninhado com chave em cada string de seletor — a sintaxe de objeto que essas bibliotecas aceitam. Você controla o nome do const de saída, e tudo é escrito como const styles = { ... }; pronto para colar.