Pular para o conteúdo
Numio

Converter CSS em objetos JavaScript — Numio

Converte CSS puro em um objeto JavaScript (CSS-in-JS) com postcss-js. Os nomes de propriedade passam para camelCase, seletores e at-rules viram chaves, e uma propriedade repetida na mesma regra vira um array de valores.

Levar estilos de um arquivo .css para um objeto de styled-system, JSS, Emotion ou Radium sem redigitar cada propriedade.

CSS

JavaScript Object

Quando usar

  • Levar estilos de um arquivo .css para um objeto de styled-system, JSS, Emotion ou Radium sem redigitar cada propriedade.
  • Transformar um trecho de CSS copiado de uma ferramenta de design ou das DevTools do navegador em um objeto para um estilo inline ou uma prop style.

Como usar

  1. Cole CSS no editor CSS ou solte um arquivo .css nele.
  2. Veja o resultado no painel JavaScript Object; ele é atribuído a `const converted` e formatado com Prettier (sem ponto e vírgula).
  3. Copie o objeto, renomeie `converted` e selecione as chaves de seletor de que precisa. Esta página não tem configurações.

Entrada CSS

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

Objeto JavaScript

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

Detalhes e limitações

A conversão roda em um Web Worker no seu navegador (parse do PostCSS + objectify do postcss-js); o CSS não é enviado a nenhum servidor.

Propriedades com prefixo de fornecedor mantêm o prefixo em PascalCase (por exemplo, -webkit-box-shadow vira WebkitBoxShadow). Propriedades personalizadas como --main-color mantêm o nome original.

Os valores são mantidos como strings, exceto propriedades numéricas sem unidade como z-index, que viram números. Comentários são descartados.

A saída não está pronta para React Native: seletores, :hover e blocos @media são mantidos como chaves aninhadas, e valores abreviados (shorthand) não são expandidos.

FAQ

O que acontece se o mesmo seletor aparecer duas vezes?

Regras com o mesmo seletor são mescladas em uma única chave. Se a mesma propriedade for declarada duas vezes, por exemplo color: red !important; color: blue, a chave guarda um array: ["red !important", "blue"].

Consultas @media e seletores aninhados são suportados?

Sim. Um bloco @media vira uma chave como "@media (max-width: 600px)" cujo valor é um objeto com as regras de dentro dele. Seletores descendentes e pseudosseletores ficam como chaves de string completas.

Por que recebo o erro "Unclosed block"?

A entrada precisa ser CSS válido. O PostCSS para em erros de sintaxe como uma chave de fechamento ausente e informa a linha e a coluna; sintaxe de Sass ou Less (variáveis, aninhamento) não é compilada aqui.

Especificações e referências