title: How do I fix typescript compiler errors on css files?
body: <p><strong>I'm trying to create a React project with typescript using webpack. But I can't manage to get CSS modules working. I keep getting this error when trying to import the CSS files in typescript:</strong></p>
  <pre><code>ERROR in src/components/Button.module.css:1:0
  [unknown]: Parsing error: Declaration or statement expected.
    &gt; 1 | .myButton {
      2 |         box-shadow: 0px 0px 0px -1px #1c1b18;
      3 |         background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
      4 |         background-color:#eae0c2;
  ℹ ｢wdm｣: Failed to compile.
  </code></pre>
  <p>To me this looks like webpack is expecting the css file to contain valid typescript but I don't know for sure. I tried looking around and while a lot of people seem to be struggeling with using typescript and CSS modules together I couldn't find anyone with a similar issue.</p>
  <p>I imported the CSS file like this:
  Button.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Button.module.css&quot;;
  
  export class Button extends React.Component{
  ...
  }
  </code></pre>
  <p>And this is the CSS file that I'm trying to import.
  Button.module.css:</p>
  <pre><code>.myButton {
      box-shadow: 0px 0px 0px -1px #1c1b18;
      background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
      background-color:#eae0c2;
      border-radius:22px;
      border:4px solid #706752;
      display:inline-block;
      cursor:pointer;
      color:#505739;
      font-family:Arial;
      font-size:16px;
      font-weight:bold;
      padding:11px 22px;
      text-decoration:none;
      text-shadow:0px 1px 0px #ffffff;
  }
  .myButton:hover {
      background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
      background-color:#ccc2a6;
  }
  .myButton:active {
      position:relative;
      top:1px;
  }
  </code></pre>
  <p>The generated Button.module.css.d.ts</p>
  <pre><code>// This file is automatically generated.
  // Please do not change this file!
  interface CssExports {
  
  }
  export const cssExports: CssExports;
  export default cssExports;
  </code></pre>
  <p>I also have a type declaration for css modules called styles.d.ts</p>
  <pre><code>declare module &quot;*.module.css&quot; {
      const classes: { [key: string]: string };
      export default classes;
  }
  </code></pre>
  <p>While Webpack does seem to generate some typings for the css module it looks weirdly empty to me. I think I doing something wrong with the css-modules-typescript-loader, I tried with a bunch of the avaliable plugins but keep running into the same error reguardless.</p>
  <p>Here is what I configured in my webpack.config.ts:</p>
  <pre><code>import webpack from &quot;webpack&quot;;
  
  const config: webpack.Configuration = {
    entry: &quot;./src/index.tsx&quot;,
    resolve: {
      extensions: [&quot;.tsx&quot;, &quot;.ts&quot;, &quot;.js&quot;, &quot;.css&quot;],
    },
    module: {
      rules: [
        {
          test: /\.module.css$/,
          use: [
            &quot;css-modules-typescript-loader&quot;,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                sourceMap: true,
              }
            },
          ]
        },
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;,
            options: {
              presets: [
                &quot;@babel/preset-env&quot;,
                &quot;@babel/preset-react&quot;,
                &quot;@babel/preset-typescript&quot;,
              ],
            },
          },
        },
      ],
    },
  </code></pre>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;target&quot;: &quot;ES5&quot;,
      &quot;plugins&quot;: [
        {
          &quot;name&quot;: &quot;typescript-plugin-css-modules&quot;
        }
      ]
    },
    &quot;include&quot;: [
      &quot;src&quot;
    ],
  }
  </code></pre>