Convierte declaraciones CSS en una estructura JSON editable o transforma un objeto JSON en un bloque CSS listo para copiar. El conversor trabaja con propiedades estándar, custom properties y valores con !important, y señala entradas que no pueden representarse sin ambigüedad. Resulta útil al mover estilos entre configuraciones, generadores de componentes y herramientas de diseño sin depender de librerías externas.
Interpreta un bloque de declaraciones como pares propiedad/valor y los serializa en JSON. En sentido inverso, toma claves JSON y produce declaraciones CSS terminadas en punto y coma.
No convierte hojas de estilo completas con selectores o @rules: el alcance es un bloque de declaraciones.
font-size: 16px; color: rgb(20, 30, 40);
{"font-size": "16px", "color": "rgb(20, 30, 40)"}El parser recorre carácter a carácter y evita dividir dentro de comillas y paréntesis. Al convertir desde JSON acepta valores string, number y boolean y rechaza objetos anidados.
No interpreta selectores, cascada, herencia ni bloques @media. Para esas tareas conviene usar el CSS Parser o el CSS Inspector.
Las claves que empiezan por -- se conservan literalmente y aparecen como propiedades normales del objeto JSON.
Sí. El texto !important permanece unido al valor para que pueda reconstruirse al volver a CSS.
No. Este conversor está pensado para un bloque de declaraciones; usa el CSS Parser para reglas completas.
Admite valores primitivos como texto, números y booleanos. Rechaza arrays y objetos anidados porque no representan una declaración CSS directa.
Sí. Cada par clave/valor válido se emite como una declaración terminada en punto y coma.
| Módulo | Función |
|---|---|
| Modo CSS → JSON | Declaraciones a objeto plano |
| Modo JSON → CSS | Objeto plano a declaraciones |
| Conservación | Custom properties y !important |
Consulta el centro de categoría para acceder a validadores, analizadores, generadores y utilidades relacionadas.