https://github.com/shimech/posthtml-css-prop
PostHTML Plugin to Support css prop like emotion
https://github.com/shimech/posthtml-css-prop
html posthtml posthtml-plugin
Last synced: 2 months ago
JSON representation
PostHTML Plugin to Support css prop like emotion
- Host: GitHub
- URL: https://github.com/shimech/posthtml-css-prop
- Owner: shimech
- License: mit
- Created: 2022-04-29T01:50:08.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-01T09:33:56.000Z (almost 4 years ago)
- Last Synced: 2025-07-03T09:42:13.219Z (9 months ago)
- Topics: html, posthtml, posthtml-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@shimech/posthtml-css-prop
- Size: 847 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @shimech/posthtml-css-prop
[](https://badge.fury.io/js/@shimech%2Fposthtml-css-prop)
[PostHTML](https://github.com/posthtml/posthtml) plugin to support [css prop](https://emotion.sh/docs/css-prop) like emotion.
This package is a wrapper of [emotion](https://emotion.sh).
Before:
```html
Title
Hello World!
```
After:
```html
.css-1pwdwr4 {
text-align: center;
font-size: 24px;
}
.css-1q8jsgx {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.css-qrwk6l {
color: red;
}
.css-qrwk6l:hover {
color: blue;
}
Title
Hello World!
```
## Install
```shell
npm install @shimech/posthtml-css-prop
```
## Usage
```javascript
const posthtml = require("posthtml");
const html = `
Title
Hello World!
`;
posthtml()
.use(require("@shimech/posthtml-css-prop")())
.process(html)
.then((result) => console.log(result.html));
// Output:
//
// .css-1pwdwr4{text-align:center;font-size:24px;}.css-1q8jsgx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-qrwk6l{color:red;}.css-qrwk6l:hover{color:blue;}
//
//
Title
//
// Hello World!
//
//
//
```
### Contributing
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs).