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.

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.