babel-plugin-transform-jsx-stylesheet
Transform StyleSheet selector to style in JSX Elements.
Installation
npm install --save-dev babel-plugin-transform-jsx-to-stylesheet
Usage
.babelrc
Via .babelrc
Example
Your component.js
that contains this code:
;; { return <div className="header" /> }
Will be transpiled into something like this:
;; { return <div style=styleSheetheader />; } const styleSheet = appStyleSheet;
Can write multiple classNames like this:
;; { return <div className="header1 header2" />; }
Will be transpiled into something like this:
;; { return <div style=styleSheetheader1 styleSheetheader2 />; } const styleSheet = appStyleSheet;
Also support array, object and expressions like this:
;; { return <div className='header'> <div className= active: thispropsisActive /> <div className='header1 header2' 'header3' active: thispropsisActive /> <div className=thispropsvisible ? 'show' : 'hide' /> <div className= /> </div> ; }
Will be transpiled into something like this:
;; { return <div style=styleSheetheader> <div style= /> <div style= /> <div style= /> <div style= /> </div> ; } const styleSheet = appStyleSheet; { /* codes */ } { return styleSheet; // not real code}
And can also import multiple css file:
;;; { return <div className="header1 header2" />; }
Will be transpiled into something like this:
; { return <div style=styleSheetheader1 styleSheetheader2 />; } const styleSheet = app1StyleSheet;