Ir para o conteúdo
TextArray1.41.0
Totalmente local

Conversor de objeto CSS para JS

Converta declarações CSS em um objeto de estilo inline React/JS e vice-versa.

Entrada
Saída
Ferramentas relacionadas
Formatador CSSFerramentas de desenvolvedor
Minificador CSSFerramentas de desenvolvedor
JSON para TypeScriptFerramentas de desenvolvedor
Conversor HTML para JSXFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
Conversor de objeto CSS para JS
Cole um bloco de declarações CSS e obtenha de volta um objeto de estilo JavaScript, pronto para ser colocado em um suporte de estilo do componente React ou Preact. Cada propriedade kebab-case se torna camelCase - background-color se transforma em backgroundColor, font-size em fontSize - e tudo é impresso como um objeto literal válido com recuo de dois espaços. Você pode colar declarações simples ou uma regra completa com um seletor e colchetes; o seletor de encapsulamento foi removido para você, portanto, copiar uma regra diretamente do DevTools simplesmente funciona.
O conversor funciona nos dois sentidos. Mude a direção para objeto JS → CSS e um objeto de estilo volta a ser prop: value comum; linhas, com camelCase hifenizado novamente e as aspas removidas. Isso torna mais fácil mover um estilo de um componente para uma folha de estilo, ou verificar como um conjunto de estilos embutidos realmente é renderizado. Propriedades personalizadas como --brand-color mantêm seus travessões iniciais e permanecem entre aspas, porque não são identificadores válidos, e os prefixos do fornecedor são tratados da maneira que o React espera: -webkit-box-shadow torna-se WebkitBoxShadow, enquanto os prefixos -ms- usam o formato msFlex em letras minúsculas.
Por padrão, cada valor é emitido como uma string, que é a escolha segura — mantém unidades, cores e coisas como line-height: 1.5 intactas. Ative "Valores sem unidade como números" e números puros, como índice z ou opacidade, serão escritos como números, correspondendo à forma como você normalmente os digitaria à mão. Você também pode escolher aspas simples ou duplas para corresponder ao formatador do seu projeto.
Tudo roda no seu navegador. O CSS que você cola nunca é carregado, portanto, colar estilos de um sistema de design privado ou de uma biblioteca de componentes internos permanece em sua máquina. Copie o resultado, baixe-o como um arquivo ou envie-o para outra ferramenta.
FAQ
Ele lida com uma regra CSS completa com um seletor?
Sim. Cole `.button { cor: vermelho; preenchimento: 8px; }` e o seletor e as chaves são removidos, deixando apenas o objeto de estilo. Declarações simples sem colchetes também funcionam.
Por que meus números estão entre aspas?
Por padrão, cada valor é uma string, portanto as unidades e os zeros à esquerda sobrevivem. Ative "Valores sem unidade como números" e números puros como z-index: 10 ou opacity: 0.5 serão emitidos como números.
Como os prefixos do fornecedor e as propriedades personalizadas são convertidos?
Os prefixos do fornecedor seguem a convenção do React: -webkit-transition torna-se WebkitTransition e os prefixos -ms- usam ms minúsculo. Propriedades personalizadas como --brand-color mantêm seus traços e permanecem entre aspas como chaves de objeto válidas.
Ele pode converter um objeto de estilo JS de volta para CSS?
Sim. Mude a direção para objeto JS → CSS. As chaves camelCase são hifenizadas, as aspas são removidas e cada propriedade é escrita como uma propriedade normal: valor; linha.
Meu CSS é carregado em algum lugar?
Não. A conversão é executada inteiramente no seu navegador, sem processamento no servidor, portanto, os estilos de um projeto privado ou interno nunca saem do seu dispositivo.