Skip to content

shimech/posthtml-css-prop

Repository files navigation

@shimech/posthtml-css-prop

npm version Test

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-prop

Usage

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.