refactor(preset-attributify): improve ternary extraction

[sibbng]

Fixes #1915

It seems we already support this in Vue templates. This PR adds support for ternary operators in JSX and eliminates some false positives of previous ternary extraction logic.

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8287f08
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/63823c2ee7f6e00008da1288
😎 Deploy Preview	https://deploy-preview-1921--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[zyyv]

@sibbng Can you check your pr with this playground

[zyyv]

In #1915 , I am more inclined that this is a user's usage rules problem.

[sibbng]

@sibbng Can you check your pr with this playground

posTest is not a valid rule. So it's not picked up by any attributify selector.

In #1915 , I am more inclined that this is a user's usage rules problem.

No, it's not. We already have a test for extracting ternaries from vue templates. This PR adds support for JSX.

[zyyv]

We already have a test for extracting ternaries from vue templates

Can you guide me where is the test code?

Following this image, this token was not generated because it has no corresponding rule or variant

[sibbng]

Can you guide me where is the test code?

test/preset-attributify.test.ts:22

[zyyv]

Can you guide me where is the test code?

test/preset-attributify.test.ts:22

unocss/test/preset-attributify.test.ts

Line 22 in 22c4e70

:font="foo > bar ? 'mono' : 'sans'"

About this line, you can see UnoCSS extracted results:

unocss/test/__snapshots__/preset-attributify.test.ts.snap

Lines 28 to 34 in 22c4e70

	"[font~=\\"foo\\"]",
	"[font~=\\">\\"]",
	"[font~=\\"bar\\"]",
	"[font~=\\"?\\"]",
	"[font~=\\"mono\\"]",
	"[font~=\\":\\"]",
	"[font~=\\"sans\\"]",

Only font-mono and font-sans can be parsed, because we have its rules.

unocss/test/__snapshots__/preset-attributify.test.ts.snap

Lines 199 to 200 in 22c4e70

	[font~=\\"mono\\"]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}
	[font~=\\"sans\\"]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Arial,\\"Noto Sans\\",sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\",\\"Noto Color Emoji\\";}

---

In #1915, We don't have any rule or variant about pos

[sibbng]

In #1915, We don't have any rule or variant about pos

pos is shorthand for position

unocss/packages/preset-mini/src/_rules/position.ts

Lines 5 to 9 in 22c4e70

	export const positions: Rule[] = [
	[/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
	[/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : undefined],
	[/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
	]

About this line, you can see UnoCSS extracted results:

This is exactly what I called false positives. In this case, they will not make into output since there are no matching rules as you said. But, what if the variables we used in ternaries are has matching rules? e.g:

<div
  :text="xl ? '5xl' : 'base'"
/>

• Deploy preview playground
• main branch Playground

As you can see from the output an unnecessary selector [text~="xl"] is generated in main branch.

This PR makes sure, only the quoted strings in the true or false side of the ternary are extracted. Both for vue and JSX.

[zyyv]

I'm so sorry, and thanks for you answer, you are right. I never use pos this shorthand, i forgot it. 😅

[pawover]

Thanks for this PR, are there any plans for new releases in the near future?