¿Alguien tiene un buen método para convertir CSS "en bruto" en propiedades de estilo DOM? Por ejemplo:
Aporte:
const raw_css = ` h1 { color: red; display: block; } .myClass { background: blue; position: absolute; opacity: .3; } `;Debe convertirse en:
Producción:
document.querySelector("h1").style.color = "red"; document.querySelector("h1").style.display = "block"; document.querySelector(".myClass").style.background = "blue"; document.querySelector(".myClass").style.position = "absolute"; document.querySelector(".myClass").style.opacity = ".3"; Entonces, de alguna manera, debería tomar el CSS sin procesar de const/let/var y convertirlo en varias reglas. Por cordura, sería genial si los elementos se dividen por una nueva línea, como el ejemplo de salida. Intenté dividirlos obteniendo primero el contenido entre corchetes { ... } y separando las líneas dividiendo el ; ... Pero no tengo una gran idea para vincular los elementos a las reglas de estilo. También busqué en Google opciones similares, pero no encontré ninguna.
Espero que alguien pueda darme algunos consejos. Sé que no proporcioné mucho y que StackOverflow no es un servicio de escritura de código, pero estoy realmente atascado en este.
¡Cualquier ayuda es bienvenida!
(Editar: soy consciente de que no todas las propiedades de estilo se pueden traducir directamente a una propiedad de estilo DOM. Como: border-top == borderTop. Pero podría escribir un script condicional simple que reemplace esas propiedades "no traducibles")
Puedes probar:
dividir la cadena por saltos de línea ( \n )
recorriendo cada línea y comprobando si coincide con la expresión regular .+{ .
: y recortando el resultado const selectorRegex = /.+{/gm; const raw_css = ` h1 { color: red; display: block; } .myClass { background: blue; position: absolute; opacity: .3; } `; const lines = [] const split = raw_css.split("\n"); var lastSelector; split.forEach(e => { const trimmed = e.trim(); if (selectorRegex.test(e)) { lastSelector = e.replace("{", "").trim() } else if (trimmed != "}" && trimmed.length > 0) { const propValue = e.split(":"); const property = propValue[0].trim(); const value = propValue[1].trim(); lines.push(`document.querySelector("${lastSelector}").style.${property} = "${value}"`); } }) console.log(lines);CSS en JS admite la conversión de CSS a su formato JavaScript con su herramienta CLI
Instale la herramienta JSS CLI usando:
npm install jss-cli -gY úsalo así:
jss convert source.css O puede usar npx para ejecutarlo una vez:
npx jss convert source.css