Conversor gratuito de CSS para JavaScript

Como usar

Esta ferramenta analisa as propriedades CSS e as converte em sintaxe de objeto JavaScript. Os nomes de propriedades em kebab-case (como background-color) são convertidos automaticamente em camelCase (backgroundColor). Os valores CSS são preservados como estão. Você pode inserir propriedades individuais ou uma regra CSS completa com seletores.

O movimento CSS-in-JS, brevemente

Porque é que este problema de conversão existe? Porque em 2014 uma geração de programadores frontend decidiu que o CSS em folhas de estilo separadas tinha falhado à escala. O momento fundador foi a apresentação de Christopher «Vjeux» Chedeau «CSS in JS» na NationJS a 15 de Novembro de 2014: um engenheiro do Facebook a argumentar que a cascata global do CSS, a falta de rastreamento de dependências e a acumulação de código morto faziam dele a pior parte das grandes web apps. A apresentação acendeu um movimento. JSS (Oleg Slobodskoi) foi lançado no final de 2014 como a primeira biblioteca CSS-in-JS de uso geral. CSS Modules chegou em 2015 como uma abordagem ao scoping em build-time. styled-components (Glen Maddern + Max Stoiber) foi lançado em Outubro de 2016, popularizando a API de tagged-template-literal onde se escreve CSS dentro de backticks anexos a uma definição de componente. Emotion (Kye Hohenberger) foi lançado a 10 de Julho de 2017 com tanto a API estilo styled-components como uma prop css mais flexível que aceitava objectos JavaScript directamente, exactamente o formato que esta ferramenta produz. Stitches (Modulz/Pedro Duarte) foi lançado em 2020 com uma API baseada em variantes mas tornou-se sem manutenção em meados de 2023 e foi formalmente arquivado em Abril de 2026.

O pêndulo voltou a oscilar. «Why We're Breaking Up with CSS-in-JS» de Sam Magura a 16 de Outubro de 2022 (escrito por um maintainer da Emotion) foi o ponto de inflexão. O argumento técnico: CSS-in-JS em runtime atrasa mensuravelmente os renders do React (o próprio benchmark de Magura no Spot Member Browser baixou o tempo mediano de render de 54,3 ms para 27,7 ms depois de migrar do Emotion, cerca de 2× mais rápido); os tamanhos de bundle são maiores; os custos de serialização acumulam-se. O argumento arquitectural: React Server Components (estabilizado pelo Next.js 13.4 a 4 de Maio de 2023) não podem usar React Context, do qual a maioria das bibliotecas CSS-in-JS depende para theming. A onda de substituição: Tailwind CSS (Adam Wathan, lançamento v4 a 22 de Janeiro de 2025); Vanilla Extract (Mark Dalgleish na Seek, 26 de Março de 2021) para CSS-in-TypeScript em build-time; CSS Modules para nomes de classe scoped sem custo de runtime; e o conjunto compile-to-static sobrevivente nomeado no próprio post de Magura: vanilla-extract, Linaria, Compiled, StyleX e Pigment CSS. O próprio JSS foi deprecated a 14 de Maio de 2024; styled-components passou a modo de manutenção a 17 de Março de 2025. CSS-in-JS em runtime já não é o por defeito para novos projectos React em 2026, mas uma codebase gigantesca de styled-components e Emotion existentes persiste, e converter CSS para a forma objecto dessas bibliotecas é ainda a realidade diária para muitas equipas.

As superfícies de API das bibliotecas principais

O inline style do React (a prop style) é a baseline universal, cada componente React aceita um objecto style cujas chaves são propriedades CSS em camelCase. Sem suporte para pseudo-classes (:hover), media queries ou !important; isto é «inline style» no sentido do antigo atributo HTML style="...", apenas com um objecto JavaScript em vez de uma string. A saída desta ferramenta cai directamente em style={...}. styled-components aceita tagged template literals contendo strings CSS reais: const Button = styled.div`background: red; padding: 10px;`. O CSS é CSS real, kebab-case e tudo, geralmente não precisa deste conversor para styled-components a menos que esteja a migrar de inline styles para um componente styled. Emotion suporta ambas as APIs: a API styled (template literals como styled-components) e a prop css com um objecto JavaScript (camelCase, exactamente o formato que esta ferramenta produz). Para a prop css da Emotion, a saída deste conversor é directamente utilizável. JSS usa um formato objecto similar com algumas funcionalidades adicionais (theming, nomes de classe gerados automaticamente) mas a sintaxe básica de propriedade camelCase é a mesma. O binding de style do Vue (:style="...") aceita a mesma sintaxe de objecto camelCase que o inline style do React. Vanilla Extract usa uma forma objecto tipada mais estrita com funções wrapper style({ ... }) explícitas; o objecto camelCase interno tem a mesma forma.

