CSS generation order is different between `docs` and `transpiled`

[Ldoppea]

The cozy-ui documentation uses build/main.css for its styles while the transpiled files uses transpiled/react/stylesheet.css.

Those two files should behave the same way. But instead they are compiled using different tools and the resulting CSS rules are sorted in a different way which results with inconsistent CSS precedence order between documentation and real in app usage.

For example in my build/main.css file:

• .Tile-- is at line 25183
• .AppTile-icon-- is at line 25304

But in my transpiled/react/stylesheet.css file:

• .styles__AppTile-icon___ is at line 1157
• .styles__Tile___ is at line 24290

It seems like the transpiled build generates CSS properties using alphabetical order from component names contrary to doc that generates them using another order (maybe usage order?)

[JF-Cozy]

We had the same problem lately https://github.com/cozy/cozy-ui/pull/1989