A CSS Modules loader for JSPM
Install the plugin and name it css locally
jspm install css=npm:jspm-loader-css-modules
Write some CSS Modules:
/* component.css */
.myComponent {
extends: redBackground from "./backgrounds.css";
color: white;
}/* backgrounds.css */
.redBackground {
background-color: red;
}and use them in your JS:
import styles from './component.css!'
elem.innerHTML = `<div class="${styles.myComponent}"></div>`The following CSS is generated:
._path_to_backgrounds__redBackground { background-color: red; }
._path_to_component__myComponent { color: white; }And the styles variable returns
{
"myComponent": "_path_to_backgrounds__redBackground _path_to_component__myComponent"
}For the opt-in version, using :local to declare exported classnames, use the default JSPM CSS Loader instead.