babel-plugin-transform-import-cssm

Based on CSS Modules V1 caniuse

Please enable chrome://flags/#enable-experimental-web-platform-features

Transform import .cssm statement to auto assign styles to document.adoptedStyleSheets.

Install

Using npm:

npm install --save-dev babel-plugin-transform-import-cssm

What is .cssm type?

A .cssm file is a general text/css type file that contains exported tag name.

exported must is the last css rule.

You can use postcss-modules to generate it.

For example:

postcss-modules In

/* styles.css */
:global .page {
  padding: 20px;
}

.title {
  composes: title from "./mixins.css";
  color: green;
}

.article {
  font-size: 16px;
}

/* mixins.css */
.title {
  color: black;
  font-size: 40px;
}

.title:hover {
  color: red;
}

postcss-modules Out

/* styles.cssm */
._title_116zl_1 {
  color: black;
  font-size: 40px;
}

._title_116zl_1:hover {
  color: red;
}

.page {
  padding: 20px;
}

._title_xkpkl_5 {
  color: green;
}

._article_xkpkl_10 {
  font-size: 16px;
}

exported {
  --json: {"title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10"}
}

babel-plugin-transform-import-cssm In

import styles from './styles.cssm';
element.innerHTML = '<div class="' + styles.title + '">';

babel-plugin-transform-import-cssm Out

import _styles from './styles.cssm';
document.adoptedStyleSheets = [...document.adoptedStyleSheets, _styles];
const styles = JSON.parse(_styles.cssRules[_styles.cssRules.length - 1].style.getPropertyValue('--json'));
element.innerHTML = '<div class="' + styles.title + '">';