incompatibility with async plugins

[anru]

If you try to use require hook with any async plugin (for example postcss-import) you get error throw new Error('Use process(css).then(cb) to work with async plugins');

[mightyaleksey]

@anru hi, I'm not sure that it's currently possible to support async plugins. The require function is synchronous, so I have to make an synchronous implementation as well.

[anru]

Well, there is not much problem, actually. In my case I just generate css modules map file at build time and use own hook that uses that map, so, may be a couple of words about it in Readme would be helpfull for someone else :)

[mightyaleksey]

@anru yeah, looks like that question becomes more and more popular, so I'll add it to the readme.

Can you tell me, what plugins you use with require hook and why? Usually you need to use require hook to generate tokens and exception may occur if you use non-css files.

[jedrichards]

I'm using postcss-import to do something like,

@import "../colors.css";

.foo {
  color: var(--my-col);
}

And I get the async plugins error ...

Hook setup looks like this,

require('css-modules-require-hook')({
  prepend: [require('postcss-import')(), require('postcss-cssnext')()]
})

The postcss-cssnext portion works fine, but it bombs out because postcss-import is async only.

I've opened an issue at postcss-import since it looks like they used to have a sync mode, but removed it 😕

postcss/postcss-import#180

[jedrichards]

@anru

In my case I just generate css modules map file at build time and use own hook that uses that map

Can you expand on this a bit? Thanks :)

[jedrichards]

Btw, I'm making some progress with https://github.com/istarkov/babel-plugin-webpack-loaders

I think it removes the need for this require-hook by preprocessing your required modules synchronously with your Webpack loaders in a Node env ...

[mightyaleksey]

@jedrichards Hi, thank you for your interest.
Actually I'm not sure, that there is an easy and performant solution to make async code work synchronously without monkey patching or whole js module compilation, but I'll look for the possibilities.

Btw, I'm making some progress with https://github.com/istarkov/babel-plugin-webpack-loaders

Yeah, I haven't checked, but it should help here.

[anru]

@jedrichards

1. First, you generate map file at build time, and save it to css-modules.json for example
2. Second, run small hook which uses that map for returning tokens for css files:

  require.extensions['.css'] = function(m, filename) {
    const map = require('css-modules.json');
    const relativePath = path.relative(process.cwd(), filename);

    const tokens = map[relativePath];
    return m._compile(`module.exports = ${JSON.stringify(tokens)}`, filename);
  };

Thats all

[mightyaleksey]

@anru nice solution :)