title: How to setup rollup for css modules in TypeScript
body: <p>I managed to import css modules in my Typescript React Class using <a href="https://www.npmjs.com/package/typescript-plugin-css-modules" rel="noreferrer">this plugin</a> from npm.</p>
  
  <p><em>tsconfig.json</em></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ESNext",
      "outDir": "build",
      "jsx": "react",
      "noImplicitAny": false,
      "removeComments": true,
      "sourceMap": false,
      "module": "ESNext",
      "allowJs": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "baseUrl": "src",
      "plugins": [{ "name": "typescript-plugin-css-modules" }]
    },
    "exclude": [
      "node_modules/"
    ],
    "include": [
      "src/*"
    ]
  }
  </code></pre>
  
  <p>I also added the following module file in my src/ folder:</p>
  
  <p><em>modules.d.ts</em></p>
  
  <pre class="lang-js prettyprint-override"><code>declare module '*.module.css' {
      const classes: { [key: string]: string };
      export default classes;
  }
  </code></pre>
  
  <p>It suppressed all warnings and I was able to test my code fine. I have a component which imports a css module located in the same folder:</p>
  
  <pre><code>- src
    - components
      - Text.tsx
      - Text.module.css
  </code></pre>
  
  <p>And so my component contains the following import line:</p>
  
  <pre class="lang-js prettyprint-override"><code>import css from './Text.module.css';
  </code></pre>
  
  <p>I now want to transpile my code to commonjs to use it as a React module in other codes. Here is my rollup config:</p>
  
  <p><em>package.json</em></p>
  
  <pre><code>"scripts": {
    "build": "rollup -c &amp;&amp; tsc",
    "test": "jest"
  }
  </code></pre>
  
  <p><em>rollup.config.js</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import babel from 'rollup-plugin-babel';
  import typescript from 'rollup-plugin-typescript2';
  import pkg from './package.json';
  import {terser} from 'rollup-plugin-terser';
  import autoprefixer from 'autoprefixer';
  import postcss from 'rollup-plugin-postcss';
  
  export default [
      // CommonJS
      {
          inlineDynamicImports: true,
          input: './src/index.ts',
          output: [
              {
                  file: pkg.main,
                  format: 'cjs'
              }
          ],
          external: [
              ...Object.keys(pkg.dependencies || {})
          ],
          plugins: [
              babel({
                  exclude: 'node_modules/**'
              }),
              typescript({
                  typescript: require('typescript')
              }),
              postcss({
                  plugins: [autoprefixer()],
                  sourceMap: true,
                  extract: true,
                  minimize: true
              }),
              terser() // minifies generated bundles
          ]
      }
  ];
  </code></pre>
  
  <p>I am able to run <code>yarn build</code> without any errors, however when I look at the built code, the css module file is no longer located next to the Text.js file. Below is a screenshot of the folders generated by build:</p>
  
  <p><a href="https://i.stack.imgur.com/uVWt0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uVWt0.png" alt="build folder tree"></a></p>
  
  <p>All the css has been moved to the lib folder, and in the generated Text.js file:</p>
  
  <p><a href="https://i.stack.imgur.com/W65kz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/W65kz.png" alt="Cannot resolve file error"></a></p>
  
  <p>Is their a way to either preserve the files structure, or to transpile in a way the import points to the correct css file ?</p>
  
  <p>I saw some workarounds with webpack.config.js (running <code>eject</code> script), however I'm not quite easy with it (since it adds a lot of files and dependencies to the project, and I'm not sure how to handle everything well).</p>
  
  <p>Thanks a lot! </p>