https://github.com/yezihaohao/babel-plugin-transform-jsxstyle

jsx style tag transform plugin. demo: https://stupefied-bartik-36dc04.netlify.com/
https://github.com/yezihaohao/babel-plugin-transform-jsxstyle

ast babel babel-plugin complier

Last synced: 3 days ago
JSON representation

jsx style tag transform plugin. demo: https://stupefied-bartik-36dc04.netlify.com/

• Host: GitHub
• URL: https://github.com/yezihaohao/babel-plugin-transform-jsxstyle
• Owner: yezihaohao
• License: mit
• Created: 2019-08-25T04:49:21.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T08:04:33.000Z (almost 2 years ago)
• Last Synced: 2024-10-07T08:16:13.886Z (about 1 month ago)
• Topics: ast, babel, babel-plugin, complier
• Language: JavaScript
• Homepage:
• Size: 3.3 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Welcome to babel-plugin-transform-jsxstyle 👋

![Version](https://img.shields.io/npm/v/babel-plugin-transform-jsxstyle.svg)

[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle#readme)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle/graphs/commit-activity)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle/blob/master/LICENSE)

> babel plugin transform jsxstyle htmltag

### 🏠 [Homepage](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle#readme)

## Install

```js

yarn add babel-plugin-transform-jsxstyle --dev

// or

npm i babel-plugin-transform-jsxstyle --dev

```

## Usage

```js

// 1st config

// add plugin into babel plugins property

// eg:

"plugins": [

    "babel-plugin-transform-jsxstyle"

]

// 2nd use

{`

    @primary: #f25e5e;

    @primary-hover: #f7a250;

    a {

        color: @primary;

        &:hover {

            color: @primary-hover;

        }

    }

`}

// it will be transformed into below

{`

    a {

        color: #f25e5e

    }

    a:hover {

        color: #f7a250;

    }

`}

// alternatively, you can write sass if u like

{`

    $primary: #eb2f96;

    $primary-hover: #722ed1;

    a {

        color: $primary;

        &:hover {

            color: $primary-hover;

        }

    }

`}

```

## Demo

[example](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle/tree/master/example)

## Author

👤 **yezihaohao**

-   Github: [@yezihaohao](https://github.com/yezihaohao)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle/issues).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2019 [yezihaohao](https://github.com/yezihaohao).

This project is [MIT](https://github.com/yezihaohao/babel-plugin-transform-jsxstyle/blob/master/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_