Saltar al contenido
TextArray1.41.0
Totalmente local

Convertidor de objetos CSS a JS

Convierta declaraciones CSS en un objeto de estilo en línea React/JS y viceversa.

Entrada
Salida
Herramientas relacionadas
Formateador CSSHerramientas de desarrollador
Minificador CSSHerramientas de desarrollador
JSON a mecanografiadoHerramientas de desarrollador
Convertidor de HTML a JSXHerramientas de desarrollador
diferencia clave i18nHerramientas de desarrollador
Convertidor de TOML a JSONHerramientas de desarrollador
Convertidor de objetos CSS a JS
Pegue un bloque de declaraciones CSS y obtenga un objeto de estilo JavaScript, listo para colocarse en el accesorio de estilo de un componente React o Preact. Cada propiedad de kebab-case se convierte en camelCase (el color de fondo se convierte en color de fondo, el tamaño de fuente en tamaño de fuente) y todo se imprime como un objeto literal válido con sangría de dos espacios. Puede pegar declaraciones simples o una regla completa con un selector y llaves; el selector de ajuste se elimina para usted, por lo que copiar una regla directamente desde DevTools simplemente funciona.
El convertidor va en ambos sentidos. Cambie la dirección a Objeto JS → CSS y un objeto de estilo volverá a ser un accesorio normal: valor; líneas, con camelCase separado con guión nuevamente y las comillas de cadena eliminadas. Eso hace que sea fácil mover un estilo de un componente a una hoja de estilo, o verificar cómo se representa realmente un conjunto de estilos en línea. Las propiedades personalizadas como --brand-color mantienen sus guiones iniciales y entre comillas, porque no son identificadores válidos y los prefijos de proveedores se manejan de la manera que React espera: -webkit-box-shadow se convierte en WebkitBoxShadow, mientras que los prefijos -ms- usan el formato msFlex en minúsculas.
De forma predeterminada, cada valor se emite como una cadena, que es la opción segura: mantiene intactas las unidades, los colores y cosas como line-height: 1.5. Active "Valores sin unidades como números" y los números puros, como el índice z o la opacidad, se escribirán como números, coincidiendo con la forma en que normalmente los escribiría a mano. También puede elegir comillas simples o dobles para que coincidan con el formateador de su proyecto.
Todo se ejecuta en su navegador. El CSS que pega nunca se carga, por lo que pegar estilos desde un sistema de diseño privado o una biblioteca de componentes internos permanece en su máquina. Copie el resultado, descárguelo como un archivo o envíelo a otra herramienta.
Preguntas frecuentes
¿Maneja una regla CSS completa con un selector?
Sí. Pegue `.botón {color: rojo; relleno: 8px; }` y el selector y las llaves se eliminan, dejando solo el objeto de estilo. Las declaraciones simples sin llaves también funcionan.
¿Por qué mis números están entre comillas?
Por defecto, cada valor es una cadena, por lo que sobreviven las unidades y los ceros iniciales. Active "Valores sin unidades como números" y los números puros como índice z: 10 u opacidad: 0,5 se emiten como números.
¿Cómo se convierten los prefijos de proveedores y las propiedades personalizadas?
Los prefijos de proveedores siguen la convención de React: -webkit-transition se convierte en WebkitTransition y los prefijos -ms- usan ms minúscula. Las propiedades personalizadas como --brand-color mantienen sus guiones y se citan como claves de objeto válidas.
¿Puede convertir un objeto de estilo JS nuevamente a CSS?
Sí. Cambie la dirección a objeto JS → CSS. Las claves de camelCase están divididas con guiones, se eliminan las comillas de cadena y cada propiedad se escribe como un valor de propiedad normal; línea.
¿Mi CSS está subido a alguna parte?
No. La conversión se ejecuta completamente en su navegador sin procesamiento del servidor, por lo que los estilos de un proyecto interno o privado nunca salen de su dispositivo.