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.

Improve this question
16
  • 1
    ng-packagr is already using postcss. github.com/ng-packagr/ng-packagr/blob/master/src/lib/styles/…. What is you want to achieve? Commented Apr 4, 2020 at 8: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? Commented Apr 4, 2020 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. Commented Apr 4, 2020 at 22:25
  • May be this can help you a bit github.com/ng-packagr/ng-packagr/issues/643 Commented Apr 5, 2020 at 5:18
  • 1
    Let us continue this discussion in chat. Commented Apr 6, 2020 at 12:51

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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?
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.
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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.