Can't resolve composed CSS from node_modules folder

[Ruben Oostinga]

I have CSS which look like this:

.button {
  composes: btn from 'basscss-btn';
}

I get the error:

{ Error: ENOENT: no such file or directory, open '/project/src/basscss-btn-primary'
    at Error (native)
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/project/src/basscss-btn-primary' }

While it should be resolving node_modules/basscss-btn/index.css.

I tried using the resolveOptions but it seems to only be used to resolve JS imports and not composed CSS modules.

[Jacob Parker]

After digging around, I think you’re meant to specify the css file you want: basscss-btn/index.css in this case. Let me know how that goes!

[Ruben Oostinga]

Thanks I'll try that. But it would be cool though if I could specify resolve options to do this automatically.

I just remembered I tweaked my webpack config to get it to work there:

    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.FileAppendPlugin(['/index.css'])
    ),

So it does make sense that this doesn't work automatically for es-css-modules.

[Ruben Oostinga]

Tried it, but now I get another error for:

  composes: btn-primary from 'basscss-btn-primary/index.css';

Error: Class name btn-primary is invalid

Which is hard to fix, since I don't control the naming of basscss. I don't consider this an edge case since dash-casing is default for css.

[Jacob Parker]

This seemed to work for me (test). You’re only meant to run your own files through, and not basscss’s. Does that fix anything?

[Ruben Oostinga]

I am running on my own files. In my file it looks like this:

.primary {
  composes: btn-primary from 'basscss-btn-primary';
}

I can post a repro tomorrow.

[Jacob Parker]

Okay, I should have fixed that bug in version 1.2.4.

[Ruben Oostinga]

For some reason I can't reproduce it anymore. I do have some more question, maybe we should use some chat.

[Jacob Parker]

Sure, you can DM me on Twitter if that works best (@jacobp100).