[ISSUE] after install react-reizable-panels is changing my tsup css bundle config

I notice that after I installing the react-resizable-panels library my tsup css changed a little bit (maybe the library css is not scoped)

I have a project with tsup config above:

import * as path from "path";
import { promises as fsPromises } from "fs";
import postcss, { AcceptedPlugin } from "postcss";
import postcssModules from "postcss-modules";
import { defineConfig, type Options } from "tsup";
import postcssConfig from "./postcss.config.cjs";

const config = defineConfig((options: Options) => ({
  entry: ["./**/*.tsx", "src/index.ts"],
  format: ["esm", "cjs"],
  dts: true,
  clean: true,
  minify: process.env.NODE_ENV === "production",
  platform: "browser",
  skipNodeModulesBundle: true, // Skips building dependencies for node modules
  esbuildOptions(options) {
    if (options.platform === "browser") {
      options.banner = {
        js: '"use client"',
      };
    }
  },
  // loader: {
  //   ".css": "local-css",
  // },
  esbuildPlugins: [
    {
      name: "postcss-plugin",
      setup(build) {
        build.onLoad({ filter: /\.css$/ }, async (args) => {
          const source = await fsPromises.readFile(args.path, "utf8");
          const result = await postcss(
            postcssConfig.plugins as unknown as AcceptedPlugin
          ).process(source, { from: args.path });
          return {
            contents: result.css,
            loader: "css",
          };
        });
      },
    },
    {
      name: "css-module",
      setup(build): void {
        build.onResolve({ filter: /\.css$/, namespace: "file" }, (args) => {
          if (args.path.endsWith(".module.css")) {
            // Skip .module.css files here
            return;
          }
          return {
            path: path.resolve(args.resolveDir, args.path),
            namespace: "file",
          };
        });
        build.onLoad({ filter: /\.css$/, namespace: "file" }, async (args) => {
          if (args.path.endsWith(".module.css")) {
            // Skip .module.css files here
            return;
          }
          const source = await fsPromises.readFile(args.path, "utf8");
          const result = await postcss().process(source, { from: args.path });
          return {
            contents: result.css,
            loader: "css",
          };
        });
        build.onResolve(
          { filter: /\.module\.css$/, namespace: "file" },
          (args) => ({
            path: `${args.path}#css-module`,
            namespace: "css-module",
            pluginData: {
              pathDir: path.join(args.resolveDir, args.path),
            },
          })
        );
        build.onLoad(
          { filter: /#css-module$/, namespace: "css-module" },
          async (args) => {
            const { pluginData } = args as {
              pluginData: { pathDir: string };
            };

            const source = await fsPromises.readFile(
              pluginData.pathDir,
              "utf8"
            );

            let cssModule = {};
            const result = await postcss([
              postcssModules({
                generateScopedName: (name, filename, css) => {
                  const i = css.indexOf("." + name);
                  const file = path.basename(filename, ".module.css");

                  return `${file}_${name}`;
                },
                getJSON(_, json) {
                  cssModule = json;
                },
              }),
            ]).process(source, { from: pluginData.pathDir });

            return {
              pluginData: { css: result.css },
              contents: `import "${
                pluginData.pathDir
              }"; export default ${JSON.stringify(cssModule)}`,
            };
          }
        );
        build.onResolve(
          { filter: /\.module\.css$/, namespace: "css-module" },
          (args) => ({
            path: path.join(args.resolveDir, args.path, "#css-module-data"),
            namespace: "css-module",
            pluginData: args.pluginData as { css: string },
          })
        );
        build.onLoad(
          { filter: /#css-module-data$/, namespace: "css-module" },
          (args) => ({
            contents: (args.pluginData as { css: string }).css,
            loader: "css",
          })
        );
      },
    },
  ],
  publicDir: true,
  external: ["react"],
  ...options,
}));

export default config;

This config allow me to create an stand alone components library, that I'm using in a storybook project and also nextjs project, so when trying to install on this ui package react-size-panels my index.css file that I'm exporting on the bundled dist folder is getting deleted.

Above I show what is happening:

https://github.com/bvaughn/react-resizable-panels/assets/75961352/bed1f1de-d877-48d6-9a5a-752122469b3a

bvaughn / react-resizable-panels

[ISSUE] after install react-reizable-panels is changing my tsup css bundle config #222