Babel-plugin-transform-jsxstyle NPM

Welcome to babel-plugin-transform-jsxstyle 👋

Version

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>