Integrate with css-loader css module support

[mwinche]

This is a feature request.

I'd like to be able to compile a template which can require in CSS Modules and apply the dynamic class names to elements. Essentially something like this:

<link href="./headers.css" rel="stylesheet:headers" />
<link href="./layout.css" rel="stylesheet:layout" />

<div class="layout.card layout.flex">
    <h1 class="headers.main">My styled header<h1>
</div>

Basically the :headers and :layout parts name local vars which store your dynamic class name maps. They are then accessed by referencing var.class where var is the name of the local var you gave it in the link tag and class is a class name from that file as it appeared in the source.

Obviously the syntax is flexible, but I like that this approximates current tags and their usages. What's more CSS class names cannot have . characters and link tag rel attributes do not contain : characters, so this syntax should be safe from unintended consequences. It could also add entirely new tags and attributes to handle this.

Why do this?

I know that ES6 templates tags and common frameworks like React and Angular provide ways to do all this in JavaScript, eliminating the need for this. I am wanting to add this to provide a migration path for a legacy codebase to use CSS Modules (which I ❤️ BTW). In my particular case, I'm having a JSP tag read in the HTML (via extract-text-webpack-plugin) and use it in its server side generation with a long term goal of migrating server side rendering to React/Angular 2.

I love these new technologies and I wouldn't even need something like this in a green field project. But when working out a migration strategy for existing code, options like these are invaluable.

css-loader, style-loader and company would figure out how to load the actual CSS to the page, this just handles dynamic class name insertion.

I would love to work on the PR for this, if this is something the maintainers would want. If not I can look at writing a separate loader to do the same thing.

Thoughts? Love it? Hate it? I'd love to have a discussion. 😄

[mwinche]

Thinking this through further, I think this should just be its own loader which can then be piped to html-loader. I'll close this.

[callistino]

@mwinche Did you figure out how to do it?