Skip to content

Instantly share code, notes, and snippets.

@lambdahands
Created September 28, 2015 17:09
Show Gist options
  • Save lambdahands/d19e0da96285b749f0ef to your computer and use it in GitHub Desktop.
Save lambdahands/d19e0da96285b749f0ef 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.

@KareemSalah
Copy link

KareemSalah commented Oct 27, 2018

Google brought me here, and it's late 2018, and still got that same issue and couldn't really solve it following the comments here, here's what I did eventually:

  1. Create a dump module at PROJECT_ROOT/flow-typed/LESSModule.js.flow
  2. Add this code inside of it
declare module 'LESSModule' {
  declare module.exports: any;
}
  1. Add this line under [options] in .flowconfig (just this line, nothing more πŸ˜„)
module.name_mapper.extension='less' -> 'LESSModule'

Notes that I had to take are that the file name must begin with exactly the same name as the stub module name, if you're going to change the module name to SCSSModule or CSSModule, then change the file name accordingly, also put the file under that same directory, flow-typed should be already there if you did npm i --save flow-typed and ran flow-typed install, I tried putting that file somewhere else, but it didn't work.

@giuliano2014
Copy link

πŸ‘ ❀️

@muravjov
Copy link

@KareemSalah
not working for me,

$ node node_modules/.bin/flow check app.js
Error β”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆ app.js:5:8

Cannot resolve module my.less.

     2β”‚
     3β”‚ import "./my.sass"
     4β”‚ import "LESSModule"
     5β”‚ import "my.less"
     6β”‚
     7β”‚

Found 1 error

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