Convertir CSS a objetos JavaScript — Numio
Convierte CSS plano en un objeto JavaScript (CSS-in-JS) con postcss-js. Los nombres de propiedad pasan a camelCase, los selectores y las at-rules se convierten en claves, y una propiedad repetida dentro de una misma regla se convierte en un array de valores.
Pasar estilos de un archivo .css a un objeto de styled-system, JSS, Emotion o Radium sin volver a escribir cada propiedad.
Cuándo usarla
- Pasar estilos de un archivo .css a un objeto de styled-system, JSS, Emotion o Radium sin volver a escribir cada propiedad.
- Convertir un fragmento de CSS copiado de una herramienta de diseño o de las DevTools del navegador en un objeto para un estilo inline o una prop style.
Cómo usarla
- Pega CSS en el editor CSS o suelta un archivo .css sobre él.
- Consulta el resultado en el panel JavaScript Object; se asigna a `const converted` y se formatea con Prettier (sin punto y coma).
- Copia el objeto, cambia el nombre de `converted` y quédate con las claves de selector que necesites. Esta página no tiene opciones de configuración.
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" } },
}Detalles y limitaciones
La conversión se ejecuta en un Web Worker en tu navegador (parseo con PostCSS + objectify de postcss-js); el CSS no se envía a ningún servidor.
Las propiedades con prefijo de proveedor conservan el prefijo en PascalCase (por ejemplo, -webkit-box-shadow pasa a WebkitBoxShadow). Las propiedades personalizadas como --main-color mantienen su nombre original.
Los valores se mantienen como cadenas, salvo las propiedades numéricas sin unidad como z-index, que pasan a números. Los comentarios se descartan.
La salida no está lista para React Native: los selectores, :hover y los bloques @media se mantienen como claves anidadas, y los valores abreviados (shorthand) no se expanden.
FAQ
¿Qué pasa si el mismo selector aparece dos veces?
Las reglas con el mismo selector se fusionan en una sola clave. Si la misma propiedad se declara dos veces, por ejemplo color: red !important; color: blue, la clave contiene un array: ["red !important", "blue"].
¿Se admiten las consultas @media y los selectores anidados?
Sí. Un bloque @media se convierte en una clave como "@media (max-width: 600px)" cuyo valor es un objeto con las reglas que contiene. Los selectores descendientes y los pseudoselectores se mantienen como claves de cadena completas.
¿Por qué aparece el error "Unclosed block"?
La entrada debe ser CSS válido. PostCSS se detiene ante errores de sintaxis como una llave de cierre que falta e indica la línea y la columna; la sintaxis de Sass o Less (variables, anidamiento) no se compila aquí.