feat(presets): configurable separator

[chu121su12]

This PR adds configurable separator to the three built-in presets.

Reference: #1573, #1704

Edit: rebase commit

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	af1bcb7
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/63bb9f96aeb7dd0008722b77
😎 Deploy Preview	https://deploy-preview-1791--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.

[antfu]

I am not sure if the complexity is it worth here. And I didn't find a strong reason why the separator needs to be configurable. Anyone share more context?

[chu121su12]

@tjk please excuse me for the ping. I'd like to ask for your take

[tjk]

I personally think it's very highly worth it since tailwind allows configuring separator and if someone uses _ (like we do) then trying to transition to preset-wind, etc. without this functionality is impossible without some internal hack. The regexes get memoized and I don't find this highly complex anyway but obviously @antfu need to change his feeling for this to get merged...

Maybe you can tell us what you think the suggestion is for someone trying to migrate a large codebase with a custom separator then if you don't want this merged?

---

Maybe somehow memoizing the entire substring (?:${ctx.config.separators.join("|")) would reduce some complexity -- eg. ctx.reSep?

[antfu]

This PR changes quite a lot of static regex into dynamic ones. Static regex is one of the key reasons UnoCSS is fast, as the JS engine could do JIT optimization and compile them to native code. While on the other hand, creating regex in every pass breaks that and would decrease the performance quite a bit.

For your need, it's actually quite simple to do with a one-line variant:
https://uno.antfu.me/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAuBTAHpgfQCdsR0A%2BAJQFEARYAenAnKA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUiQYAHpFjpsAQy4AbeJhz4iJYKQAUyVABu9uz2uDB0AFxwANpUqD4MThgSMNAAlHAAvAB8cInJqVAAdLRgTvYSGD4A9AD61RT6ALR6aVQAurIiCpExcXKiSio%2BabLC8owsbJw8fPwjsu1Iam1AA&options=N4XyA

export default defineConfig({
  variants: [
    (selector) => selector.replace(/_/g, '-')
  ],
  presets: [
    presetUno(),
    presetAttributify(),
  ]
})

[chu121su12]

I've updated the regexes that can be cached; otherwise, the variant approach is acceptable too

[antfu]

Ok. Let's ship it in the next minor