https://github.com/distpub/babel-plugin-transform-import-cssm
Transform import `.cssm` statement to auto assign styles to `document.adoptedStyleSheets`.
https://github.com/distpub/babel-plugin-transform-import-cssm
Last synced: 8 months ago
JSON representation
Transform import `.cssm` statement to auto assign styles to `document.adoptedStyleSheets`.
- Host: GitHub
- URL: https://github.com/distpub/babel-plugin-transform-import-cssm
- Owner: DistPub
- License: mit
- Created: 2021-02-24T06:27:51.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-01T01:51:35.000Z (over 5 years ago)
- Last Synced: 2025-10-05T13:32:08.516Z (9 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-import-cssm
> Based on [`CSS Modules V1`](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md) [caniuse](https://caniuse.com/?search=adoptedStyleSheets)
> Please enable chrome://flags/#enable-experimental-web-platform-features
Transform import `.cssm` statement to auto assign styles to `document.adoptedStyleSheets`.
## Install
Using npm:
```sh
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`](https://github.com/css-modules/postcss-modules) to generate it.
For example:
### postcss-modules In
```css
/* 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
```css
/* 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
```js
import styles from './styles.cssm';
element.innerHTML = '
';
```
## babel-plugin-transform-import-cssm Out
```js
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 = '
';
```