perf: optimize css chunks

[antfu]

Resolves #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 18, 2026 0:21am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 0:21am
npmx-lunaria	Ignored		Mar 18, 2026 0:21am

[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, detailing CSS optimisation efforts including async loading of Vue Data UI and UnoCSS icon layers.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/css-optimization

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

[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

[danielroe]

was there a reason we removed this?

[alexdln]

Hmm, I don’t know to be honest, but feels like it’s better without it anyway - we’ll always control it on our side and get more correct default styles (f.e. if div - display:block, if span - inline)

[alexdln]

But I found why it was removed. Because you made it as a separate rule and removed it here. And then I converted it to layers (to avoid having a rule with !important sizes) and hadn't returned this rule 😬

wdyt? should we return it (it will be lazy loaded and can results in shifts if we haven't specified display on place, but it will have some default option)?