title: Custom React Component Library not loading CSS when installed as dependency in another react project
body: <p>I am trying to create a custom react component library using rollup, css-modules and tailwind css. The problem is when I try to install it into another react project the css from the style sheet is not loaded.</p>
  <p>Folder structure is as below</p>
  <pre><code>src
   ┣ SimpleAlert
   ┃ ┣ SimpleAlert.js
   ┃ ┣ SimpleAlert.module.css
   ┃ ┗ styles.css
   ┣ assets
   ┃ ┗ tailwind.css
   ┗ index.js
  </code></pre>
  <p>My config is as below</p>
  <p><strong>rollup.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import peerDepsExternal from &quot;rollup-plugin-peer-deps-external&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import postcss from &quot;rollup-plugin-postcss&quot;;
  import babel from &quot;@rollup/plugin-babel&quot;;
  
  const packageJson = require(&quot;./package.json&quot;);
  
  export default {
      input: &quot;src/index.js&quot;,
      output: [
          {
              file: packageJson.main,
              format: &quot;cjs&quot;,
              sourcemap: true,
          },
          {
              file: packageJson.module,
              format: &quot;esm&quot;,
              sourcemap: true,
          },
      ],
      plugins: [
          peerDepsExternal(),
          resolve(),
          // ref: https://stackoverflow.com/a/52885295
          babel({
              exclude: &quot;node_modules/**&quot;,
              babelHelpers: &quot;bundled&quot;,
          }),
          commonjs(),
          postcss({
              modules: true,
              plugins: [],
              extensions: [&quot;.css&quot;],
          }),
      ],
  };
  </code></pre>
  <p><strong>postcss.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      plugins: [require(&quot;tailwindcss&quot;), require(&quot;autoprefixer&quot;)],
  };
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre class="lang-js prettyprint-override"><code>{
      &quot;name&quot;: &quot;simple-react-alerts&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;Simple alert components for react&quot;,
      &quot;main&quot;: &quot;build/index.js&quot;,
      &quot;module&quot;: &quot;build/index.esm.js&quot;,
      &quot;files&quot;: [
          &quot;build&quot;
      ],
      &quot;repository&quot;: &quot;git@github.com:Bsd15/simple-react-alerts.git&quot;,
      &quot;author&quot;: &quot;BSD&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;private&quot;: false,
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;^7.10.4&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.10.4&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
          &quot;@rollup/plugin-babel&quot;: &quot;^5.0.4&quot;,
          &quot;@rollup/plugin-commonjs&quot;: &quot;^13.0.0&quot;,
          &quot;@rollup/plugin-node-resolve&quot;: &quot;^8.1.0&quot;,
          &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
          &quot;eslint&quot;: &quot;^7.4.0&quot;,
          &quot;eslint-plugin-react&quot;: &quot;^7.20.3&quot;,
          &quot;react&quot;: &quot;^16.13.1&quot;,
          &quot;react-dom&quot;: &quot;^16.13.1&quot;,
          &quot;rollup&quot;: &quot;^2.21.0&quot;,
          &quot;rollup-plugin-peer-deps-external&quot;: &quot;^2.2.3&quot;,
          &quot;rollup-plugin-postcss&quot;: &quot;^3.1.2&quot;,
          &quot;tailwindcss&quot;: &quot;^1.4.6&quot;
      },
      &quot;peerDependencies&quot;: {
          &quot;react&quot;: &quot;&gt;=16.8.0&quot;,
          &quot;react-dom&quot;: &quot;&gt;=16.8.0&quot;,
          &quot;tailwindcss&quot;: &quot;&gt;=1.4.6&quot;
      },
      &quot;scripts&quot;: {
          &quot;build&quot;: &quot;rollup -c&quot;,
          &quot;build:css&quot;: &quot; yarn tailwindcss build src/assets/tailwind.css -o src/SimpleAlert/index.css                                             &quot;
      }
  }
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import SimpleAlert from &quot;./SimpleAlert/SimpleAlert&quot;;
  import { AlertType } from &quot;./SimpleAlert/SimpleAlert&quot;;
  import &quot;./SimpleAlert/styles.css&quot;;
  export { SimpleAlert, AlertType };
  </code></pre>
  <p><strong>SimpleAlert.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useCallback } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import classes from &quot;./SimpleAlert.module.css&quot;;
  
  export const AlertType = {
      Primary: &quot;border-blue-500&quot;,
      Danger: &quot;border-red-600&quot;,
      Info: &quot;border-yellow-500&quot;,
      Success: &quot;border-green-500&quot;,
  };
  
  const SimpleAlert = (WrappedComponent) =&gt; {
      const ComponentWithAlert = (props) =&gt; {
          const [show, setShow] = useState(false);
          const [alertHeading, setAlertHeading] = useState(&quot;&quot;);
          const [alertMessage, setAlertMessage] = useState(&quot;&quot;);
          const [alertBoxBorderClass, setalertBoxBorderClass] = useState(
              AlertType.Primary
          );
  
          const showAlertBox = useCallback(() =&gt; {
              setShow(true);
          }, []);
  
          const hideAlertBox = useCallback(() =&gt; {
              setShow(false);
          }, []);
  
          const showAlert = useCallback(
              (message, alertType, heading = &quot;&quot;) =&gt; {
                  if (message) {
                      setAlertMessage(message);
                      setalertBoxBorderClass(alertType);
                      setAlertHeading(heading);
                      showAlertBox();
                  }
              },
              [showAlertBox, setAlertMessage, setalertBoxBorderClass, setAlertHeading]
          );
  
          const showTemporaryAlert = useCallback(
              (message, alertType, timeout = 5000, heading = &quot;&quot;) =&gt; {
                  if (message) {
                      setAlertMessage(message);
                      setalertBoxBorderClass(alertType);
                      setAlertHeading(heading);
                      showAlertBox();
                      setTimeout(() =&gt; {
                          hideAlertBox();
                      }, timeout);
                  }
              },
              [
                  showAlertBox,
                  setAlertMessage,
                  setalertBoxBorderClass,
                  setAlertHeading,
                  hideAlertBox,
              ]
          );
  
          return (
              &lt;React.Fragment&gt;
                  &lt;WrappedComponent
                      {...props}
                      showAlert={showAlert}
                      showTemporaryAlert={showTemporaryAlert}
                  /&gt;
                  &lt;article
                      className={`fixed bottom-0 left-0 right-0 mx-auto container w-full lg:w-1/2 p-2 bg-white shadow-2xl border-t-8 ${alertBoxBorderClass} ${
                          classes.alertBox
                      } ${show ? classes.alertBoxShow : &quot;&quot;}`}
                  &gt;
                      &lt;section id=&quot;content&quot; className=&quot;flex flex-col items-center&quot;&gt;
                          &lt;section id=&quot;message&quot; className=&quot;h-16 overflow-y-auto&quot;&gt;
                              {alertHeading &amp;&amp; (
                                  &lt;h1 className=&quot;font-bold text-lg&quot;&gt;{alertHeading}&lt;/h1&gt;
                              )}
                              &lt;p&gt;{alertMessage}&lt;/p&gt;
                          &lt;/section&gt;
                          &lt;section id=&quot;close&quot;&gt;
                              &lt;button
                                  className=&quot;bg-red-200 hover:bg-red-300 text-red-700 font-bold p-2 w-20&quot;
                                  onClick={hideAlertBox}
                              &gt;
                                  Close
                              &lt;/button&gt;
                          &lt;/section&gt;
                      &lt;/section&gt;
                  &lt;/article&gt;
              &lt;/React.Fragment&gt;
          );
      };
      return ComponentWithAlert;
  };
  
  export default SimpleAlert;
  </code></pre>
  <p><strong>SimpleAlert.module.css</strong></p>
  <pre class="lang-css prettyprint-override"><code>.alertBox {
      /* This timing applies on the way OUT */
      transition-timing-function: ease-in;
  
      /* Quick on the way out */
      transition: 0.2s;
  
      /* Hide thing by pushing it outside by default */
      transform: translateY(130%);
  }
  
  .alertBoxShow {
      /* This timing applies on the way IN */
      transition-timing-function: ease-out;
  
      /* A litttttle slower on the way in */
      transition: 0.25s;
  
      /* Move into place */
      transform: translateY(0);
  }
  </code></pre>
  <p><strong>The styles.css is generated using tailwindcss (which is 80k+ plus lines of css, and hence not posting)</strong></p>
  <p>The component is a hoc which can be used to overlap another component while exporting.</p>
  <p><em>E.g as below</em></p>
  <pre class="lang-js prettyprint-override"><code>export default SimpleAlert(App)
  </code></pre>
  <p>The problem is the css present in <em>styles.css</em>. It's is not getting applied when the component library is installed into another react app as a dependency. The classes from <em>SimpleAlert.module.css</em> are getting loaded thought.</p>