fix(web-fonts): hoist @import in single layer

[zyyv]

When building with this warning, i think we can sort the css ahead of time.

// uno.config.ts
presetWebFonts({
  provider: 'google',
  fonts: {
    ...
  },
  inlineImports: false,
}),

[netlify]

✅ Deploy Preview for unocss ready!

Name	Link
🔨 Latest commit	bc8acf6
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/64c687c147bccc000874af52
😎 Deploy Preview	https://deploy-preview-2909--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.

[zyyv]

I don't know if it's better to handle it in core or vite plugin.
What do you think ? Or we don't need it at all.

[zyyv]

Done.
Extracte css with @import preflight's and put it in a new layer named @imports.

[antfu]

Should put in the rule, not the core, as it, again, coupled and affect every generation

[zyyv]

You mean, when writing them, put them into the import layer actively?

prelights: [
 {
   layer: 'imports',
   getCSS: ()=> `@import ....`
 }
]

coupled and affect every generation

Although it is a bit coupled, uno can correct it in the final stage by Regexp, and extract the correct import css to the layer. Make it a default behavior? 😅

[antfu]

Pushed the changes. In some CSS parsers, @import can be everywhere. And when a rule emits a raw string, UnoCSS assumes the syntax error etc are handled correctly by the rule itself. To not baby-sitting too much is one of the factors that keep UnoCSS fast.

If the change looks good to you, we could merge it and proceed.

[zyyv]

To not baby-sitting too much is one of the factors that keep UnoCSS fast.

Thanks your guide, keep it in mind.🥰