Casos limite e armadilhas

• A excepção do prefixo de fornecedor ms. A maioria dos prefixos de fornecedor põem maiúscula após camelCase: -webkit-transform → WebkitTransform, -moz-appearance → MozAppearance, -o-transition → OTransition. Mas o prefixo da Microsoft é a excepção: -ms-flex → msFlex com m minúsculo, porque é assim que a fonte do React DOM o define. Esta é a armadilha CSS-to-JS mais googlada.
• Propriedades sem unidades. O React DOM mantém uma lista de propriedades onde números nus são válidos (z-index, opacity, line-height, flex-grow, flex-shrink, order, columns e várias outras). Para essas, zIndex: 5 está bem. Para tudo o resto, valores dimensionais precisam de unidades como strings: width: '100px', não width: 100 (que o React tratará como '100px' por defeito silencioso, conveniente mas com perda se quisesse % ou vh).
• calc(), var() e propriedades personalizadas CSS. Estas funcionam como valores string: width: 'calc(100% - 20px)', color: 'var(--brand-color)'. Propriedades personalizadas (variáveis CSS) precisam de aspas em torno do --name: '--my-var': 'red'.
• !important não funciona em inline styles do React. A prop style do React ignora silenciosamente as anotações !important. Se precisar de sobrepor uma regra de maior especificidade, use uma folha de estilo real (CSS Modules, Tailwind, styled-components), inline styles não são a ferramenta certa.
• Conteúdo de string vazia. content: '' requer aspas cuidadosas em JavaScript: content: "''": um valor string vazio, mas o valor em si é um literal de string vazia CSS que precisa que as apóstrofes circundantes sejam preservadas.
• Regras aninhadas e pseudo-selectores. A conversão CSS-to-JS plana produz um objecto plano, estados hover, media queries e estilos de pseudo-elemento precisam da própria estrutura da biblioteca de destino. A prop css da Emotion suporta objectos aninhados ('&:hover': { background: 'red' }); o inline style do React não.
• Propriedades abreviadas. margin: 10px 20px 10px 20px permanece como string em forma JS: margin: '10px 20px 10px 20px'. O React permite a abreviatura; algumas bibliotecas CSS-in-JS avisam que pode interagir inesperadamente com variantes longhand.

Casos de uso comuns

• Inline styles React. Converter snippets CSS de um designer ou folha de estilo para o formato objecto style={...} para componentes que não têm uma folha de estilo associada.
• Prop css da Emotion. Migrar de um ficheiro CSS separado para a prop css de sintaxe-objecto da Emotion, onde camelCase + forma JS-objecto é a entrada nativa.
• Animações JavaScript. GSAP, anime.js, Motion One e Framer Motion todos aceitam objectos style como alvos de keyframe. O formato camelCase é também necessário aí.
• Tokens de design system. Converter valores de propriedade personalizada CSS em constantes JavaScript para uso em sistemas de design-token (Style Dictionary, Theo, etc.) onde TypeScript ou JS é a fonte canónica de verdade.
• Migração JSS. Material UI v4 e anteriores usavam JSS pesadamente; converter protótipos CSS para forma objecto JSS é o ponto de fricção. Note que Material UI v5+ migrou para Emotion por defeito; este é mais um caso de uso legado.
• Binding de style inline Vue. :style="{...}" em templates Vue usa o mesmo formato objecto camelCase que a prop style do React; a saída deste conversor é directamente utilizável em templates Vue também.

Âmbito honesto: o que esta ferramenta faz e não faz

Esta ferramenta converte declarações CSS para sintaxe de objecto JavaScript com chaves camelCase e valores string correctamente entre aspas. Lida com as regras de maiúsculas dos prefixos de fornecedor (incluindo a excepção minúscula ms). Não traduz para a API de uma biblioteca específica para além de produzir o objecto camelCase, ainda tem de saber se a sua codebase quer o objecto dentro de styled.div`...`, dentro de uma chamada css da Emotion, dentro de uma prop style do React, ou dentro de um binding :style do Vue. A escolha depende da sua biblioteca, não do conversor. A ferramenta também não lida com regras aninhadas e pseudo-selectores automaticamente, a sintaxe de objecto aninhado da Emotion ('&:hover': {...}) e a aninhação de template-literal do styled-components funcionam de forma diferente e precisam de estruturação manual. Para uma migração completa de um ficheiro CSS para uma biblioteca CSS-in-JS, espere fazer alguma reestruturação para além da conversão propriedade-a-propriedade que esta ferramenta fornece.

