Estoy usando Módulos CSS en un Proyecto Angular con Webpack. Ya había transformado los nombres de las clases en archivos .css y .scss con postcss-modules .
Luego, con posthtml-css-modules , cambié los valores en la propiedad de clase en elementos html por su valor hash definido por postcss-modules .
Puedo decir que todo está funcionando bien 💪.
Ahora tengo un nuevo desafío que resolver.
Angular tiene una función que le permite cambiar dinámicamente el valor de la class en un elemento html según una condición:
https://angular.io/api/common/NgClass
Por ejemplo, puedo hacer:
<div [className]="myVar ? 'myClass1' : 'myClass2' " >
Si myVar = true , el elemento html será:
<div class="myClass1" >
Y si myVar = false , el elemento html será:
<div class="myClass2" >
Como no sé cuál será el valor de myVar durante el tiempo de compilación (porque el valor de myVar depende de las acciones del usuario), no puedo establecer el valor para <div css-module="myClass1" > o <div css-module="myClass2" > para codificar los nombres de clase de myClass1 o myClass2 .
PERO (Aquí viene mi solución)...
Si puedo invocar la misma función que hace [hash:base64:5] ( https://github.com/css-modules/postcss-modules#generating-scoped-names )
Puedo crear una función que reciba una cadena como parámetro y devuelva el nombre de la clase como un hash.
Sería algo como esto:
<div [className]="setMyClassNameInHash(myVar)">
Luego en javascript:
function setMyClassNameInHash(condition) { return condition ? doHash64('myClass1') : doHash64('myClass1'); } doHash64() sería la función que toma una cadena y devuelve el hash usando [hash:base64:5] .
En conclusión, mi pregunta es:
¿Cómo puedo invocar la misma función que hace [hash:base64:5] en un archivo javascript?
¡¡¡¡Gracias!!!!
Deberá integrar un paso de plantilla en su proceso de compilación. El complemento exporta los nombres de clase y sus nombres asignados a un archivo json, para que pueda buscar el nombre de clase con hash del original.
Editar: dado que las plantillas integradas solo funcionan para un solo nombre de clase y no parece admitir el reemplazo de nombres de clases en cosas como atributos angulares, puede hacer las plantillas usted mismo usando una biblioteca de plantillas como lodash. Si ya está usando grunt o gulp, le recomiendo usar sus tareas de plantilla en lugar de esta forma manual porque hacen muchas cosas por usted, como admitir múltiples archivos.
En su html, usaría delimitadores lodash para obtener el nombre de la clase con hash como:
<div [className]="myVar ? '<%= getHashedClass('myClass1') %>' : '<%= getHashedClass('myClass2') %>' " >La secuencia de comandos de creación de su nodo podría tener este aspecto:
var fs = require('fs'); postcss([ require("postcss-modules")({ // Callback to get hashed class names getJSON: function(cssFileName, classNames, outputFileName) { var filePath = '/path/to/outputDir/file.html'; // Function to lookup hashed class names var getHashedClass = function(unhashedClass) { return classNames[unhashedClass]; } // Read your html file as a string var html = fs.readFileSync(path), // Use lodash to template it, passing the class lookup function var compiled = _.template(html); var templated = compiled({ getHashedClass: getHashedClass }); // Write the templated html fs.writeFileSync(path, templated); } }) ]);