Server side: generateScopedName is not used while using Babel

[vojtatranta]

If you use babel imports you have something like this:

import cssModulesRequireHook from 'css-modules-require-hook'
import cssnext from 'postcss-cssnext'
cssModulesRequireHook({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
  prepend: [
    cssnext(),
  ],
});
import App from './components/app.js'

And you app.js imports some css.
When you use babel-node all the imports go up in the code therefore cssModulesRequireHook() is called after requiring of app.js resulting into omitting generateScopedName.

Solution: return hook as function to be called with options, just like node-jsx.

[dbow]

I'm running into this as well! Let me know if I can help out.

[vojtatranta]

@dbow well I know, how to hotfix it in code, for your react components use traditional require(),.
@nkbt suggests https://www.npmjs.com/package/babel-plugin-webpack-loaders which may do the trick

[mightyaleksey]

Thanks for the report, can you provide your .babelrc content?

[vojtatranta]

@sullenor sure, nothing special there

{
  "stage": 2
}

[dbow]

Mine is

{
  "presets": ["es2015", "react"]
}

[dbow]

I think another workaround is moving this configuration to a separate file that uses require:

index.js:

var hook = require('css-modules-require-hook');
hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
});

require('./server.js');

server.js

import express from 'express';
import _ from 'lodash';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';

// etc...

and then babel-node index.js seems to properly call the hook function prior to the server.js imports. Does that make sense?

[nkbt]

{
  "stage": 2
}

That looks like babel 5 config, is it?

[vojtatranta]

@dbow definetly is, but it is still just a workaround...
@nkbt yes 5.6

[mightyaleksey]

@dbow It does. Actually, the new imports are static and always called first (its a feature). And babel usually put them to the beginning of the file.

So, if you have CSS import with require hook at the same file, all your imports will occur first and after that you'll configure the require hook. Thats why you get different tokens.

As possible solution you can move configuration to the separate file or I also thought about making a separate config, similar to gulpfile.js.

#27

[dbow]

@sullenor makes sense! I too was pondering a config file as a solution.

[mightyaleksey]

Finally, I published a beta version with presets implementation, hope that helps: 3.0.0-beta. If you are interested, you can try to use require('css-modules-require-hook/preset') and put all options to the cmrh.conf.js file (example).

I will publish stable version a bit later, still need to update documentation and demo example.

[Jezternz]

Perfect! Thankyou so much, may also be worth mentioning for someone else, don't forget to include any other options such as camelCase, otherwise it may not appear to work. For me it was:

var hook = require('css-modules-require-hook');
hook({ generateScopedName: "[name]_[local]__[hash:base64:5]", camelCase: true });