Bundle CSS file without any processing

[nareshbhatia]

1. tsup docs mention that it has "experimental CSS support". What does that mean?

2. Specifically, when I build my package, I want to add a simple global css file to the /dist folder. How can I do that? I tried adding the css file to the tsup command like this:

"build": "tsup src/index.ts src/styles/main.css --format esm,cjs --dts --external react"

However this is giving lots of errors like this:

ui-lib:build: ✘ [ERROR] [plugin postcss] postcss.default is not a function
ui-lib:build:
ui-lib:build:     ../../node_modules/tsup/dist/index.js:1384:74:
ui-lib:build:       1384 │ ...null ? void 0 : postcss.default(plugins).process(contents, _c...
ui-lib:build:            ╵                                   ^
ui-lib:build:
ui-lib:build:     at /Users/naresh/projects/custom-react-stack/node_modules/tsup/dist/index.js:1384:75
ui-lib:build:     at async callback (/Users/naresh/projects/custom-react-stack/node_modules/tsup/node_modules/esbuild/lib/main.js:981:28)
ui-lib:build:     at async handleRequest (/Users/naresh/projects/custom-react-stack/node_modules/tsup/node_modules/esbuild/lib/main.js:709:30)
ui-lib:build:
ui-lib:build:   This error came from the "onLoad" callback registered here:
ui-lib:build:
ui-lib:build:     ../../node_modules/tsup/dist/index.js:1365:13:
ui-lib:build:       1365 │       build2.onLoad({ filter: /\.css$/ }, async (args) => {
ui-lib:build:            ╵              ~~~~~~

So what's the right way to add a css file to /dist using tsup?

[adoniscyz]

You can import main.css in index.ts

[swalker326]

I'm struggling with this too. It is also brought up here

Even when i import my *.css in my index.ts, when the build happens the css is not applied to the built component.

In my use case I have a monorepo with core, docs & ui trying to use the ui components across my mono repo has been a huge pain.

edit: Here are the pain points from ESbuild

[porkytheblack]

I'm getting the same issue, have you fond any fixes?

[nareshbhatia]

I am now simply copying files to the published bundle. See a full working example here: https://github.com/code-shaper/movie-magic/blob/main/packages/ui-lib/package.json#L15

In fact, I have baked this solution into my code-generation templates. See https://www.code-shaper.dev/

[Elishaya13]

Page not found