Sorting classes

[MrFoxPro]

Tailwind has prettier plugin to sort classes: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
WindiCSS has this feature in VSCode extension: https://windicss.org/editors/vscode.html#extension-settings

I think it would be nice to implmeent such as IDE extension/prettier plugin/cli command alongside with #1576.

I would like to implement this feature, however I'm not sure where to start.
Any ideas / drafts?

[chu121su12]

Currently the default preset sorting is done through rule orders. Also with help of layering (uno-layer-x:rule) you can reorder sections of the css output around (alphabetically by default). In addition, variant and rule have their own sort key you can utilize.

Please find the relevant usages in the codebase:

unocss/packages/core/src/types.ts

Line 153 in f4954d2

sort?: number

unocss/packages/core/src/types.ts

Line 230 in f4954d2

sort?: number

unocss/packages/core/src/types.ts

Line 352 in f4954d2

layers?: Record<string, number>

unocss/packages/core/src/types.ts

Line 357 in f4954d2

sortLayers?: (layers: string[]) => string[]

[MrFoxPro]

Please find the relevant usages in the codebase:

I'm not sure you understood me correctly, I mean sorting inside source code

[itpropro]

Just for context, I think @MrFoxPro is referencing to this feature, which is also available in Windi and would be a great addition to the DX with unocss.

[chu121su12]

Thank you and sorry that I missed your point the first time.

Any ideas / drafts?

Due to the similarity of api, I think you could start from both sides, either via extension or prettier

[MrFoxPro]

I checked extension. Btw I'm not sure how sorting should be done at all, if there are variant groups.
Also, I saw that extension is using custom HTMLParser based on REs to get classes, so, it's unclear how to swap utilities in class string or even attributes

[MrFoxPro]

WindiCSS uses ast parsing for this purpose.

[itpropro]

Thank you and sorry that I missed your point the first time.

Any ideas / drafts?

Due to the similarity of api, I think you could start from both sides, either via extension or prettier

I would prefer to not force users to use prettier. I think the VSCode extension would be the correct place, maybe the implementation of the transformers would be a good starting point, as they already need to identify e.g. if there are variant groups etc.. Sorting also has to consider the usage of different transformers.

[HigherOrderLogic]

Thank you and sorry that I missed your point the first time.

Any ideas / drafts?

Due to the similarity of api, I think you could start from both sides, either via extension or prettier

I would prefer to not force users to use prettier. I think the VSCode extension would be the correct place, maybe the implementation of the transformers would be a good starting point, as they already need to identify e.g. if there are variant groups etc.. Sorting also has to consider the usage of different transformers.

I don't think transformer will work. Transformer is just transformation when you build your app, it can't format code or check style like prettier does.

[CanRau]

would love to have this feature in the vscode extension as well 🙏🏼

[antfu]

da06c65 this commit added a utility to sort the rules, if anyone is interested, feel free to create a eslint/prettier plugin for that

[antfu]

Already I am on it :P - #2140

[JaKXz]

EDIT: See eslint-plugin-svelte instead of eslint-plugin-svelte3.

Thanks @antfu! Curious if anyone can share / confirm their eslint config with @unocss, I'm not seeing any lint warnings atm in my project, but I'm not sure if it's working correctly or if I'm seeing false negatives with this config: ✅

	extends: ['eslint:recommended', 'plugin:svelte/recommended', '@unocss', 'prettier'],

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[HigherOrderLogic]

Is it feasible to make the plugin read config from nuxt.config.ts file as well?

[antfu]

Is it feasible to make the plugin read config from nuxt.config.ts file as well?

It's recommended to use a standalone uno.config.ts

[antfu]

Closing this as we have shipped the eslint plugin for a long while. Currently, we don't have enough bandwidth for a prettier plugin but open to contributions.

[MrFoxPro]

So, is it possible to sort in semantic order? For example: positioning first, styling like color and background last

[itpropro]

So, is it possible to sort in semantic order? For example: positioning first, styling like color and background last

A PR is probably welcome, the sort rules are implemented here afaik: https://github.com/unocss/unocss/blob/main/packages/shared-integration/src/sort-rules.ts