jsx2css

  

A converter to transform jsx className/class to css/less/sass selector. online demo

Install

``
$ npm install jsx2css --save
`

Usage

$3

`js
// ES6
import JSX2CSS from 'jsx2css';
// TypeScript: import * as JSX2CSS from 'jsx2css'
// commonJS const JSX2CSS = require('jsx2css');

// Instantiate an object, option is { type: 'css' / 'less' } that you want to output style type.
const jsx2css = new JSX2CSS({ type: 'less' });

// your jsx code
const code =
// css modules or not
import styles from './index.less';
class Test extends Component {
render() {
return (

);
}
}
;

// call transform function, option is { code: string, isOrigin?: boolean; }
// code is your jsx code, it will return css AST if isOrigin set true, default false.
const styles = jsx2css.transform({ code: code });

=>
// styles is

.person {
.header-header {
.headerContent {
div {
span {}
}
h1 {}
}
}
.a11 {}
.body {
.price {
p {}
span {}
}
.action {
.image {
img {}
p {}
}
}
}
}
`

$3

just edit the constructor options to output css class.

`diff
- const jsx2css = new JSX2CSS({ type: 'less' });
+ const jsx2css = new JSX2CSS({ type: 'css' });
const styles = jsx2css.transform({ code: code });

=>
// styles if

.person {}
.header-header {}
.headerContent {}
div {}
span {}
h1 {}
.aa11 {}
.body {}
.price {}
p {}
span {}
.action {}
.image {}
img {}
p {}

``

SnapShot

!image

TODO

- [x] children JSXExpressionContainer bug
- [x] README zh_CN
- [ ] better TypeScript support
- [ ] Sass support
- [ ] More unit testing for robustness
- [ ] more flexible to support other css-in-js tools
- [ ] VSCode plugin base on the converter