Css-loader: Automatically verify class name existence

[frenic]

Composing a non-existing selector causes [email protected] too freeze without error and causes [email protected] to abort without error.

.foobar {
  composes: non-existing;
}

The build succeeds when composing an external CSS module, but no error appears.

.foobar {
  composes: non-existing from './another-existing-css-module.css';
}

Feels to me that it should at least throw some kind of error?

[alexander-akait]

/cc @michael-ciniawsky we can close issue not related to css-loader in favor https://github.com/css-modules/postcss-modules-extract-imports/issues/141

[TrySound]

This issue is related to icss resolver. So css-loader should care about it.

[tomchentw]

@TrySound @michael-ciniawsky ran into this issue today and I'd like to help!

Is there any suggestions on how I could help into this?

[TrySound]

@tomchentw

composes: classname from global;

[tomchentw]

@TrySound after a few thoughts I think it's not currently possible given css-loader is just a loader of webpack. It doesn't know the whole picture of the app until webpack links them (but that's the runtime part). Unless we apply the same methodology of ES module tree shaking to CSS-modules, this can't be done solely in the css-loader.

Is this what you're trying to say?

[juanca]

I ended up favoring a lint rule for this.

https://github.com/juanca/stylelint-css-modules/blob/master/rules/composed-class-names.js

I figured if JS didn't throw on an undefined module then CSS shouldn't throw on an undefined class name.

[alexander-akait]

PoC implementation https://github.com/webpack-contrib/css-loader/issues/685#issue-301708061

[alexander-akait]

@juanca hi, do you want to help with implementation (throw error) on css-loader level? We can emitError if class doesn't exists.

[juanca]

It sounds interesting. I might be able to investigate it in about a few weeks (vacation). I'll set up a reminder and report back on findings (assuming no one has started yet).

[alexander-akait]

:+1:

[juanca]

I'm going to give it a go these next couple of days. Any tips for places of interest in the code base?

[alexander-akait]

@juanca loader's code is very simple, just look on code base, it is should be no difficult to understand and implement this feature.

[juanca]

Okay, so just to verify... going down the rabbit and possibly doing the edit at css-modules/postcss-modules is not a good idea? 😅

[alexander-akait]

@juanca we have some difference algorithm for modules than css-modules/postcss-modules so we need this on our side

[alexander-akait]

I think we can close it in favor https://github.com/webpack-contrib/css-loader#namedexport, webpack outputs a warning on non exist export, this option will be true by default for the next major release, feel free to feedback, so you don't need extra tools to catch the problems