Mocha compiler for css-module support in tests using sass

cli.bash

mocha --compilers js:babel/register,js:./test/css-modules-compiler.js --recursive -w

css-modules-compiler.js

var hook = require('css-modules-require-hook');
var sass = require('node-sass');

hook({
  extensions: ['.scss'],
  preprocessCss: function (css) {
    var result =  sass.renderSync({
      data: css
    });

    return result.css;
  }
});

Using this will actually render the classes in your react components

Amazing, thanks so much for posting this, just what I needed!

Hey, if you're doing relative scss imports in your files (like I did) you may run into problems.

It's easy to fix though:

var hook = require('css-modules-require-hook');
var sass = require('node-sass');
var path = require('path');

hook({
  extensions: ['.scss'],
  preprocessCss: function (css, filepath) {
    var result =  sass.renderSync({
      data: css,
      includePaths: [ path.resolve(filepath, '..') ]
    });

    return result.css;
  }
});

Thank you ! And thanks for the imports trick

Thank you @ryanseddon and @stipsan, this helped me a lot! :-)

node_modules/node-sass/lib/index.js:420
throw util._extend(new Error(), JSON.parse(result.error));
^

Error: Undefined variable: "$font-logo".

@stipsan and @ryanseddon thank you very much for taking the time to share!

As of babel 6 it's rather mocha --compilers js:babel-core/register,js:./test/css-modules-compiler.js

babel-core instead of just 'babel`

Has anyone had issues with empty css files throwing?

throw new Error('No input specified: provide a file name or a source string to process');

It's coming from an external dependency so I can't remove the file