Privacidade: porque é que apenas-no-navegador importa aqui

O CSS raramente contém segredos, mas folhas de estilo proprietárias revelam informação sobre a taxonomia interna de classes de um site, os seus tokens de design system, e às vezes a sua hipótese de teste A/B através de selectores específicos do experimento. Ferramentas de conversão do lado do servidor exigem fazer upload do CSS, que fica nos seus logs. Para estilos de produto internos, ficheiros source-of-truth de design system, ou branding em progresso, a conversão apenas-no-navegador mantém-no local. Esta ferramenta executa toda a transformação no seu navegador, verifique no separador Network das DevTools enquanto clica em Converter, ou ponha a página offline (modo avião) e o conversor continua a funcionar.

Perguntas frequentes

Como são as propriedades CSS convertidas para camelCase?

Cada hífen numa propriedade CSS kebab-case é removido e a próxima letra é maiusculada: background-color → backgroundColor, border-radius → borderRadius, margin-top → marginTop. Propriedades com prefixo de fornecedor seguem a mesma regra com maiusculação: -webkit-transform → WebkitTransform (W maiúsculo), -moz-appearance → MozAppearance. A famosa excepção é o prefixo da Microsoft: -ms-flex → msFlex com m minúsculo, porque é assim que o React DOM o define.

Isto funciona para media queries e pseudo-classes?

Objectos style JavaScript planos (a prop style do React, :style do Vue) não suportam media queries ou pseudo-classes, esses são conceitos de folha de estilo. Bibliotecas CSS-in-JS que aceitam sintaxe objecto (prop css da Emotion, JSS) suportam-nas através de objectos aninhados: '&:hover': { background: 'red' }, '@media (min-width: 768px)': { padding: '20px' }. A documentação da biblioteca de destino mostrará a estrutura de aninhamento exacta. Esta ferramenta produz o objecto plano; envolve-o manualmente na sintaxe de aninhamento da biblioteca.

Porque é que !important não funciona em inline styles do React?

A prop style do React ignora silenciosamente as anotações !important: não fazem parte da gramática literal de objecto JS e o renderer do React não as traduz. Se precisar de sobrepor uma regra de maior especificidade, use uma folha de estilo real (CSS Modules, Tailwind, styled-components, CSS simples). O mecanismo de inline-style do React é para estilos pontuais ou dinâmicos onde a especificidade não é uma preocupação; !important pertence a uma folha de estilo.

Devo ainda usar CSS-in-JS em 2026?

Para novos projectos React, o por defeito actual é «não, use Tailwind, CSS Modules ou Vanilla Extract.» O artigo de Sam Magura de Outubro de 2022 a partir do interior da equipa Emotion (combinado com a incompatibilidade de Context dos React Server Components) empurrou o ecossistema para soluções build-time-only. styled-components passou a modo de manutenção a 17 de Março de 2025; JSS foi deprecated a 14 de Maio de 2024. Para codebases existentes com investimento significativo em styled-components ou Emotion, sem pressa para migrar, ambas as bibliotecas ainda funcionam, e o custo de runtime é o tipo de coisa que se optimiza quando aparece no profiling. Para um projecto totalmente novo em 2026: Tailwind v4 (lançado a 22 de Janeiro de 2025) é a escolha mais popular; Vanilla Extract para projectos que querem typing TypeScript estrito em estilos; CSS Modules para projectos que querem abstracção mínima.

Posso converter tokens de design-system desta forma?

Para um snippet pontual, sim. Para um design system inteiro (tipicamente dezenas ou centenas de tokens organizados por cor, espaçamento, tipografia, movimento) use uma ferramenta dedicada como Style Dictionary ou Theo, ambas tomam uma única fonte de verdade (JSON, YAML ou JS) e produzem para múltiplos destinos (propriedades personalizadas CSS, constantes JS, iOS Asset Catalogs, Android XML, etc.). A vantagem de uma verdadeira ferramenta de design-token é a consistência entre plataformas; este conversor é para o caso em que tem um snippet CSS em mão e quer a forma JS agora mesmo.

O meu CSS é enviado para algum lugar?

Não. A conversão corre inteiramente no seu navegador via JavaScript. O CSS que cola nunca atravessa a rede, verifique no separador Network das DevTools enquanto clica em Converter, ou ponha a página offline depois de carregar e confirme que a ferramenta continua a funcionar. Seguro para folhas de estilo proprietárias, ficheiros source-of-truth de design system, ou qualquer CSS que revele taxonomias internas de classes que não queira ver copiadas para o disco rígido de um estranho.

Ferramentas relacionadas