review: align with tailwind

[userquin]

I have tested main entries from here https://tailwindcomponents.com/ except Dashboard and Account Card entries.

I will be adding rules here that are not on unocss preset, or that are misaligned with tailwind:

• Missing theme size (md, lg, xl, etc...) variants for max-(w|h)-${size} and (w|h)-${size} #125
• grid stuff: remove extra spaces on rules #134
• Missing fill-${colors} utilities #128
• container missing rule: breakpoint variant max-width variant #133
• Missing rule: isolation: isolate; #130
• feat(preset-uno): animate-* stuff #170
• object-center missing rule: object-position: center;, we should add the variants (top, right...) #132
• Insert spaces in calc #180
• feat(preset-uno): border stuff #178
• colors: current colors from tw 2.1 to tw 3.0 #136
• missing translate-x-full and translate-y-full #167

[userquin]

@antfu @hannoeru @edwardnyc

On weekend I'll do a second review.

[hannoeru]

Just tried the convert to issue function 😂, can I handle first one?

[userquin]

Ofc Man, I added the task for it... you can also asign yourself the issue

[userquin]

@hannoeru I assign it to you, see assignees from right panel on the issue, we need to check if the title can be changed or modify in some way, it is huge.

Edit: just change the issue title.

[xiaojieajie]

Hello, I want to help solve the seventh task（ object-center missing rule: object-position: center;, we should add the variants (top, right...)）

[hannoeru]

@xiaojieajie Click convert to issue button on right side of list to create issue and assign yourself, then you are good to go!

[xiaojieajie]

@xiaojieajie单击列表右侧的转换为问题按钮以创建问题并分配给自己，然后就可以开始了！

Ask me, I created issue, but I don't think the task can be selected?

[zyyv]

Can i handle the last one?

[hannoeru]

@xiaojieajie Task will auto checked when you close that issue.

[hannoeru]

Can i handle the last one?

Of course.

[userquin]

wtf: I created the issue this very morning, I just woke up and almost all the tasks started / closed, you are all amazing.

Thank you very much to all.

[UltraCakeBakery]

Can you add translate-x-full, translate-y-full and their negative variants to the list? @userquin

[userquin]

@UltraCakeBakery added and created issue

[zojize]

::before and ::after variants do not have content: '' by default. This is misaligned with tailwind according to this link and makes setting pseudo-elements practically ineffective. And there are no rules for content-* to set this content property. Another misalignment I found is space insertion/replacement when matching against arbitrary values, rules like h-[calc(1000px-4rem)] will generate invalid CSS since spaces are not inserted in the correct places. Can we add support to these?

Also, I tried creating my own content-* rule as follows:

[/^content-\[(.*)\]$/, ([, content]) => ({ content })],

However, this is unable to match rules containing quotes such as content-['']. The regexp should be fine, did I miss out on something here?

[antfu]

::before and ::after variants do not have content: '' by default

I am not sure why TW does this, won't it affects overall client performance since now every element comes with two pseudo-elements?

And there are no rules for content-* to set this content property

I am personally not a fan of this utility as I saw it kinda a mess to allow user provide arbitrary content in class, I feel that using inline style is more approach in this case.

h-[calc(1000px-4rem)] will generate invalid CSS since spaces are not inserted in the correct places

That's a good point, added to the list.

content-['']

Quotes are separators when we do the extracting. You can use JSON.strinify to escape the value:

[/^content-\[(.*)\]$/, ([, content]) => ({ content: JSON.stringify(content) })],

and use it like content-[]

[zojize]

First, thanks for your kind reply!

I am not sure why TW does this, won't it affects overall client performance since now every element comes with two pseudo-elements.

If I remember correctly, ::before and ::after pseudo-elements won't render if no content property is provided. Which I think is why Tailwinds sets content: '' by default.

I am personally not a fan of this utility as I saw it kinda a mess to allow user provide arbitrary content in class, I feel that using inline style is more approach in this case.

And this is the one and only case where I find this content-* to be useful, that is used along with a ::before/::after variant like so. (e.g. before:content-[''], before:content-[counter(myCounter)])

Quotes are separators when we do the extracting. You can use JSON.strinify to escape the value:

Hmm, not too big of a fan of having quotes as separators. I'm thinking if it's possible for user-defined custom separators as a field in our configuration? Something along the lines of separators: [/\s/]. Just a wild proposal.

[antfu]

If I remember correctly, ::before and ::after pseudo-elements won't render if no content property is provided.

Yes. But applying to all elements just because that someone might need it does not sound good to me. I kinda prefer to introduce a new content-empty util that you can explicitly set like class="before:content-empty before:p-4"

I'm thinking if it's possible for user-defined custom separators as a field in our configuration

Yes, you can provide your custom extractor. https://github.com/antfu/unocss/blob/main/packages/core/src/extractors/split.ts

Something along the lines of separators: [/\s/]

That wouldn't work actually. Consider you have class="p-4 m-5" it will be split into class="p-4 and m-5". Not saying it's impossible to do right, just feel it's not worth it to sacrifice performance and maintainability for a relatively rare use-case (but you can always provide your custom one for sure)

[userquin]

epic