Skip to content

Latest commit

 

History

History
90 lines (68 loc) · 2.26 KB

README.md

File metadata and controls

90 lines (68 loc) · 2.26 KB

Welcome to babel-plugin-transform-jsxstyle 👋

Version Documentation Maintenance License: MIT

babel plugin transform jsxstyle htmltag

Install

yarn add babel-plugin-transform-jsxstyle --dev
// or
npm i babel-plugin-transform-jsxstyle --dev

Usage

// 1st config
// add plugin into babel plugins property
// eg:
"plugins": [
    "babel-plugin-transform-jsxstyle"
]
// 2nd use
<style-less>{`
    @primary: #f25e5e;
    @primary-hover: #f7a250;
    a {
        color: @primary;
        &:hover {
            color: @primary-hover;
        }
    }
`}</style-less>
// it will be transformed into below
<style>{`
    a {
        color: #f25e5e
    }
    a:hover {
        color: #f7a250;
    }
`}</style>

// alternatively, you can write sass if u like
<style-sass>{`
    $primary: #eb2f96;
    $primary-hover: #722ed1;
    a {
        color: $primary;
        &:hover {
            color: $primary-hover;
        }
    }
`}</style-sass>

Demo

example

Author

👤 yezihaohao

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 yezihaohao.

This project is MIT licensed.


This README was generated with ❤️ by readme-md-generator