Doesn't work with multiple entries

[onlywei]

I tried it and the import statement to the CSS file is gone once multiple tsdown entries are used.

Sorry for low effort issue, if you really want me to I can come back and make the issue better but I think it's clear.

[bosh-code]

Hey no worries, sorry for the late reply. I think I know what you mean, but could you please add an example tsdown.config.ts file? I'll have a look into it in the meantime.

[onlywei]

Here you go:

import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css';
import browserslist from 'browserslist';
import { browserslistToTargets } from 'lightningcss';
import { defineConfig } from 'tsdown';
import LightningCSS from 'unplugin-lightningcss/rolldown';

export default defineConfig({
	entry: ['src/index.ts'],
	dts: true,
	sourcemap: true,
	target: 'chrome120',
	platform: 'browser',
	plugins: [
		LightningCSS({
			options: {
				cssModules: false, // tsdown is already doing cssModules, don't double-process
				targets: browserslistToTargets(browserslist(['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'])),
			},
		}),
		injectCssPlugin(),
	],
});

[bosh-code]

Hi, I know it's a late reply, but I modified the tsdown.config.ts on this branch to resemble the supplied one and it worked fine.

Config file:

import { defineConfig } from 'tsdown';
import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css';
import browserslist from 'browserslist';
import { browserslistToTargets } from 'lightningcss';
import LightningCSS from 'unplugin-lightningcss/rolldown';

export default defineConfig([
  {
    entry: ['./src/index.ts'],
    external: ['react', 'react/jsx-runtime'],
    target: 'chrome120',
    platform: 'browser',
    dts: true,
    sourcemap: true,
    plugins: [
      LightningCSS({
        options: {
          cssModules: false,
          targets: browserslistToTargets(browserslist(['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'])),
        },
      }),
      injectCssPlugin()
    ],
    tsconfig: './tsconfig.lib.json',
  }
]);

Here's the built file:

import React from "react";
import { jsxs } from "react/jsx-runtime";

import './index.css';
//#region src/MyButton.tsx
const MyButton = ({ type }) => {
	return /* @__PURE__ */ jsxs("button", {
		className: "text-red-500",
		children: ["my button: type ", type]
	});
};

//#endregion
export { MyButton };
//# sourceMappingURL=index.js.map

However, I suspect that that you may have meant to supply a config file with a change to entry, similar to this:

import { defineConfig } from 'tsdown';
// ...

export default defineConfig([
  {
    entry: ['./src/lib1/index.ts', './src/lib2/index.ts'],
	// ...
  }
]);

This can lead to some unwanted results depending on the naming of the .css file. I am looking into resolving this, in the meantime can you use this as a work around:

export default defineConfig([
  {
    entry: ['./src/lib1/index.ts'],
    outDir: 'dist/lib1', // specify outDir
    // ...
  },
  {
    entry: ['./src/lib2/index.ts'],
    outDir: './dist/lib2', // specify outDir
    // ...
  }
]);