Skip to content

perf: optimize css chunks #1375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
antfu wants to merge 14 commits into
base: main
Choose a base branch
from
Open

perf: optimize css chunks #1375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
01c3557
chore: try
antfu Feb 11, 2026
040b0c6
chore: try
antfu Feb 11, 2026
2a23d20
chore: update knip
antfu Feb 11, 2026
f9fd6ad
Merge remote-tracking branch 'origin/main' into fix/css-optimization
danielroe Feb 11, 2026
4743856
fix: add inline-block for icon classes, with transformer
danielroe Feb 11, 2026
9fc9b0b
fix: also add w/h
danielroe Feb 11, 2026
78808f0
fix: importance
danielroe Feb 11, 2026
5e7c7c4
test: reenable auto import in browser tests
danielroe Feb 11, 2026
b94d9d7
chore: resolve conflicts with main
alexdln Mar 8, 2026
42d8c8b
test: disable failed a11y tests after proper styles configuration
alexdln Mar 8, 2026
ee16cb0
perf: configure css layers for correct order
alexdln Mar 9, 2026
6fbb915
perf: enable uno autoimport in storybook
alexdln Mar 9, 2026
b24d4f0
Merge branch 'main' into fix/css-optimization
alexdln Mar 18, 2026
93dcfcf
Merge branch 'main' into fix/css-optimization
alexdln Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import type { Directions } from '@nuxtjs/i18n'
import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
import { isEditableElement } from '~/utils/input'

import 'uno.css'
import('uno:icons.css') // make icon css a separate, async chunk

const route = useRoute()
const router = useRouter()
const { locale, locales } = useI18n()
Expand Down
2 changes: 2 additions & 0 deletions app/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@layer properties, theme, base, icons, typography, shortcuts, default;

/* Base reset and defaults */
*,
*::before,
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/TrendsChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
import { useCssVariables } from '~/composables/useColors'
import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
Expand Down
4 changes: 4 additions & 0 deletions knip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ const config: KnipConfig = {
'@e18e/eslint-plugin',
'eslint-plugin-regexp',

/** Virtual Modules */
'uno.css',
'uno',

/** Used in test/e2e/helpers/ which is excluded from knip project scope */
'h3-next',
],
Expand Down
6 changes: 6 additions & 0 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ export default defineNuxtConfig({
},
},

unocss: {
// Storybook doesn't mount app.vue (where `uno.css` is imported),
// so disable this property only in non-storybook environments.
autoImport: isStorybook,
},

devtools: { enabled: true },

devServer: {
Expand Down
2 changes: 1 addition & 1 deletion uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export default defineConfig({
presetWind4(),
presetIcons({
extraProperties: {
'display': 'inline-block',
Copy link
Copy Markdown
Member

@danielroe danielroe Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was there a reason we removed this?

Copy link
Copy Markdown
Member

@alexdln alexdln Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Copy Markdown
Member

@alexdln alexdln Mar 18, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)?

'forced-color-adjust': 'preserve-parent-color',
},
warn: true,
Expand All @@ -39,6 +38,7 @@ export default defineConfig({
// keep this preset last
...(process.env.CI ? [] : [presetRtl(), presetA11y()]),
].filter(Boolean),
outputToCssLayers: true,
transformers: [transformerDirectives(), transformerVariantGroup()],
theme: {
spacing: { DEFAULT: '4px' },
Expand Down
5 changes: 5 additions & 0 deletions vitest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ export default defineConfig({
pwaAssets: { disabled: true },
},
ogImage: { enabled: false },
unocss: {
// app.vue (which imports 'uno.css') is stubbed out by
// @nuxt/test-utils, leaving utility classes missing.
autoImport: true,
},
},
},
},
Expand Down
Loading