Skip to content

Instantly share code, notes, and snippets.

@BolajiOlajide
Forked from lambdahands/_readme.md
Created February 11, 2018 22:46
Show Gist options
  • Save BolajiOlajide/f13d42f0b83cf3931d00c4d1340a0a62 to your computer and use it in GitHub Desktop.
Save BolajiOlajide/f13d42f0b83cf3931d00c4d1340a0a62 to your computer and use it in GitHub Desktop.
FlowType and CSS Modules

Huh?

So basically FlowType doesn't know about CSS Modules, a really handy way of dealing with the plagues of CSS in codebases (global variables and dependency wackiness mainly).

What WebPack allows us to do is "require" CSS files and use their class names:

import styles from "my_styles.css";
import React from "react";

const MyComponent = React.createClass({
  render() {
    return <h1 className={styles.redHeader}>Hello!</h1>;
  }
});

Unfortunately, Flow will give us an error Required module not found because, well, let's be honest, importing CSS with JavaScript is pretty out of this world and a little bit crazy (i.e: this).

So here's what I did to fix that. Flow has a nice way of dealing with this in its options, namely one called module.name_mapper. Somebody was kind enough to make an npm module called empty that– you guessed it– returns empty objects and arrays. I'm pretty amazed to have found a use for this.

So as a fix, do this: Run npm install --save empty in your project directory.

Open your .flowconfig, and add the following under [options]:

module.name_mapper='.*\(.css\)' -> 'empty/object'

Ta-da! Another fun day in JavaScript land.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment