9

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.

German Quinteros
  • 1,870
  • 9
  • 33
  • 1
    ng-packagr is already using postcss. https://github.com/ng-packagr/ng-packagr/blob/master/src/lib/styles/stylesheet-processor.ts. What is you want to achieve? – Gourav Garg Apr 04 '20 at 08:34
  • 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? – German Quinteros Apr 04 '20 at 22:18
  • 1
    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. – German Quinteros Apr 04 '20 at 22:25
  • May be this can help you a bit https://github.com/ng-packagr/ng-packagr/issues/643 – Gourav Garg Apr 05 '20 at 05:18
  • 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. – German Quinteros Apr 06 '20 at 03:57
  • until then you can pre-process those styles with postcss and then pass to your library. This can help you a little https://medium.com/@Dor3nz/compiling-css-in-new-angular-6-libraries-26f80274d8e5 – Gourav Garg Apr 06 '20 at 04:03
  • 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. – German Quinteros Apr 06 '20 at 12:00
  • you can handle that in postbuild process – Gourav Garg Apr 06 '20 at 12:10
  • Is it possible to modify the HTML embedded in the bundles/dist files? How can I do that? – German Quinteros Apr 06 '20 at 12:17
  • 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. – Gourav Garg Apr 06 '20 at 12:27
  • 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: ```
    ``` after change ```
    ``` , the value ```"_.asdasd"``` is going to be in a json file like this: ```{ "container" : "_.asdasd" }```
     – German Quinteros Apr 06 '20 at 12:31
  • There are a couple of webpack tools which you can use after this https://stackoverflow.com/questions/45644590/webpack-plugin-to-modify-files-after-compilation https://www.npmjs.com/package/replace-in-file-webpack-plugin – Gourav Garg Apr 06 '20 at 12:38
  • 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? – German Quinteros Apr 06 '20 at 12:46
  • 1
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211068/discussion-between-gourav-garg-and-german-quinteros). – Gourav Garg Apr 06 '20 at 12:51
  • this is working or what? – Gourav Garg Apr 07 '20 at 02:58
  • When I searched for this today I found https://www.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 https://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. – Unicornist Dec 23 '21 at 16:33

1 Answers1

0

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.

Gourav Garg
  • 2,856
  • 11
  • 24
  • Thanks for your answer. The problem here is that https://github.com/css-modules/postcss-modules#integration-with-templates 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? – German Quinteros Apr 07 '20 at 20:11
  • 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. – Gourav Garg Apr 08 '20 at 00:04
  • 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? – German Quinteros Apr 08 '20 at 06:53