ES6 introduces the idea of structured imports as a way of sharing re-usable code. It would be great if css-modules had import and composes flag supported it. Here's an example of what I mean

before:

.element {
  composes: large from "./typography.css";
  composes: dark-text from "./colors.css";
}

after:

import $typography from "typography";
import $colors from "colors";

.element {
  composes: $typography.large;
  composes: $colors.dark-text;
}

Benefits

• consistent with ES6 semantics
• modules are imported once on top
• styles are referenced the same in JS land and CSS land (submitStyles.normal) is similar to (colors.darkBlue)

Proposed change

I'm not sure if postcss-modules-extract-imports can be changed here or if there should be a second postcss preprocessor, that does a transform. I'm interested in the postcss plugin semantics, so if you provide some guidelines I'd like to see if i can jump in and try to implement this.

Semantics

List of supported import semantics

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name";

While the list is pretty long I could see many of them being relavant

import $colors from "colors";
import { $dark-blue } from "colors";
import { $dark-blue as $darkBlue } from "colors";
import { $dark-blue, $dark-red } from "colors";
import $colors , { $dark-blue, $dark-red } from "colors";