perf: optimize css chunks

[antfu]

#1239

This PR made the following two changes to optimize the css chunking:

• Make the component and styles of Vue Data UI async on-demand
• Separate the icons layer from the main UnoCSS entry and then it async
  • This would introduce a side-effect that the icons css become unblocking and might have flash-of-no-icons on first load. We could discuss if this would be worth it.

Deploy Preview: https://npmxdev-git-fix-css-optimization-npmx.vercel.app/

Before:

After:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 9, 2026 1:44pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 9, 2026 1:44pm
npmx-lunaria	Ignored		Mar 9, 2026 1:44pm

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR integrates UnoCSS icon handling into the project. It adds dynamic loading of icon CSS in app/app.vue, creates a new transformer (transformerIconInlineBlock) to automatically append inline-block styling to icon classes matching the i-* pattern, and updates the UnoCSS configuration with pipeline exclusions for CSS-related files. Additionally, it removes vue-data-ui/style.css from the Nuxt configuration, disables UnoCSS autoImport in the main config while enabling it in the test environment, and updates dependency ignore lists to include UnoCSS virtual modules.

Possibly related PRs

• feat: generate sprite for file view #1347: Both PRs address icon class handling strategy—this PR adds transformerIconInlineBlock for automatic inline-block styling on i-* classes, directly related to the icon delivery and class handling changes.
• test: configure lint-css to check a11y and rtl #1203: Both PRs modify UnoCSS configuration in uno.config.ts, including pipeline and transformer adjustments.
• fix: icons disappear in Windows High Contrast Mode #1150: Both PRs modify the UnoCSS icon preset configuration in uno.config.ts affecting icon styling properties.

Suggested labels

front

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining CSS chunking optimizations including Vue Data UI async loading and icon layer separation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/css-optimization

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[danielroe]

this is amazing! I do think we need to move inline-block into the individual icons as otherwise there's now tiny layout shifts for every icon.

[alexdln]

So, our style utilities weren't working in tests, and this PR fixed it, which is why a11y tests started crashing. For example, opacity-50 isn't working in production tests right now, and we actually have a number of elements that aren't being covered correctly by our tests. I will fix what I can with low changes here or disable some of them tomorrow

[danielroe]

let's fix the styles-in-tests issue separately - probably the manual uno.css import is all that is needed.

(ie let's not split icon styles for now)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[alexdln]

Tests crashed with this setting. I haven't yet determined why exactly, but it changes the styles in tests

  content: {
    pipeline: {
      exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/, /[/\\]node_modules[/\\]/],
    },
  },

I've removed it for now and think I can try exploring it in the next issue.

---

Also, the PR originally had a transformer for icons that hardcoded extra classes. This was done so that after changes, icons are loaded lazily and later, and their styles weights become heavier. But this doesn't suit us, since we do a lot of customization on top of icons (sizes, colors, etc.), and it wasn't stable for pseudo-classes.

Fixed it via Layers - looks like it's the only stable option. Overall, I don't see any reason why we shouldn't use it - it seems like it's already become a standard properties with almost perfect support

---

Also enabled styles autoimport in storybook env