babel-plugin-transform-jsxstyle

Welcome to babel-plugin-transform-jsxstyle 👋

babel plugin transform jsxstyle htmltag

🏠 Homepage

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

• Github: @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