Use Postcss in Custom Angular Library

Question

I used postcss, postcss-css-modules and posthtml-css-modules to implement CSS Modules in a Angular Application. I also used @angular-builders/custom-webpack to achieved this.

Now, I want to do the same with my Custom Angular Library. However, I cannot use @angular-builders/custom-webpack because the Angular Libraries are build using ng-packagr.

So, @angular-builders/custom-webpack is not available to use: https://github.com/just-jeb/angular-builders/issues/356

On the other hand, ng-packagr does not support postcss: https://github.com/ng-packagr/ng-packagr/issues/1471

I have read that it's possible to extend rollup config (is the compiler that use ng-packagr at the end of the build) in ng-packagr:

https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

But I didn't find any documentation to achieve this.

Does anybody know how to do it?

Other solution that I thought, it's make all the styles global and compile them using scss-bundle and postcss like I did here: NodeJs Script that compiles scss files fails because of postcss rule for undefined variables

And after If I can use lodash I will be able to replace the class names by their hashed class name like is proposed here: Use [hash:base64:5] in JavaScript / TypeScript file

But to do that, I will need to know how to invoke lodash in the build of ng-packagr.

Does anybody knows how to do that?

Any other solution is more than welcome.

Thanks in advance.

Education

ng-packagr is already using postcss. github.com/ng-packagr/ng-packagr/blob/master/src/lib/styles/…. What is you want to achieve? – Peh

Hi @GouravGarg , Thanks for your answer. I want to use postcss-css-modules and posthtml-css-modules in the build of my Angular Library. Do you know if it's possible? – Education

I was able to use postcss-css-modules and posthtml-css-modules in a Angular Project and it was possible thanks to @angular-builders/custom-webpack . However, I can't use @angular-builders/custom-webpack in the build of a Angular Library, because of that I do not how to use postcss-css-modules and posthtml-css-modules in the build of a Custom Angular Library. – Education

May be this can help you a bit github.com/ng-packagr/ng-packagr/issues/643 – Peh

Yes, that is a good help. It seems to be the branch has not been merged yet. Do you have another idea? Or Is it possible to use that version that has not been merged yet? Thanks in advance. – Education

until then you can pre-process those styles with postcss and then pass to your library. This can help you a little medium.com/@Dor3nz/… – Peh

Yes, that is useful. But, I also need to do some changes in the html of the components. I can use lodash for that, the problem is I do not know how, because the HTML are embedded after the build. Do you know how to achieve that? Does exist any compiler like scss-bundle for the html's? Thanks in advance. – Education

you can handle that in postbuild process – Peh

Is it possible to modify the HTML embedded in the bundles/dist files? How can I do that? – Education

its easy to rename files and do simple things. complexity depends on what you want to achieve. Also, you are saying that HTML are embedded after the build. – Peh

In my case, I want to take all class names in HTML files and change the class name by a value in a json file. Example, before change: <div class="container"> after change <div class="_.asdasd"> , the value "_.asdasd" is going to be in a json file like this: { "container" : "_.asdasd" } – Education

There are a couple of webpack tools which you can use after this #45645090 npmjs.com/package/replace-in-file-webpack-plugin – Peh

Awesome, however, those tools are to use with webpack. I am not using webpack as compiler. Can I use them as js or typescprit script after the build? – Education

Let us continue this discussion in chat. – Peh

this is working or what? – Peh

When I searched for this today I found npmjs.com/package/ng-packagr-rollup-postcss which seems not working and like an unfinished or abandoned work. It's seems a published version of this fork github.com/SmallShrimp/ng-packagr-postcssrollup which I couldn't find any specific commit related to fixing that, although after installing the npm package it has a rollup folder which is not working and after some hacking, I end up with some errors so I thought it is not a completed effort if anyone can figure out how to use it (if usable) please share here as an answer. – Schnozzle

Answer 1

There is already a discussion going on this enhancement. May be changes are still in progress. You can track from here

You can pre-process your styles and then pass to ng-packagr as suggested by this article

Other problem to embed with HTML files you can use create a post build process something like this with help of these tools

I hope this solves your problem.

Peh

Thanks for your answer. The problem here is that github.com/css-modules/… is executed during the build. After ng-packagr build the Angular Library all the templates (HTML) are embedded and I need to modify those templates. Do you have a idea to modify the templates during the build or after? – Education

If this problem exist with all of the applications and these variables are same for all applications. You can update HTML files permanently, if that suits you. – Peh

That is not a suitable solution because if I do that I will replace the original class names by their hashed class names, and I need to keep the original class names. I would like to replace the class names by their hashed class names during the build or after in the dist files. Do you have any idea/solution for that case? – Education