It is not intentional. The tooling needs to generate a short unique id to prevent css name clashing.

During development 2 developers can write the same css class name in two seperate places:

• developer A: .container { padding: 8px } at dashboard
• developer B: .container { padding: 32px } at sidebar

Without this tooling developer need to find ways to prevent name clashing:

• .dashboard__container
• .sidebar__container

and they need to do this for every class name.

with this tool, developer don’t have to worry about this ever, continue using .container and it get generated into:

• .aP2be7
• .7aFrJp