Mangled atomic classes optimization

[Arif-un]

Hi there,
I found one of the great advantages of this library is mangled atomic classes, which significantly reduces stylesheet size.
Those classes are generated incrementally, like .a, .b, .c, ... .z, .aa, .ab, and so on, each iteration generates from 26 characters.

In CSS, classes are case-sensitive so if we declare .a and .A, those are completely different from each other, also numbers can be used alongside characters.
So this incremental way can be more efficient for an atomic class generation.
A tiny library might help for generating incremental string incstr

[Machy8]

Hi @Arif-un. Thanks for creating this discussion.

I will think about it.

When I was creating the algorithm, I thought about adding uppercase letters and even numbers, however, there were the following reasons why I didn't:

• Debugging could be sometime weird, if you get selectors like .a and .A for the first 52 combinations or later aA
• It takes over 672 selectors to get to the aaa (three letters combinations)
• I was inspired by Medium.com and I could not find any uppercase selectors there, so I was not sure, if there is any possible issue with this combination or not
• CSS selectors cannot start with numbers, so they could be added only after passing single-letter selectors, which means more complex algorithm.

However, I could potentially add a configuration option to the algorithm for custom letters or custom algorithm.

I will try something after releasing 0.6. This should be tested first.

[IRediTOTO]

You can take look on this package https://github.com/sndyuk/mangle-css-class-webpack-plugin
I found you when find it :D

Here is my characters "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" use "incstr" package to generate class, it work well with me.
The only problem I have is that every time I build, everything gets messy because of the cache, I don't know why.

[Machy8]

Hi @IRediTOTO .

You get messy results with Stylify or with the Webpack plugin?

[IRediTOTO]

With the Webpack plugin, I built and run fine on local but on production they broken up after build, I bet it's because the css names are only a,b,c,... after each build they have the same name but the internal properties have been swapped. This causes the interface to break.

[Machy8]

The cache could be a problem. You could probably use it only in production build in pipeline where the cache can be droped.

But there is also a different problem. It's one of those, why i dropped Stylify Vite, Rollup and Webpack plugins.

For example Astro internally converts HTML to hyperscript.
Svelte into some random javascript.
React the same.
So there is a chance, it just didn't detected classes or matched them properly so the mangling could not be done correctly. I had extensive testing for it (more than 50 tests with hundreds of lines) and yet, there is endless options on how it can be compiled, so i droped it.