CSS Module (again) ?

[renaudcerrato]

I know this have been discussed before in #180, but is there any rationale behind the fact that this typescript fork doesn't (yet) support CSS modules ? This have been merged a long time ago on facebook/create-react-app#2285.

[wmonk]

I'm just in the process of breaking the fork link, at that point i'm happy to get this enabled! #227

[ianschmitz]

This isn't yet in CRA proper. It is part of CRA v2.0 beta.

[gregoryforel]

@wmonk is it enabled now? I tried a few days ago and could not get it to work.

[raptoria]

any update??? :)

[nickserv]

In my opinion it would be best to wait for CRA 2 (or publish a prerelease based on CRA 2's prerelease now) to avoid conflicts with CRA in the future.

[r3nya]

Hi there, it's working.

styles.css:

:local(.class) {} /* for local scope */

.myGlobalClassName {} /* for global scope */

Component.tsx:

// …
import * as styles from './styles.css';

// …
<div className={styles.class} />

---

Btw, ofc don't forget about declarations for *.css files:

declare module '*.css' {
  const styles: any;
  export = styles;
}

[raptoria]

@r3nya for the declare module '.css' code, how do you get around the Typescript error 'Invalid module name in augmentation, module '.css' cannot be found.' ? Also, where do you place this declaration?

[r3nya]

Hm …

@raptoria I created special folder my custom definitions – ./definitions.
And after it I added it into tsconfig.json:

"compilerOptions": {
  // code …
  },
  "filesGlob": [
    "node_modules/**/*.d.ts",
    "definitions/*.d.ts"
  ],
  "exclude": [
   // code…
  ]

And it's working 🤔

[raptoria]

@r3nya does cra-ts generate your CSS definitions for you (*.d.ts) or are you doing this yourself? Before I started using cra-ts, I used to setup my own pre-build command that generated all the *.d.ts. Now that I'm using cra-ts, I'm confused as to where/if this is still happening.

[r3nya]

@raptoria let me create some demo for you…

[r3nya]

@raptoria please take a look – https://github.com/r3nya/css-modules-and-cra-ts/

• Simple way
• Use typed css modules (optional) after it you can use npm run css-types command for generating declarations for css.

[raptoria]

thanks a lot for your example, it's extremely helpful. So now when I add a new local css class, I have to do npm run css-types to re-generate the *.css.d.ts

I guess the only thing that's different is the local/global stuff seems to be inverted. It used to be that a class, eg. .header {} would be locally scoped (I can access via styles.header) and to use the global scope I'd do :global(.header) and access using className='header'. Now declaring a class in CSS is automatically global and I have to use the local scope to make it local. Is this specific to cra-ts?

[johnrom]

Thanks for creating those demos, it's very useful! In my opinion, I'd be interested to see if one of the "typescript module generator loaders" work, and see if we can wrap css-loader with one when modules are in use. That way it can work out-of-the-box as simply as CRA does, while getting the full benefits of TS.

This is one that worked almost completely for me, but the typescript definitions it spat out were not correct (though I may have configured it incorrectly?): https://www.npmjs.com/package/typings-for-css-modules-loader

If we can't get that to work, maybe my Google-fu isn't working and there is an alternative?

[r3nya]

@raptoria

Is this specific to cra-ts?

This is the setting for the css-loader from webpack.

Anyway, after #409 we can use typical solutions -> https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-modules-stylesheet 😉