Map long class to short class

[321paranoiawhy]

Clear and concise description of the problem

Suppose we have an element like this:

<div opacity-50>Example</div>

We know opacity-50 is equal to op-50, the latter is shorter and can reduce code size.

So can UnoCSS do this transform work automatically? That is:

<!-- developer write `opacity-50`, unocss transform it to `op-50` -->
<!-- of cource, this feature is optional, depends on unocss config-->
<div op-50>Example</div>

Or, UnoCSS already have this solution, if you know, please comment, thanks.

Suggested solution

add useAbbr/useAbbreviation/useShorthand param in unocss config

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Simon He]

try to use shortcuts
https://unocss.dev/config/shortcuts#usage

[321paranoiawhy]

try to use shortcuts https://unocss.dev/config/shortcuts#usage

But we need enumerate shortcuts, often we do not known all classes and we want the framework automatically do this mapping work.

Imagine this:

const SHOULD_TRANSFORMED_CLASSES = {
  'opacity-(.*)': 'op-(.*)'
};

[Simon He]

You can get the solution from the documentation

[321paranoiawhy]

You can get the solution from the documentation

I just do not want enumerate classes, that's too incredible...