1.0.3 • Published 2 years ago
@shimech/posthtml-css-prop v1.0.3
@shimech/posthtml-css-prop
PostHTML plugin to support css prop like emotion. This package is a wrapper of emotion.
Before:
<html>
<head></head>
<body>
<h1 css-prop="text-align: center; font-size: 24px;">Title</h1>
<div class="foo" css-prop="display: flex;">
<span css-prop="color: red; &:hover { color: blue; }">Hello World!</span>
</div>
</body>
</html>After:
<html>
<head>
<style data-posthtml-css-prop="css 1pwdwr4">
.css-1pwdwr4 {
text-align: center;
font-size: 24px;
}
</style>
<style data-posthtml-css-prop="css 1q8jsgx">
.css-1q8jsgx {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
<style data-posthtml-css-prop="css qrwk6l">
.css-qrwk6l {
color: red;
}
.css-qrwk6l:hover {
color: blue;
}
</style>
</head>
<body>
<h1 class="css-1pwdwr4">Title</h1>
<div class="css-1q8jsgx foo">
<span class="css-qrwk6l">Hello World!</span>
</div>
</body>
</html>Install
npm install @shimech/posthtml-css-propUsage
const posthtml = require("posthtml");
const html = `
<html>
<head></head>
<body>
<h1 css-prop="text-align: center; font-size: 24px;">Title</h1>
<div class="foo" css-prop="display: flex;">
<span css-prop="color: red; &:hover { color: blue; }">Hello World!</span>
</div>
</body>
</html>
`;
posthtml()
.use(require("@shimech/posthtml-css-prop")())
.process(html)
.then((result) => console.log(result.html));
// Output:
// <html>
// <head><style data-posthtml-css-prop="css 1pwdwr4">.css-1pwdwr4{text-align:center;font-size:24px;}</style><style data-posthtml-css-prop="css 1q8jsgx">.css-1q8jsgx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-posthtml-css-prop="css qrwk6l">.css-qrwk6l{color:red;}.css-qrwk6l:hover{color:blue;}</style></head>
// <body>
// <h1 class="css-1pwdwr4">Title</h1>
// <div class="css-1q8jsgx foo">
// <span class="css-qrwk6l">Hello World!</span>
// </div>
// </body>
// </html>Contributing
See PostHTML Guidelines.