1_locals.css

/* equivalent to postcss-local-scope. INPUT: */

.outer {
  color: papayawhip;
  box-shadow: 0 0 10px;
}

/* OUTPUT: */

@export .outer ".outer-abcs12r3adudas";
.outer-abcs12r3adudas {
  color: papayawhip;
  box-shadow: 0 0 10px;
}

2_extends.css

/* equivalent to css-loader modules now. INPUT: */

/* traits.css */

.trait-colors--papaya {
  color: papayawhip;
}

/* component.css */

.outer {
  extends: .trait-colors--papaya from "./traits.css";
  box-shadow: 0 0 10px;
}


/* INTERMEDIATE (both files compiled separately): */

/* traits.css */

@export .trait-colors--papaya ".trait-colors--papaya-zxcv12r3adudas";
.trait-colors--papaya-zxcv12r3adudas {
  color: papayawhip;
}

/* component.css */

@import "./traits.css" .trait-colors--papaya:".tmp-class-bvc4543shf";
@export .outer ".outer-abcs12r3adudas .tmp-class-bvc4543shf";
.outer-abcs12r3adudas {
  box-shadow: 0 0 10px;
}

/* OUTPUT: */

/* traits.css unchanged */
/* component.css has imports resolved */

@export .outer ".outer-abcs12r3adudas .trait-colors--papaya-zxcv12r3adudas";
.outer-abcs12r3adudas {
  box-shadow: 0 0 10px;
}

3_variables.css

/* INPUT (probably output of your POSTCSS plugin) */

/* vars.css */

@export --papaya "--papaya-gfhjs43672fghfds";
:root {
  --papaya-gfhjs43672fghfds: #ffefd5;
}

/* component.css */

@import "./vars.css" --papaya:"--tmp-var-tyuy3246ads";
.outer {
  color: var(--tmp-var-tyuy3246ads);
  box-shadow: 0 0 10px;
}

/* OUTER */

/* vars.css unchanged */
/* component.css has imports resolved */
@export .outer ".outer-abcs12r3adudas";
.outer-abcs12r3adudas {
  color: var(--papaya-gfhjs43672fghfds);
  box-shadow: 0 0 10px;
}

Syntax for @import and @export totally up for grabs, but hopefully this shows how making a low-level import/export syntax supports lots of use-cases, just like a good module format should!

For the record, here's the current grammar I came up with:

import: @import path tmp-alias [tmp-alias ...];
path: "path/to/file-name.css"
tmp-alias: exported-name:"local-name"

export: @export exported-name "local-name";

Syntax change & proper issue submitted here: webpack-contrib/css-loader#60