fix: add CSS cascade layer support

[batuhan-bas]

Split CSS into separate files to allow usage with CSS cascade layers:

• @nuxt/ui/sources - contains @source directives (must stay outside layers)
• @nuxt/ui/theme - contains theme styles (can be used inside layers)

This allows users to use Nuxt UI with CSS cascade layers:

@import "@nuxt/ui/sources";
@import "tailwindcss" layer(tailwindcss);
@import "@nuxt/ui/theme" layer(tailwindcss);

Fixes #4503

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

Additional Suggestion:

The watch hook for component detection only updates the ui.css template, but it should also update ui-sources.css since both depend on the same generateSources() function that changes when components are detected.

View Details

📝 Patch Details

diff --git a/src/templates.ts b/src/templates.ts
index 159e39a4..6b7e46d7 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -441,7 +441,7 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt, resolve: Resolv
   if (options.experimental?.componentDetection && nuxt.options.dev) {
     nuxt.hook('builder:watch', async (_, path) => {
       if (/\.(?:vue|ts|js|tsx|jsx)$/.test(path)) {
-        await updateTemplates({ filter: template => template.filename === 'ui.css' })
+        await updateTemplates({ filter: template => template.filename === 'ui.css' || template.filename === 'ui-sources.css' })
       }
     })
   }

Analysis

Component detection watch hook doesn't update ui-sources.css template

What fails: When component detection is enabled and new components are detected during development, the ui-sources.css template is not regenerated, causing it to become stale and not include the newly detected components.

How to reproduce:

1. Enable component detection: options.experimental?.componentDetection = true
2. In development mode (nuxt.options.dev = true)
3. Create or modify a component file (.vue, .ts, .js, .tsx, or .jsx)
4. Observe that the watch hook triggers and regenerates ui.css but not ui-sources.css

Result: The ui.css file gets updated with new component sources, but ui-sources.css remains stale because the watch hook filter only targets template.filename === 'ui.css'

Expected: Both ui.css and ui-sources.css should be regenerated since both templates call generateSources() (lines 195 and 284) and return dynamic content based on detected components. Per Nuxt Kit documentation, only templates matching the filter function are regenerated, so the filter must include both files.

Impact: Users relying on the separate @nuxt/ui/sources export (especially with cascade layers) won't see their newly detected components in the generated ui-sources.css file.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5849

commit: 159e516