Rollup: inject "import index.css" into the index.ts file

Question

I have a project that I want to create an NPM package from it. My stack is: React, Typescript, less, and AntD. When I'm creating a bundle with rollup.js, everything workes fine, but, the import CSS isn't injected to the top of the index.ts that I'm exporting. the only way I was able to have the CSS code in another project is by explicitly importing the CSS file (import "mypackage/dist/index.css"). I'm searching for a way to config rollup to inject the line import "./index.css" to the beginning of the main index.ts file. I have tried a lot of plugins of css/less, with no success. Here is my current rollup.config.js:

import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";

import pkg from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: pkg.main,
      format: "esm",
      exports: 'named',
      sourcemap: true,
      strict: false,
    },
  ],
  plugins: [
    postcss({
      extensions: ['.less', '.css'],
      minimize: true,
      modules: true,
      use: {
        sass: null,
        stylus: null,
        less: { javascriptEnabled: true },
      },
      extract: true,
    }),
    typescript({
      objectHashIgnoreUnknownHack: true,
      sourceMap: true,
      inlineSources: true,
    }),
  ],
  external: ["react", "react-dom"],
};

Answer 1

Just remove extract keyword:

postcss({
  extensions: ['.less', '.css'],
  minimize: true,
  modules: true,
  use: {
    sass: null,
    stylus: null,
    less: { javascriptEnabled: true },
  },
}),