Cleaner way to define Arbitrary Variants

[stefanvanherwijnen]

For example:

  [
    /^q-field__native$/,
    ([, c], { theme }) =>
      theme.quasar?.components?.['q-field__native'] ??
      `font-normal leading-[28px] tracking-[0.00937em] [text-decoration:inherit] [text-transform:inherit] border-none rounded-none bg-transparent text-black/87 px-0 w-full min-w-0 !outline-none select-auto 
        [&:focus-visible]:(!outline-none)
        [&textarea:focus]:(outline-none)
        [&input:focus]:(outline-none)
	[&:-webkit-autofill]:() 
	[&:-webkit-autofill_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='color']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='date']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='datetime-local']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='month']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='time']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&[type='week']_+_.q-field\\_\\_label]:(-translate-y-[40%] scale-[0.75]) 
	[&:invalid]:([box-shadow:none]) 
	[&[type='file']]:(leading-[1em])`
  ],

The arbitrary variant selectors look messy, party because of the double escape characters (\). There probably is a better way to define CSS selectors.

Any feedback, suggestions or help is appreciated.

https://unocss.dev/extractors/arbitrary-variants
https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants