Skip to content

Commit 9d129b3

Browse files
committed
feat(bundler): change bundler from tsup to vite
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 3 mb. 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.
1 parent 61663e1 commit 9d129b3

File tree

49 files changed

+2426
-480
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2426
-480
lines changed

apps/webpack.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,10 @@ const WEBPACK_BASE_CONFIG = {
280280
loader: 'css-loader',
281281
options: {
282282
modules: {
283-
auto: true,
283+
auto: resourcePath => {
284+
// Do not treat CSS files in node_modules as CSS modules
285+
return !/node_modules/.test(resourcePath);
286+
},
284287
localIdentName: process.env.DEV
285288
? '[path][name]__[local]'
286289
: '[hash:base64]',
Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
dist
2-
# tsup generated files
3-
tsup.config.bundled_*.mjs
2+
tmp

0 commit comments

Comments
 (0)