Environment
Vuetify Version: 4.0.1
Vue Version: 3.5.29
Vite Version: 7.3.1
vite-plugin-vuetify Version: 2.1.3
OS: macOS 15.3
Steps to reproduce
- Create a Vue 3 + Vuetify 4 project using
vite-plugin-vuetify with autoImport: true
- Import
vuetify/styles as recommended (e.g. in your plugin setup)
- Use any component that triggers auto-import of
VTimePicker (directly or transitively)
- Open browser DevTools and inspect an element with a Vuetify utility class like
.mt-6
- Observe two separate
@layer vuetify-utilities.helpers blocks applying the same .mt-6 rule
Expected Behavior
VTimePickerControls.css should contain only the component-specific styles for VTimePickerControls — a few hundred bytes at most, similar to other component CSS files (e.g. VTimePickerClock.css is 3.4KB).
Utility classes like .mt-6 should only appear once, from the vuetify/styles import (main.css).
Actual Behavior
vuetify/lib/components/VTimePicker/VTimePickerControls.css is 246,501 bytes and contains the entire contents of vuetify/lib/styles/utilities.css — all spacing helpers, visibility classes, elevation utilities, overflow, display, etc.
This causes duplicate CSS in any project that also imports vuetify/styles (which includes the same utilities as part of main.css). In dev mode, both are injected as separate <style> tags, doubling every utility rule.
File sizes for reference:
VTimePickerControls.css: 246,501 bytes (should be ~hundreds of bytes)VTimePickerClock.css: 3,439 bytes (normal)VTimePicker.css: 755 bytes (normal)utilities.css: 237,310 bytes (standalone utilities file — nearly identical to VTimePickerControls.css)main.css: 298,099 bytes (combined: core + colors + utilities)
Other comments
This appears to be a build/packaging issue where VTimePickerControls.css was accidentally bundled with the full utilities stylesheet instead of just the component's own styles.
The duplication is cosmetic (CSS cascade handles identical rules), but it adds ~246KB of redundant CSS to every page that uses VTimePicker, and makes the duplicate rules visible in DevTools which can be confusing during development.
Environment
Vuetify Version: 4.0.1
Vue Version: 3.5.29
Vite Version: 7.3.1
vite-plugin-vuetify Version: 2.1.3
OS: macOS 15.3
Steps to reproduce
vite-plugin-vuetifywithautoImport: truevuetify/stylesas recommended (e.g. in your plugin setup)VTimePicker(directly or transitively).mt-6@layer vuetify-utilities.helpersblocks applying the same.mt-6ruleExpected Behavior
VTimePickerControls.cssshould contain only the component-specific styles for VTimePickerControls — a few hundred bytes at most, similar to other component CSS files (e.g.VTimePickerClock.cssis 3.4KB).Utility classes like
.mt-6should only appear once, from thevuetify/stylesimport (main.css).Actual Behavior
vuetify/lib/components/VTimePicker/VTimePickerControls.cssis 246,501 bytes and contains the entire contents ofvuetify/lib/styles/utilities.css— all spacing helpers, visibility classes, elevation utilities, overflow, display, etc.This causes duplicate CSS in any project that also imports
vuetify/styles(which includes the same utilities as part ofmain.css). In dev mode, both are injected as separate<style>tags, doubling every utility rule.File sizes for reference:
VTimePickerControls.css: 246,501 bytes (should be ~hundreds of bytes)VTimePickerClock.css: 3,439 bytes (normal)VTimePicker.css: 755 bytes (normal)utilities.css: 237,310 bytes (standalone utilities file — nearly identical to VTimePickerControls.css)main.css: 298,099 bytes (combined: core + colors + utilities)Other comments
This appears to be a build/packaging issue where
VTimePickerControls.csswas accidentally bundled with the full utilities stylesheet instead of just the component's own styles.The duplication is cosmetic (CSS cascade handles identical rules), but it adds ~246KB of redundant CSS to every page that uses VTimePicker, and makes the duplicate rules visible in DevTools which can be confusing during development.