title: How to write a type declaration for a CSS Module as ES Module
body: <p>I am upgrading Gatsby from v2 to v3, and in this update <a href="https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules" rel="nofollow noreferrer"><code>CSS</code> Modules are imported as ES Modules</a>.</p>
  <blockquote>
  <p>The web moves forward and so do we. ES Modules allow us to better tree shake and generate smaller files. From now on you’ll need to import CSS modules as: <code>import { box } from './mystyles.module.css'</code></p>
  </blockquote>
  <p>The old approach will no longer compile.</p>
  <p>After changing the imports, it compiles correctly and looks as expected. The only problem is, that I am getting type errors as the exports cannot be found.</p>
  <p>My assumption is, that the type declaration is wrong, but I am not sure how to dynamically type this without naming each possible CSS class as an export.</p>
  <p>I have also tried <code>import * as styles</code>, which first of all is discouraged (as it prevents tree-shaking), but also cause type errors.</p>
  <p><strong>Foo.module.css:</strong></p>
  <pre class="lang-css prettyprint-override"><code>.foo { color: red; }
  .bar { color: blue; } 
  </code></pre>
  <p><strong>Foo.tsx:</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { foo, bar } from &quot;./Foo.module.css&quot;
  // Module &quot;*.module.css&quot; has no exported member 'foo'
  // Module &quot;*.module.css&quot; has no exported member 'bar'
  </code></pre>
  <p><strong>css.d.ts:</strong></p>
  <pre class="lang-js prettyprint-override"><code>declare module &quot;*.module.css&quot; {
      const styles: { [className: string]: string }
      export * from styles
  }
  </code></pre>