{"bugs":{"url":"https://github.com/raxjs/rax-scripts/issues"},"dist":{"shasum":"809c35f9d7c87755b8e8f109868984436257e579","tarball":"https://registry.npmjs.org/babel-plugin-transform-jsx-stylesheet/-/babel-plugin-transform-jsx-stylesheet-1.0.2-1.tgz","fileCount":15,"integrity":"sha512-JEoljvUrrLLYCouHa8yrNni3L+dlWoL9hvm/2vED89H2Jyg+Lj9gyEvB0SXwjea7onmZ0EcTIBLVg66RNdhfmw==","signatures":[{"sig":"MEUCIDRQwPKThJQhk/l620vWlGdIqr3ezNaCtCnRvk1sX1syAiEA7kKo2AqcdRTPT/0pAewSvzsBquwyzH1+H2pVj5Ch0rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftigkCRA9TVsSAnZWagAAUiMP/RLI0e3mKHFOIvPbnHSM\nBmHnoV/YmbfRzBv+naY/OvV2WhpRKdqnRLlGUHEqVLSZaSITMGRXGrRaXRiv\nDUvJF/xpjeFp0j5R9ayn7/P1W6BMT8SDi+CSLURIRD8XD+cuEukJDsKKqqYs\ni9+1MPF6QM7TGm+MaW6pDS81LcCVhh8LnpUu0hvSzUIdSBgyNuGuIApeI6HI\ndMJqYbKiKnb/3MNn0FaoDIXWj2RwwYDDMI0aZUBr4SIwPIwcdhJUySzZSKv5\nPihlOaJK9BD8IZDVxsMplZOBvkniVt4hhYIVQiQSDs6NOgC443oX8lgGganA\nudhZF9EXRzfQo0hPqqQGT1wgbtCzKvhwEKSTXhXdsk+vXrGta89nmM8NGGm/\nZ5qfheGrl+w0EQfUxfiWZOWzce/n1bSkG4WjG1dUxLND9oMNM1I+HNq7EwV2\nN680OgOzpXCAEZ3W7nzZw4qUqOhrgZYbeQ5GwTriERP/95IdCzoXxL3r59NI\nLMtJb+gKTThRod655FLcGK2BUIadkMd4UhjV0osM0Lr9zq/iMT+hVBcbxY+V\nhvQNekDycdl8c9kQ/HC0AsecGVea1dzuAMBDpukCRtNSKD1AbbnK9HrD3hiT\nbfb6NJmvdape8a8C+7mz7+VAJ3F+EWDc3v5c9WSWh2K6/s6g1mAo6HQ/9Lzz\n28GD\r\n=QGoU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"babel-plugin-transform-jsx-stylesheet","readme":"# babel-plugin-transform-jsx-stylesheet\n> Transform StyleSheet selector to style in JSX Elements.\n\n## Installation\n\n```sh\nnpm install --save-dev babel-plugin-transform-jsx-stylesheet\n```\n\n## Usage\n\n### Via `.babelrc`\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [\"transform-jsx-stylesheet\"]\n}\n```\n\n## Example\n\nYour `component.js` that contains this code:\n\n```js\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header\" />\n  }\n}\n```\n\nWill be transpiled into something like this:\n\n```js\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nclass App extends Component {\n  render() {\n    return <div style={styleSheet.header} />;\n  }\n}\n\nconst styleSheet = appStyleSheet;\n```\n\nCan write multiple classNames like this:\n\n```js\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header1 header2\" />;\n  }\n}\n```\n\nWill be transpiled into something like this:\n\n```js\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nclass App extends Component {\n  render() {\n    return <div style={[styleSheet.header1, styleSheet.header2]} />;\n  }\n}\n\nconst styleSheet = appStyleSheet;\n```\n\nAlso support array, object and expressions like this: **（since 0.6.0）**\n\n```js\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return (\n      <div className={'header'}>\n        <div className={{ active: this.props.isActive }} />\n        <div className={['header1 header2', 'header3', { active: this.props.isActive }]} />\n        <div className={this.props.visible ? 'show' : 'hide'} />\n        <div className={getClassName()} />\n      </div>\n    );\n  }\n}\n```\n\nWill be transpiled into something like this:\n\n```js\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nclass App extends Component {\n  render() {\n    return (\n      <div style={styleSheet.header}>\n        <div style={_getStyle({ active: this.props.isActive })} />\n        <div style={_getStyle(['header1 header2', 'header3', { active: this.props.isActive }])} />\n        <div style={_getStyle(this.props.visible ? 'show' : 'hide')} />\n        <div style={_getStyle(getClassName())} />\n      </div>\n    );\n  }\n}\n\nconst styleSheet = appStyleSheet;\nfunction _getClassName() { /* codes */ }\nfunction _getStyle(className) {\n  return styleSheet[_getClassName(className)]; // not real code\n}\n```\n\nAnd can also import multiple css file:\n\n```js\nimport { createElement, Component } from 'rax';\nimport 'app1.css';\nimport 'app2.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header1 header2\" />;\n  }\n}\n```\n\nWill be transpiled into something like this:\n\n```js\nimport { createElement, Component } from 'rax';\nimport app1StyleSheet from 'app1.css';\nimport app2StyleSheet from 'app2.css';\n\nclass App extends Component {\n  render() {\n    return <div style={[styleSheet.header1, styleSheet.header2]} />;\n  }\n}\n\nconst styleSheet = Object.assign({}, app1StyleSheet, app2StyleSheet);\n```\n","engines":{"npm":">=3.0.0"},"license":"BSD-3-Clause","_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"homepage":"https://github.com/raxjs/rax-scripts#readme","repository":{"url":"git+https://github.com/raxjs/rax-scripts.git","type":"git"},"_npmVersion":"6.14.5","description":"Transform stylesheet selector to style in JSX Elements.","directories":{},"maintainers":[{"name":"zeroling","email":"wssgcg1213@qq.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"yacheng","email":"narutosun2@163.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"12.18.1","dependencies":{"camelcase":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"^6.23.1","babel-plugin-syntax-jsx":"^6.18.0"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-transform-jsx-stylesheet_1.0.2-1_1605773348098_0.22278213686655501","host":"s3://npm-registry-packages"},"_id":"babel-plugin-transform-jsx-stylesheet@1.0.2-1","version":"1.0.2-1"}