Back

Technologies:

javascriptjavascript
reactjsreactjs
typescripttypescript
avatar
Tolerim
a month ago

When importing a component from the React, Typescript, and Rollup-created component library, all CSS from every other component is added into the <head> section.

I have developed a React Component library utilizing Typescript and Rollup. However, when I use it in other applications, I face an issue. The CSS files of all the other components are included in the <head> tags of the app when I import a single component like this: import { Button } from "@company/component-library";. But, the correct way to import a component is as follows: import { Button } from "@company/component-library/dist/components/Button/Button";, which only adds 2 CSS files in the <head> as expected. I want to achieve the same behavior with the first import method. Can you guide me on how to accomplish this? My Rollup configuration is shown below:
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use CSS modules to achieve this. CSS modules are a way to scope CSS by automatically creating a unique class name for each component. This allows you to import CSS files without worrying about naming conflicts. You can read more about CSS modules here. You can also use PostCSS to extract only the used CSS classes from your CSS files. This way, you can import the entire CSS file and only the necessary styles will be included in the final bundle. You can read more about PostCSS here. Another option is to use Webpack's mini-css-extract-plugin. This plugin extracts all the CSS files into separate files and includes them in the final bundle only if they are used. You can read more about this plugin here. I hope this helps! Let me know if you have any other questions.

Sources

How to import a css file in a react component as raw text?React CSS - W3SchoolCreating a common component library with CSS and SASS in React.How to import css for only any component in ReactjsHow to import a CSS file in a React Component - Stack OverflowImporting css file to specific component react app
avatar
Tolerim
a month ago
The issue you're facing is that when you import a single component from your library, all of the CSS files for all of the other components are included in the tags of the app. This is happening because you're using CSS modules and the class names generated by the CSS modules are scoped globally by default. One way to fix this is to configure your Rollup output to generate a separate CSS file for each component. This can be done by setting the output.assetFileNames option in your Rollup config to include the component name in the CSS file name, like this: 
output: [
  {
    dir: "dist",
    format: "esm",
    preserveModules: true,
    sourcemap: true,
    exports: "named",
    assetFileNames: "css/[name].css" // include component name in CSS file name
  }
],
This will generate a separate CSS file for each component in the dist/css directory. When you import a component, only the CSS file for that component will be included in the tag. Another way to fix this is to manually scope the class names generated by the CSS modules to the component's container element. This can be done by using the :local modifier in your CSS, like this: 
.button {
  composes: baseButton from "./baseButton.module.css";

  /* scope class names to component */
  :local .button-inner {
    color: red;
  }
}
This will generate class names like button__button-inner___3YWtZ where button is the component's class name, button-inner is the local class name, and 3YWtZ is a hash. When the component is rendered, the class names will be scoped to the component's container element. Both of these approaches should help you avoid the issue of including all of the CSS files in the tag when you import a single component.
;