This repository was archived by the owner on Jan 26, 2019. It is now read-only.

wmonk/create-react-app-typescriptPublic archive

NotificationsYou must be signed in to change notification settings
Fork488
Star3.7k

Add CSS Modules support to webpack config#180

Closed

tomaash wants to merge0 commits intowmonk:masterfromtomaash:master

Closed

Add CSS Modules support to webpack config#180

tomaash wants to merge0 commits intowmonk:masterfromtomaash:master

Conversation

Copy link

tomaash commentedOct 31, 2017•
edited
Loading

CSS modules in TypeScript work as follows:

import styles
const style = require('./Home.module.css')
use in JSX
<div className={style.App}/>

This is not a breaking change, as it prefixes classes only for CSS files that follow file naming convention of*.module.css

Actual config taken fromhttps://github.com/ro-savage/react-scripts-cssmodules so it has actually been tested elsewhere as well. To test my change, just create react app with this fork, and try to use CSS Modules syntax. If styling is applied, then it works.

We could have a more typescript-like css import support, but that would require adding an extra packagehttps://github.com/Jimdo/typings-for-css-modules-loader .. I figured, let's get an easy barebones support merged first.

I published this version on NPM already ashttps://www.npmjs.com/package/react-scripts-ts-cm
I also have a working example app created with it here:https://github.com/tomaash/react-scripts-ts-cm-test

Copy link

Author

tomaash commentedNov 3, 2017

Actually, this is being tentatively added tocreate-react-app itself, so I guess we can just wait when it lands there:facebook/create-react-app#2285

Copy link

Jack-Works commentedNov 5, 2017

Maybe we can make it further, seehttps://github.com/Quramy/typed-css-modules

Copy link

christikaes commentedNov 18, 2017•
edited
Loading

We should definitely addhttps://github.com/Jimdo/typings-for-css-modules-loader once we have css-modules. It's a drop in replacement for css-loader and generate TypeScript typings for CSS modules on the fly.

In the mean time I've created a fork of this that has the CSS Modules support + typings for css modules (Types for CSS are awesome!)https://www.npmjs.com/package/react-scripts-ts-css

tomaash closed this

Nov 24, 2017

tomaash force-pushed themaster branch from81ed79a tobdc024dCompare

November 24, 2017 08:01

Copy link

Author

tomaash commentedNov 24, 2017

Closed in favor of:#197

Copy link

Author

tomaash commentedNov 24, 2017

@christinakayastha Your PR lacks the support for compiling only.module.css files with css-modules. I fixed that in#197

Copy link

christikaes commentedNov 24, 2017

Nice! Good call (:

Copy link

Author

tomaash commentedNov 27, 2017

Still, your fork is much more complete. If you adopted this.module recognition from my patch, I'd use it.

Copy link

Author

tomaash commentedNov 27, 2017

Actually, there are multiple problems with the typings. They make css cross-dependent with typescript compilation, with leads to multiple issues (errors when you ignore d.ts to have hot reload) and also the need to keep the generated d.ts in the repo, as theyarn build does not pick them up the first time. I reverted to just using this vscode extension:https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

Copy link

christikaes commentedNov 27, 2017

Oh cool I didn't know about that extension.

Yea after using it for a bit, I don't like having to keep the .d.ts files. (when you use sass you have: .scss -> .css -> .css.d.ts which is a bit much...)

Copy link

Author

tomaash commentedDec 6, 2017

@christinakayastha I also discovered a more elegant way of making changes to create-react-app setup - using monkey patching :)
I usereact-app-rewired and now my addons to react-scripts webpack are in aplugin. Much better!