Rollup - how to prevent CSS import from d.ts file?

Viewed 14

I have a React & Typescript / tailwind / postcss / Rollup setup to build a component library, at this repo.

Everything is working as intended apart from one issue; a corresponding import for ../styles/index.css is being included in the outputted dist/index.d.ts file. I wish to have declarations for my components, but not this CSS import.

The problem is that this index.css file is outside the dist directory, and is not included in the final library. Instead, the minified and purged tailwind css file is being generated and used instead.

Current solution

I am currently relying on a post-build command to remove the import from the file using sed:

scripts: {
    ...
    "build": "rollup -c && cp dist.package.json dist/package.json",
    "fix": "sed '1d' ./dist/index.d.ts > ./tmp.d.ts; mv ./tmp.d.ts ./dist/index.d.ts",
}

I do not feel this is an optimal approach. If I can prevent the import in the build process instead, this would be preferred.

Similar issues

I found this issue but the pseudo code provided does not work / is not complete. Furthermore, this feels like a workaround rather than an actual fix.

rollup.config.js

For what it is worth, my current rollup config is as follows:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import del from "rollup-plugin-delete";
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";

/**
 * @type {import('rollup').RollupOptions}
 */
export default {
  input: "lib/index.tsx",
  output: [
    {
      file: "dist/index.tsx",
      format: "es",
      sourcemap: false,
    },
  ],
  plugins: [
    del({ targets: "dist/*" }),
    peerDepsExternal(),
    postcss({
      config: {
        path: "./postcss.config.js",
      },
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false }),
        cssnano(),
      ],
      extensions: [".css"],
      minimize: true,
      modules: false,
      extract: "index.css",
    }),
    resolve(),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
  ],
};
0 Answers
Related