How to hash CSS class names in Angular 2 (4) using

Question

I saw on Google News that Google hashes their CSS class names.

Google News Hashed Class Names

So i searched how Google did this and found a tutorial, how to hash the class names via Webpack, but in React.

Here is the tutorial how to do it in React: https://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/

I wonder if this is possible in Angular with Webpack, too.

Answer 1

The only reason you would want to hash classes, is to avoid similar classes overwriting each other. In react it makes sense to do so, because as far as I am aware there is not any form of style encapsulation in react (I could be completely wrong on this one).

This is something you don't need to worry about in Angular in case you are going to be building components without turning off the viewEncapsulation. Angular will take care of ensuring similar class names don't clash (or "leak").

Here is an example of that on stackblitz.

Please notice how I defined two classes with the same name and different values, angular prefixes them to ensure they are unique to every component.

Here is a demonstration of what I mean in the demo

If you would like to read more on Angular's view encapsulation, I would recommend you to check out this article by thoughtram.