How to bundle CSS with a component as an npm package?

Question

I am making a React component library downloadable through npm, Is there a specific way to bundle the styles into the package without having the end user explicitly import them? perhaps a webpack loader?

Answer 1

At first, you need to have your built css file(s) in your distributed package. Your webpack build (and your npm publish process) should do it.

Then the consumers of your library need to somehow include your css file(s) in their application (e.g.: with link in html head section or include it in less/scss files or import it directly to .js files with use of some webpack loader).

The webpack does not include css files automatically as it does not know they are necessary.

See for example these libraries, their css file has to be imported next to the js library itself:

https://github.com/Hacker0x01/react-datepicker#installation

https://github.com/react-component/slider#usage

Answer 2

For others seeking an answer check out styled-components:

https://styled-components.com/

We ended up taking the css in js route for multiple reasons one of which it solves this issue.

Answer 3

The way I do this is using the copy-files and rimraf package.

npm i -D copy-files rimraf

I use tsc to transpile my files and build my package. The output goes into the lib folder. "outDir": "lib", The tsc compiler uses the config file below to traverse my files and extract everything in to the lib. Now typescript only cares about ts, tsx files but we might need to have along our components their css, scss files or png or svg files and icons.

So I have a build script that uses a special tsconfig file to build my files and then more scripts that use copy-files to copy the artefacts that the components utilize.

 "clean": "rm -rf ./lib",
 "prebuild": "npm run clean",
 "build": "tsc --build ./tsconfig.build.json ",
 "copy-files": "copyfiles -u 1 -E -V  \"src/components/atoms/icons/images/**/*\" \"src/style/assets/**/*.otf\"  \"src/style/base.css\" \"src/**/*.*css\" lib/",
 "postbuild": "npm run copy-files",

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom"],
    "outDir": "lib",
    "jsx": "react",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "skipLibCheck": true,
    "sourceMap": true,
   
    /* "inlineSourceMap": true, */
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx", "./src/setupTests.ts"],
  "include": ["src"],
  "files": ["./src/index.ts"]
}

As we can see the above will transpile my files, save them packaged as a lib in the lib folder and then will copy any images, SCSS, CSS files etc in the lib output folder.

:)