feat: implement tree-shaking

[quangtuanitmo18]

Tree-shaking Support for @codexteam/ui

Description

• This PR adds full tree-shaking support for CodeXUI package, enabling consumers to import only the components and themes they need, significantly reducing bundle size.
• Fix style modules for some components.

Implementation package

• Import base styles
• Import Themes
• Import components

Example

main.ts

import { createApp } from 'vue';
import App from './App.vue';

// 1. Base styles (required)
import '@codexteam/ui/styles';

// 2. Only themes you need (tree-shakeable)
import '@codexteam/ui/styles/themes/pure';
import '@codexteam/ui/styles/themes/grass';

createApp(App).mount('#app');

app.vue

<script setup lang="ts">
// 3. Only components you need (tree-shakeable)
import { Button, Avatar, Chart, ChartLineColor } from '@codexteam/ui/vue';
import type { ChartLine } from '@codexteam/ui/vue';

// Generate sample chart data
function generateData(points: number, intervalSeconds: number, baseValue = 100) {
  const now = Math.floor(Date.now() / 1000);
  return Array.from({ length: points }, (_, i) => ({
    timestamp: now - (points - i) * intervalSeconds,
    count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
  }));
}

// Chart data - 30 days of events
const chartLines: ChartLine[] = [
  {
    label: 'Sales',
    data: generateData(30, 86400, 150),
    color: ChartLineColor.Red,
  },
  {
    label: 'Views',
    data: generateData(30, 86400, 80),
    color: ChartLineColor.LightGrey,
  },
];
</script>

<template>
  <!-- 4. Apply theme attributes -->
  <div color-scheme="light" theme-accent="pure" theme-base="grass">
    
    <!-- 5. Use components -->
    <Button @click="handleClick">Click me</Button>
    
    <Button icon="Plus">With Icon</Button>
    
    <Avatar 
      src="https://example.com/avatar.jpg" 
      username="John Doe"
      size="medium"
    />
    
    <Chart :lines="chartLines" detalization="days" />
    
  </div>
</template>

Compare the results with and without tree-shaking

[vercel]

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

Project	Deployment	Review	Updated (UTC)
codex-ui	Ready	Preview, Comment	Jan 24, 2026 3:43pm

[neSpecc]

How tree-shaking works for components?

[quangtuanitmo18]

How tree-shaking works for components?

For Components

1. preserveModules: true in Rollup config keeps each component as separate file
2. sideEffects in package.json marks CSS files as having side effects
3. ES Modules named exports allow bundlers to statically analyze imports

When user imports:

import { Button, Avatar } from '@codexteam/ui/vue';

Bundler analyzes and includes ONLY:

• dist/vue/components/button/Button.vue.js
• dist/vue/components/avatar/Avatar.vue.js

All other components (Editor, Input, Chart, etc.) are completely eliminated from the final bundle.

For Themes

Similar approach - each theme is a separate CSS file:

import '@codexteam/ui/styles/themes/pure';   // Only pure theme included
import '@codexteam/ui/styles/themes/grass';  // Only grass 

[Copilot]

Pull request overview

This pull request implements tree-shaking support for the @codexteam/ui package, allowing consumers to import only the components and themes they need to reduce bundle size. The implementation restructures the build configuration to split CSS files and preserve module structure.

Changes:

• Enabled CSS code splitting and module preservation in Vite build configuration
• Separated theme CSS files into individual importable modules
• Converted several Vue components to use CSS modules (ThemePreview, Tabbar, Editor, Counter, Chart, ChartLine)
• Updated package.json exports to expose individual theme files and TypeScript types
• Moved font imports to separate fonts.pcss file
• Updated documentation with tree-shaking usage examples

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
@codexteam/ui/vite.config.ts	Enabled CSS code splitting, added individual theme entries, configured module preservation for tree-shaking
@codexteam/ui/tsconfig.dts.json	Updated TypeScript declaration output directory structure
@codexteam/ui/package.json	Added version bump, sideEffects configuration, individual theme exports, and TypeScript types path
@codexteam/ui/src/styles/index.pcss	Removed themes import to enable individual theme imports
@codexteam/ui/src/styles/typography.pcss	Removed font imports (moved to separate file)
@codexteam/ui/src/styles/fonts.pcss	Created new file with font imports for separate loading
@codexteam/ui/src/vue/components/*/**.vue	Converted multiple components to use CSS modules for better encapsulation
@codexteam/ui/README.md	Updated documentation with tree-shaking examples and usage instructions
@codexteam/ui/.gitignore	Added comprehensive gitignore patterns
@codexteam/ui/.npmignore	Added test-app to ignored files
@codexteam/ui/dev/index.html	Updated dev environment to import fonts and themes separately

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.