{"bugs":{"url":"https://github.com/raxjs/rax-scripts/issues"},"dist":{"shasum":"8b2107d7bd5f54dc3a8a0fe0aa970aa4dce03489","tarball":"https://registry.npmjs.org/babel-plugin-transform-jsx-stylesheet/-/babel-plugin-transform-jsx-stylesheet-1.0.2-0.tgz","fileCount":15,"integrity":"sha512-CEFms9pM7nYqSP9pWHRvW4xISyH29vaJHXCLt8tHvUOVFb0y4jakUUjxXZrxFDLGYC7sKIyUKtdobVKp0Bn+xQ==","signatures":[{"sig":"MEQCIGMiA0v0kPxJ8dPMYEtD6WhbFx+/z1bouX93MHiB25fXAiAkNNpJTDys1F6YVtjHvNyCXDytfwPjEvvWAYC0ETldtg==","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\nwsFcBAEBCAAQBQJftiaHCRA9TVsSAnZWagAAbyEP/jI3bZcYbPKucLdWe9ov\nHrWieg1n7b7mrldpCjM5kVK9wZZyjcjrUWU6VNetWNj+8Ne6r94aXfIT5+OZ\nOvvTDDl5n7rX7jolzuuXxk2msrcqnMrnM3TvCmodlitULLUXD3OS0advDO3n\nPl8ow3Dhh543XXJ+4H+56SapwFIgWD14odSBK/qJF78xMdlAlq/CUSUg4wE7\nbPPeIPJCmqR+mZ5euf+agWNvTGViWphUrpm0Cs8TNuH+sJTwKP0J8Q1bnQ10\nIdEvqnQjGgMNNBJhKPbnvnhZEw6JTx4RvD9dRD3XyiIgD1Z2kXKOodRymaWe\n1O1lPms6jyB8YNxSS7cwTlQl6RGL/x1ZjZjnPtZ1jKWmOXm+L9bpXGkx15mr\nE+CWjg/p5hR8422wJXUrnPcRgadxhhLjR0pd3dRPexds4F7aGGLIMm7WgvOj\nnp/w6TzwmlY3C1y+7pRKhDL/HCoQgCcb11JunyuaS9JnEoLg6tdQynCPDWUa\nHxOaONRvNBgGhm7DjNVDkrCdczTAS5L17SCJKz5o7Uwu6kHs0tK1WMtCL+Mu\nFM26yIky9dH3wuE/dLNoPFgyNLDAScjaCadb9hYGHCDj4ZveT2OYhqXhM+uR\nSCRfQxvV5za5O2HVXWeeW+bMGZC/e2VK4M2W3RqqIn/s4Bf/2AKqcanxuMvb\nQ7KM\r\n=J68H\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-0_1605772935384_0.27924347882768297","host":"s3://npm-registry-packages"},"_id":"babel-plugin-transform-jsx-stylesheet@1.0.2-0","version":"1.0.2-0"}