fix(transformer-directive): get raw string in directive, support slash & hash

[zyyv]

Since the ast generated by csstree does not meet this scenario, I will manually rearrange the ast. close #3784

[netlify]

✅ Deploy Preview for unocss ready!

Name	Link
🔨 Latest commit	25cca2f
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/663e3bcda7fc960008c6ed01
😎 Deploy Preview	https://deploy-preview-3790--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 configuration.

[antfu]

I guess #3788 also falls into a similar situation. And maybe : as well?

[antfu]

I don't know if we could retrieve the raw content of the attribute value.

[zyyv]

I guess #3788 also falls into a similar situation. And maybe : as well?

For this case, --uno: text-red:5; There are two :, obviously this is not a correct css syntax.

I'll update the test case see the output.

[zyyv]

If the node type was Declaration, those children node never has Raw type content. fixed #3788
(The result of manually adjusting ast is hopefully a good solution. 😂)

[antfu]

We could actually slice the code to get the raw string :)

[hooray]

I want to know if this is a bug. Do I have to write it like this in the future ?

--at-apply: hover:bg-stone-1 dark:hover:bg-stone-9; -> --at-apply: "hover:bg-stone-1" "dark:hover:bg-stone-9";

[zyyv]

I want to know if this is a bug. Do I have to write it like this in the future ?

--at-apply: hover:bg-stone-1 dark:hover:bg-stone-9; -> --at-apply: "hover:bg-stone-1" "dark:hover:bg-stone-9";

When multiple : appear without quotes, css-tree will parse incorrectly. At the same time, we should also follow the css writing rules.

{ 
  prop: value;
}

{
- --at-apply: hover:bg-stone-1 dark:hover:bg-stone-9;
+ --at-apply: 'hover:bg-stone-1 dark:hover:bg-stone-9';
}