feat(bundler): change bundler from tsup to vite

[stephenliang]

This PR changes the bundler of choice for the component library from tsup to vite library mode. tsup is now deprecated and its replacement option is tsdown which is a flavor of rolldown. Considering vite uses rollup (and eventually rolldown), using vite library mode makes the most sense to ensure we have a consistent bundler ecosystem across all apps and packages.

This change preserves the existing CommonJS and ESM dual output structure. It also preserves the auto-style injection functionality that was done when you import a component, it will also inject its CSS into the DOM.

On the apps side, webpack needs to be configured to not re-modularize CSS that was already modularized. The component library uses SASS modules which is modularized during vite build. However, this results in an extra modularization step in webpack which results in styles not being applied.

Furthermore, this change reduces the common-studio bundle size by approximately 2.8 mb (old size: 16.92mb, new size: 14.16mb). This was accomplished by leveraging the code splitting and CSS splitting feature made available in vite library mode which was not previously available in tsup. This allows webpack to tree shake unused dependencies.

• Update CSS module handling to prevent node_modules from being treated as CSS modules.
• Modify package.json to specify sideEffects for CSS files.
• Introduce new Vite configuration for better asset management and CSS injection.
• Remove tsup configuration file.
• Add new dependencies for CSS handling in the build process.

[Copilot]

Pull request overview

This PR migrates the component library bundler from the deprecated tsup to Vite library mode, maintaining dual CommonJS/ESM output and auto-style injection while achieving a 3 MB bundle size reduction through improved code splitting and tree shaking capabilities.

Key changes:

• Replaced tsup with Vite library mode for improved bundling and code splitting
• Added vite-plugin-lib-inject-css to automatically inject CSS imports at component entry points
• Updated webpack configuration to prevent re-modularization of already-processed CSS modules from node_modules

Reviewed changes

Copilot reviewed 48 out of 49 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vite.config.ts	New Vite configuration implementing library mode with dual format output, TypeScript declaration generation, CSS injection plugin, and custom asset naming
tsup.config.ts	Removed deprecated tsup configuration file
tsconfig.json, tsconfig.app.json, tsconfig.node.json	Restructured TypeScript configuration to use project references for Vite
package.json	Updated build scripts, dependencies, exports paths, and added CSS sideEffects declaration
Component index files	Removed manual CSS imports (now handled by lib-inject-css plugin) and added type keyword to type-only exports
carousel.module.scss	Moved Swiper CSS imports from TypeScript to SCSS
webpack.config.js	Added CSS module auto-detection to exclude node_modules from CSS modularization
.gitignore	Updated to reflect new build artifacts

---

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

[Copilot]

Corrected spelling of 'accordrion' to 'accordion'.

Suggested change

	"./accordrion/faqAccordion": {
	"./accordion/faqAccordion": {

[stephenliang]

Interesting, although this component doesn't appear to be actually used. I'll have to remove this as a followup.

[Copilot]

The regex test should use proper escaping or a more robust path check. The current pattern /node_modules/ doesn't escape the forward slashes and could be improved. Consider using resourcePath.includes('node_modules') for clarity or properly escape the regex pattern.

Suggested change

	return !/node_modules/.test(resourcePath);
	return !resourcePath.includes('node_modules');

[github-actions]

🖼️ Storybook Visual Comparison Report

✅ No Storybook eyes differences detected!