JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q52193F
  • License ISC

A CSS Modules loader for JSPM

Package Exports

  • jspm-loader-css-modules

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jspm-loader-css-modules) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JSPM Loader: CSS Modules

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.