# babel-plugin-transform-jsx-stylesheet

> Transform stylesheet selector to style in JSX Elements.

Latest version **1.0.6** (published 2022-01-11) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-jsx-stylesheet
pnpm add babel-plugin-transform-jsx-stylesheet
yarn add babel-plugin-transform-jsx-stylesheet
bun add babel-plugin-transform-jsx-stylesheet
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-01-11 |
| First published | 2017-02-16 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zeroling, wintercn, yuanyan, yacheng, rax-publisher |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-jsx-stylesheet
- Repository: https://github.com/raxjs/rax-scripts
- Homepage: https://github.com/raxjs/rax-scripts#readme
- Issues: https://github.com/raxjs/rax-scripts/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-jsx-stylesheet

## Dependencies (1)

- [camelcase](https://npm.io/package/camelcase.md) ^3.0.0

## Recent versions

- 1.0.6 (latest) — 2022-01-11
- 1.0.6-beta.3 (beta) — 2022-05-11
- 1.0.6-beta.2 — 2022-02-16
- 1.0.6-beta.1 — 2021-12-29
- 1.0.5-beta.7 — 2021-12-29
- 1.0.5-beta.6 — 2021-12-28
- 1.0.5-beta.5 — 2021-12-28
- 1.0.5-beta.4 — 2021-12-28
- 1.0.5-beta.3 — 2021-12-28
- 1.0.5-beta.2 — 2021-12-28
- 1.0.5 — 2021-12-27
- 1.0.5-beta.1 — 2021-12-24
- 1.0.4-beta.8 — 2021-12-23
- 1.0.4-beta.7 — 2021-12-22
- 1.0.4-beta.6 — 2021-12-22
- … 81 more at https://npm.io/package/babel-plugin-transform-jsx-stylesheet/versions

## README

# babel-plugin-transform-jsx-stylesheet
> Transform StyleSheet selector to style in JSX Elements.

## Installation

```sh
npm install --save-dev babel-plugin-transform-jsx-stylesheet
```

## Usage

### Via `.babelrc`

**.babelrc**

```json
{
  "plugins": ["transform-jsx-stylesheet"]
}
```

## Example

Your `component.js` that contains this code:

```js
import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return <div className="header" />
  }
}
```

Will be transpiled into something like this:

```js
import { createElement, Component } from 'rax';
import appStyleSheet from './app.css';

class App extends Component {
  render() {
    return <div style={styleSheet.header} />;
  }
}

const styleSheet = appStyleSheet;
```

Can write multiple classNames like this:

```js
import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}
```

Will be transpiled into something like this:

```js
import { createElement, Component } from 'rax';
import appStyleSheet from './app.css';

class App extends Component {
  render() {
    return <div style={[styleSheet.header1, styleSheet.header2]} />;
  }
}

const styleSheet = appStyleSheet;
```

Also support array, object and expressions like this: **（since 0.6.0）**

```js
import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return (
      <div className={'header'}>
        <div className={{ active: this.props.isActive }} />
        <div className={['header1 header2', 'header3', { active: this.props.isActive }]} />
        <div className={this.props.visible ? 'show' : 'hide'} />
        <div className={getClassName()} />
      </div>
    );
  }
}
```

Will be transpiled into something like this:

```js
import { createElement, Component } from 'rax';
import appStyleSheet from './app.css';

class App extends Component {
  render() {
    return (
      <div style={styleSheet.header}>
        <div style={_getStyle({ active: this.props.isActive })} />
        <div style={_getStyle(['header1 header2', 'header3', { active: this.props.isActive }])} />
        <div style={_getStyle(this.props.visible ? 'show' : 'hide')} />
        <div style={_getStyle(getClassName())} />
      </div>
    );
  }
}

const styleSheet = appStyleSheet;
function _getClassName() { /* codes */ }
function _getStyle(className) {
  return styleSheet[_getClassName(className)]; // not real code
}
```

And can also import multiple css file:

```js
import { createElement, Component } from 'rax';
import 'app1.css';
import 'app2.css';

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}
```

Will be transpiled into something like this:

```js
import { createElement, Component } from 'rax';
import app1StyleSheet from 'app1.css';
import app2StyleSheet from 'app2.css';

class App extends Component {
  render() {
    return <div style={[styleSheet.header1, styleSheet.header2]} />;
  }
}

const styleSheet = Object.assign({}, app1StyleSheet, app2StyleSheet);
```

---
_Source: https://npm.io/package/babel-plugin-transform-jsx-stylesheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._