├── .gitignore ├── .flowconfig ├── .travis.yml ├── .eslintignore ├── src ├── .babelrc └── index.js ├── .eslintrc ├── test ├── fixtures │ ├── jsx │ │ ├── string │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── string-jsx-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── string-multiple │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── identifier │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── call-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── jsx-spread │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── binary-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── logical-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── classnames │ │ │ ├── actual.js │ │ │ └── expected.js │ │ └── array-join │ │ │ ├── actual.js │ │ │ └── expected.js │ ├── createElement │ │ ├── string │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── string-multiple │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── identifier │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── string-jsx-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── call-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── jsx-spread │ │ │ ├── expected.js │ │ │ └── actual.js │ │ ├── binary-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── logical-expression │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── classnames │ │ │ ├── actual.js │ │ │ └── expected.js │ │ ├── array-join │ │ │ ├── expected.js │ │ │ └── actual.js │ │ └── identifier-props │ │ │ ├── actual.js │ │ │ └── expected.js │ └── compiled │ │ ├── string-jsx-expression │ │ ├── actual.js │ │ └── expected.js │ │ ├── string │ │ ├── actual.js │ │ └── expected.js │ │ ├── identifier │ │ ├── actual.js │ │ └── expected.js │ │ ├── string-multiple │ │ ├── actual.js │ │ └── expected.js │ │ ├── call-expression │ │ ├── actual.js │ │ └── expected.js │ │ ├── binary-expression │ │ ├── actual.js │ │ └── expected.js │ │ ├── logical-expression │ │ ├── actual.js │ │ └── expected.js │ │ ├── classnames │ │ ├── actual.js │ │ └── expected.js │ │ ├── jsx-spread │ │ ├── actual.js │ │ └── expected.js │ │ └── array-join │ │ ├── actual.js │ │ └── expected.js └── index.js ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | *.tgz 4 | 5 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [options] 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "4" 5 | - "5" 6 | 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | test/fixtures/*/*/actual.js 2 | test/fixtures/*/*/expected.js 3 | lib 4 | 5 | index.js 6 | 7 | -------------------------------------------------------------------------------- /src/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ], 5 | "plugins": [ 6 | "transform-flow-strip-types" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | "parser": "babel-eslint" 3 | "extends": 4 | - "defaults/configurations/walmart/es6-node" 5 | "rules": 6 | "no-console": [0] 7 | "valid-jsdoc": [0] 8 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | return ( 6 |
7 | Base test. 8 |
9 | ); 10 | } 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string-jsx-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | return ( 6 |
7 | Base test. 8 |
9 | ); 10 | } 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string-multiple/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | return ( 6 |
7 | Base test. 8 |
9 | ); 10 | } 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | return React.createElement( 6 | "div", 7 | {className: "base " + "world"}, 8 | "Base test." 9 | ); 10 | } 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/jsx/identifier/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = "base"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return ( 7 |
8 | Base test. 9 |
10 | ); 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string-multiple/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | return React.createElement( 6 | "div", 7 | {className: "base other compound"}, 8 | "Base test." 9 | ); 10 | } 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/createElement/identifier/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = "base"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement( 7 | "div", 8 | {className: base}, 9 | "Base test." 10 | ); 11 | } 12 | }; 13 | 14 | -------------------------------------------------------------------------------- /test/fixtures/jsx/call-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = _ => "base" 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return ( 7 |
8 | Base test. 9 |
10 | ); 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/jsx/jsx-spread/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = "base"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return ( 7 |
8 | Base test. 9 |
10 | ); 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string-jsx-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return
7 | Base test. 8 |
; 9 | } 10 | }; 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return
7 | Base test. 8 |
; 9 | } 10 | }; 11 | 12 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string-jsx-expression/actual.js: -------------------------------------------------------------------------------- 1 | // not a createElement test 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement( 7 | "div", 8 | {className: "base"}, 9 | "Base test." 10 | ); 11 | } 12 | }; 13 | 14 | -------------------------------------------------------------------------------- /test/fixtures/createElement/call-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = _ => "base" 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement( 7 | "div", 8 | {className: base()}, 9 | "Base Test." 10 | ); 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/createElement/identifier/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _cssmodule["base"]; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return React.createElement("div", { className: base }, "Base test."); 8 | } 9 | }; 10 | 11 | -------------------------------------------------------------------------------- /test/fixtures/jsx/identifier/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _cssmodule["base"]; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return
8 | Base test. 9 |
; 10 | } 11 | }; 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement("div", { className: _cssmodule["base"] + " " + _cssmodule["world"] }, "Base test."); 7 | } 8 | }; 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/fixtures/jsx/jsx-spread/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _cssmodule["base"]; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return
8 | Base test. 9 |
; 10 | } 11 | }; 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string-jsx-expression/expected.js: -------------------------------------------------------------------------------- 1 | // not a createElement test 2 | import _cssmodule from "path/to/classnames.css"; 3 | import React from "react"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return React.createElement("div", { className: _cssmodule["base"] }, "Base test."); 8 | } 9 | }; 10 | 11 | 12 | -------------------------------------------------------------------------------- /test/fixtures/jsx/binary-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const arrayIdentifier = ["good", "luck"]; 6 | 7 | return ( 8 |
9 | Base test. 10 |
11 | ); 12 | } 13 | }; 14 | 15 | -------------------------------------------------------------------------------- /test/fixtures/jsx/string-multiple/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return
7 | Base test. 8 |
; 9 | } 10 | }; 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/createElement/jsx-spread/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _cssmodule["base"]; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return React.createElement("div", Object.assign({}, this.props, { className: base }), "Base test."); 8 | } 9 | }; 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/createElement/string-multiple/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement("div", { className: _cssmodule["base"] + " " + (_cssmodule["other"] + " ") + _cssmodule["compound"] }, "Base test."); 7 | } 8 | }; 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/fixtures/createElement/jsx-spread/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const base = "base"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement( 7 | "div", 8 | Object.assign({}, 9 | this.props, 10 | {className: base} 11 | ), 12 | "Base test." 13 | ); 14 | } 15 | }; 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /test/fixtures/jsx/logical-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const conservative = ["good", "luck"]; 6 | 7 | return ( 8 |
9 | Base test. 10 | {conservative.map(c => c)} 11 |
12 | ); 13 | } 14 | }; 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/createElement/binary-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const arrayIdentifier = ["good", "luck"]; 6 | 7 | return React.createElement( 8 | "div", 9 | { className: this.props.isOpen ? "yup" : arrayIdentifier.join(" ")}, 10 | "Base test." 11 | ); 12 | } 13 | }; 14 | 15 | -------------------------------------------------------------------------------- /test/fixtures/jsx/call-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _ => "base"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return
10 | Base test. 11 |
; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/jsx/classnames/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classnames from "classnames"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return ( 7 |
11 | Base test. 12 |
13 | ); 14 | } 15 | }; 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /test/fixtures/createElement/call-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | const base = _ => "base"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return React.createElement("div", { className: base().split(" ").map(function (i) { 8 | return _cssmodule[i] || i; 9 | }).join(" ") }, "Base Test."); 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /test/fixtures/createElement/logical-expression/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const conservative = ["good", "luck"]; 6 | 7 | return React.createElement( 8 | "div", 9 | {className: "yup" || conservative.join(" ")}, 10 | [ 11 | "Base test.", 12 | conservative.map(c => c) 13 | ] 14 | ); 15 | } 16 | }; 17 | 18 | -------------------------------------------------------------------------------- /test/fixtures/jsx/binary-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const arrayIdentifier = [_cssmodule["good"], _cssmodule["luck"]]; 7 | 8 | return
9 | Base test. 10 |
; 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/createElement/binary-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const arrayIdentifier = [_cssmodule["good"], _cssmodule["luck"]]; 7 | 8 | return React.createElement("div", { className: this.props.isOpen ? _cssmodule["yup"] : arrayIdentifier.join(" ") }, "Base test."); 9 | } 10 | }; 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /test/fixtures/createElement/logical-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const conservative = ["good", "luck"]; 7 | 8 | return React.createElement("div", { className: _cssmodule["yup"] || conservative.map(function (i) { 9 | return _cssmodule[i] || i; 10 | }).join(" ") }, ["Base test.", conservative.map(c => c)]); 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /test/fixtures/jsx/logical-expression/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const conservative = ["good", "luck"]; 7 | 8 | return
11 | Base test. 12 | {conservative.map(c => c)} 13 |
; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /test/fixtures/jsx/classnames/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | import classnames from "classnames"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return
13 | Base test. 14 |
; 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /test/fixtures/createElement/classnames/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classnames from "classnames"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | return React.createElement( 7 | "div", 8 | { className: classnames( 9 | "hello", 10 | this.hideable(), 11 | { 12 | "a": true, 13 | "b": false 14 | }) 15 | }, 16 | "Base test." 17 | ); 18 | } 19 | }; 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /test/fixtures/createElement/classnames/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | import classnames from "classnames"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | return React.createElement("div", { className: classnames("hello", this.hideable(), { 8 | "a": true, 9 | "b": false 10 | }).split(" ").map(function (i) { 11 | return _cssmodule[i] || i; 12 | }).join(" ") 13 | }, "Base test."); 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /test/fixtures/jsx/array-join/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const arrayIdentifier = ["good", this.props.luck]; 6 | const beConservative = ["good", "luck"]; 7 | 8 | return ( 9 |
10 |
11 |
12 | Base test. 13 | {beConservative.join(" ")} 14 |
15 |
16 |
17 | ); 18 | } 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /test/fixtures/createElement/array-join/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const arrayIdentifier = [_cssmodule["good"], _cssmodule[this.props.good]]; 7 | const beConservative = ["good", "luck"]; 8 | 9 | return React.createElement("div", { className: [_cssmodule["hello"], _cssmodule["world"]].join(" ") }, React.createElement("div", { className: arrayIdentifier.join(" ") }, React.createElement("div", { className: beConservative.map(function (i) { 10 | return _cssmodule[i] || i; 11 | }).join(" ") }, ["Base test.", beConservative.join(" ")]))); 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/jsx/array-join/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | 4 | export default class extends React.Component { 5 | render() { 6 | const arrayIdentifier = [_cssmodule["good"], _cssmodule[this.props.luck]]; 7 | const beConservative = ["good", "luck"]; 8 | 9 | return
10 |
11 |
14 | Base test. 15 | {beConservative.join(" ")} 16 |
17 |
18 |
; 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /test/fixtures/createElement/array-join/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class extends React.Component { 4 | render() { 5 | const arrayIdentifier = ["good", this.props.good]; 6 | const beConservative = ["good", "luck"]; 7 | 8 | return React.createElement( 9 | "div", 10 | {className: ["hello", "world"].join(" ")}, 11 | React.createElement( 12 | "div", 13 | {className: arrayIdentifier.join(" ")}, 14 | React.createElement( 15 | "div", 16 | {className: beConservative.join(" ")}, 17 | [ 18 | "Base test.", 19 | beConservative.join(" ") 20 | ] 21 | ) 22 | ) 23 | ); 24 | } 25 | }; 26 | 27 | -------------------------------------------------------------------------------- /test/fixtures/createElement/identifier-props/actual.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classname from "classnames"; 3 | import externalProps from "./props"; 4 | 5 | export default class extends React.Component { 6 | render() { 7 | const classes = classname("hello", { 8 | "world": true 9 | }); 10 | 11 | const props = { 12 | className: classes 13 | }; 14 | 15 | for (const p in this.props) { 16 | if (/^on/.test(p)) { 17 | // ignore 18 | } 19 | }; 20 | 21 | return React.createElement( 22 | "div", 23 | props, 24 | React.createElement( 25 | "div", 26 | externalProps, 27 | "Base test." 28 | ) 29 | ); 30 | } 31 | }; 32 | 33 | 34 | -------------------------------------------------------------------------------- /test/fixtures/createElement/identifier-props/expected.js: -------------------------------------------------------------------------------- 1 | import _cssmodule from "path/to/classnames.css"; 2 | import React from "react"; 3 | import classname from "classnames"; 4 | import externalProps from "./props"; 5 | 6 | export default class extends React.Component { 7 | render() { 8 | const classes = classname("hello", { 9 | "world": true 10 | }).split(" ").map(function (i) { 11 | return _cssmodule[i] || i; 12 | }).join(" "); 13 | 14 | const props = { 15 | className: classes 16 | }; 17 | 18 | for (const p in this.props) { 19 | if (/^on/.test(p)) { 20 | // ignore 21 | } 22 | }; 23 | 24 | return React.createElement("div", props, React.createElement("div", externalProps, "Base test.")); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) Walmart Labs 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "babel-plugin-react-cssmoduleify", 3 | "version": "1.0.2", 4 | "description": "Babel plugin to transform traditional classNames to CSS Modules", 5 | "main": "lib/index.js", 6 | "jsnext:main": "src/index.js", 7 | "scripts": { 8 | "build": "babel src/ --out-dir lib/", 9 | "prepublish": "npm run build", 10 | "lint": "eslint .", 11 | "compile-tests": "babel --presets es2015,react test/fixtures/jsx/*/ --out-dir test/fixtures/compiled", 12 | "pretest": "npm run build", 13 | "test": "mocha ./test/index.js" 14 | }, 15 | "files": [ 16 | "lib", 17 | "src" 18 | ], 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/walmartreact/babel-plugin-react-cssmoduleify.git" 22 | }, 23 | "keywords": [ 24 | "babel-plugin", 25 | "react", 26 | "css", 27 | "css-modules" 28 | ], 29 | "author": "Dustan Kasten ", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/walmartreact/babel-plugin-react-cssmoduleify/issues" 33 | }, 34 | "homepage": "https://github.com/walmartreact/babel-plugin-react-cssmoduleify#readme", 35 | "dependencies": { 36 | "array-find": "^1.0.0", 37 | "babel-generator": "^6.4.3", 38 | "babel-template": "^6.3.13" 39 | }, 40 | "devDependencies": { 41 | "assert-transform": "github:walmartreact/assert-transform", 42 | "babel-cli": "^6.4.0", 43 | "babel-core": "^6.4.0", 44 | "babel-eslint": "^4.1.6", 45 | "babel-plugin-syntax-flow": "^6.3.13", 46 | "babel-plugin-syntax-jsx": "^6.3.13", 47 | "babel-plugin-transform-flow-strip-types": "^6.4.0", 48 | "babel-preset-es2015": "^6.3.13", 49 | "babel-preset-react": "^6.3.13", 50 | "eslint": "^1.10.3", 51 | "eslint-config-defaults": "^7.1.1", 52 | "eslint-plugin-filenames": "^0.2.0", 53 | "mocha": "^2.3.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | /* global describe, it */ 2 | /* eslint no-invalid-this: 0 */ 3 | process.env.NODE_ENV = "test"; 4 | 5 | const assertTransform = require("assert-transform"); 6 | const path = require("path"); 7 | 8 | const BABEL_OPTIONS = { 9 | presets: [], 10 | plugins: [ 11 | "syntax-jsx", 12 | [path.join(__dirname, "..", "lib", "index.js"), { 13 | "cssmodule": "path/to/classnames.css" 14 | }] 15 | ] 16 | }; 17 | 18 | const test = (type, babelOptions) => (testCase) => () => 19 | assertTransform( 20 | path.join(__dirname, "fixtures", type, testCase, "actual.js"), 21 | path.join(__dirname, "fixtures", type, testCase, "expected.js"), 22 | babelOptions || BABEL_OPTIONS 23 | ); 24 | 25 | describe("babel-plugin-react-cssmoduleify", () => { 26 | ["jsx", "createElement", "compiled"].forEach((type) => { 27 | describe(type, () => { 28 | it("should transform simple literals", test(type)("string")); 29 | it("should transform multiple-class string literals", test(type)("string-multiple")); 30 | it("should transform JSXExpressionContainer values", test(type)("string-jsx-expression")); 31 | it("should transform *.join(\" \") expressions", test(type)("array-join")); 32 | it("should transform simple identifier expressions", test(type)("identifier")); 33 | it("should transform a simple call expression", test(type)("call-expression")); 34 | it("should transform a classnames call", test(type)("classnames")); 35 | it("should transform a spread assignment", test(type)("jsx-spread")); 36 | it("should transform binary expressions", test(type)("binary-expression")); 37 | it("should transform logical expressions", test(type)("logical-expression")); 38 | 39 | if (type === "createElement") { 40 | it("should transform prop identifiers", test(type)("identifier-props")); 41 | } 42 | }); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # babel-plugin-react-cssmoduleify 2 | 3 | [![Build Status](https://travis-ci.org/walmartreact/babel-plugin-react-cssmoduleify.svg)](https://travis-ci.org/walmartreact/babel-plugin-react-cssmoduleify) 4 | 5 | > **Note**: this plugin now requires Babel 6. To use the Babel 5 support ensure 6 | > you continue using the pre 1.0 release. 7 | 8 | For those who have tasted [CSS Modules](https://github.com/css-modules/css-modules) 9 | it is hard to imagine life without it. At Walmart we have a large number of core 10 | components that still use traditional CSS classNames and global CSS. This babel 11 | plugin is used to convert all global styles into CSS Modules to allow teams to 12 | opt-in to CSS Modules. 13 | 14 | Previously this attempted to be rather aggressive in it’s resolving of className 15 | calls. The current implementation is much simpler and therefore should also 16 | support more use cases. Currently `classNames` must be a `string`, so we can 17 | take any complex assignment and do the lookup on the fly. 18 | 19 | It detects the correct `className` calls in both JSX, React.createElement, and 20 | compiled JSX output. 21 | 22 | ## Usage 23 | 24 | * `npm install --save babel-plugin-react-cssmoduleify` 25 | 26 | .babelrc 27 | 28 | ```js 29 | { 30 | "plugins": [ 31 | ["babel-plugin-react-cssmoduleify", { 32 | // this string is applied to the current path to transform or bail out. 33 | // This is because this plugin is often used on external code. 34 | "path": "node_modules/regex-path-" 35 | "cssmodule": "client/styles/base.styl" 36 | "modules": "es6", 37 | "log": true 38 | }] 39 | ], 40 | } 41 | ``` 42 | 43 | #### Options: 44 | 45 | * `path`: `string`: string applied as a regex to each compiled file 46 | * `cssmodule`: `string`: path from `process.cwd()` to global CSS file 47 | * `modules`: `"es6"|"commonjs"` the type of module system cssmodule should be required as. 48 | * `log`: `boolean` log potentially unhandled cases. Default to false. 49 | 50 | ## Examples 51 | 52 | Look at the unit tests. 53 | 54 | ## Caveats 55 | 56 | This assumes that you can get all exports into one file. Most CSS Preprocessors 57 | build on the global nature of CSS and have their own internal global worlds. 58 | Importing all of your traditional files into a single file in Stylus or Sass 59 | will likely accomplish this. 60 | 61 | ## MIT License 62 | 63 | Copyright (c) 2015 Walmart Labs 64 | 65 | -------------------------------------------------------------------------------- /test/fixtures/compiled/string-jsx-expression/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | return _react2.default.createElement( 34 | "div", 35 | { className: "base" }, 36 | "Base test." 37 | ); 38 | } 39 | }]); 40 | 41 | return _class; 42 | })(_react2.default.Component); 43 | 44 | exports.default = _class; 45 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/string/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | return _react2.default.createElement( 34 | "div", 35 | { className: "base " + "world" }, 36 | "Base test." 37 | ); 38 | } 39 | }]); 40 | 41 | return _class; 42 | })(_react2.default.Component); 43 | 44 | exports.default = _class; 45 | ; 46 | -------------------------------------------------------------------------------- /test/fixtures/compiled/identifier/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var base = "base"; 22 | 23 | var _class = (function (_React$Component) { 24 | _inherits(_class, _React$Component); 25 | 26 | function _class() { 27 | _classCallCheck(this, _class); 28 | 29 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 30 | } 31 | 32 | _createClass(_class, [{ 33 | key: "render", 34 | value: function render() { 35 | return _react2.default.createElement( 36 | "div", 37 | { className: base }, 38 | "Base test." 39 | ); 40 | } 41 | }]); 42 | 43 | return _class; 44 | })(_react2.default.Component); 45 | 46 | exports.default = _class; 47 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/string-multiple/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | return _react2.default.createElement( 34 | "div", 35 | { className: "base other compound" }, 36 | "Base test." 37 | ); 38 | } 39 | }]); 40 | 41 | return _class; 42 | })(_react2.default.Component); 43 | 44 | exports.default = _class; 45 | ; 46 | -------------------------------------------------------------------------------- /test/fixtures/compiled/call-expression/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var base = function base(_) { 22 | return "base"; 23 | }; 24 | 25 | var _class = (function (_React$Component) { 26 | _inherits(_class, _React$Component); 27 | 28 | function _class() { 29 | _classCallCheck(this, _class); 30 | 31 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 32 | } 33 | 34 | _createClass(_class, [{ 35 | key: "render", 36 | value: function render() { 37 | return _react2.default.createElement( 38 | "div", 39 | { className: base() }, 40 | "Base test." 41 | ); 42 | } 43 | }]); 44 | 45 | return _class; 46 | })(_react2.default.Component); 47 | 48 | exports.default = _class; 49 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/binary-expression/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | var arrayIdentifier = ["good", "luck"]; 34 | 35 | return _react2.default.createElement( 36 | "div", 37 | { className: this.props.isOpen ? "yup" : arrayIdentifier.join(" ") }, 38 | "Base test." 39 | ); 40 | } 41 | }]); 42 | 43 | return _class; 44 | })(_react2.default.Component); 45 | 46 | exports.default = _class; 47 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/logical-expression/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | var conservative = ["good", "luck"]; 34 | 35 | return _react2.default.createElement( 36 | "div", 37 | { className: "yup" || conservative.join(" ") }, 38 | "Base test.", 39 | conservative.map(function (c) { 40 | return c; 41 | }) 42 | ); 43 | } 44 | }]); 45 | 46 | return _class; 47 | })(_react2.default.Component); 48 | 49 | exports.default = _class; 50 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/string-jsx-expression/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | return _react2.default.createElement("div", { className: _cssmodule["base"] }, "Base test."); 58 | } 59 | }]); 60 | 61 | return _class; 62 | }(_react2.default.Component); 63 | 64 | exports.default = _class; 65 | ; 66 | 67 | -------------------------------------------------------------------------------- /test/fixtures/compiled/string/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | return _react2.default.createElement("div", { className: _cssmodule["base"] + " " + _cssmodule["world"] }, "Base test."); 58 | } 59 | }]); 60 | 61 | return _class; 62 | }(_react2.default.Component); 63 | 64 | exports.default = _class; 65 | ; 66 | -------------------------------------------------------------------------------- /test/fixtures/compiled/identifier/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var base = _cssmodule["base"]; 46 | 47 | var _class = function (_React$Component) { 48 | _inherits(_class, _React$Component); 49 | 50 | function _class() { 51 | _classCallCheck(this, _class); 52 | 53 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 54 | } 55 | 56 | _createClass(_class, [{ 57 | key: "render", 58 | value: function render() { 59 | return _react2.default.createElement("div", { className: base }, "Base test."); 60 | } 61 | }]); 62 | 63 | return _class; 64 | }(_react2.default.Component); 65 | 66 | exports.default = _class; 67 | ; 68 | -------------------------------------------------------------------------------- /test/fixtures/compiled/classnames/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require("classnames"); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var _class = (function (_React$Component) { 26 | _inherits(_class, _React$Component); 27 | 28 | function _class() { 29 | _classCallCheck(this, _class); 30 | 31 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 32 | } 33 | 34 | _createClass(_class, [{ 35 | key: "render", 36 | value: function render() { 37 | return _react2.default.createElement( 38 | "div", 39 | { className: (0, _classnames2.default)("hello", this.hideable(), { 40 | "a": true, 41 | "b": false 42 | }) }, 43 | "Base test." 44 | ); 45 | } 46 | }]); 47 | 48 | return _class; 49 | })(_react2.default.Component); 50 | 51 | exports.default = _class; 52 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/string-multiple/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | return _react2.default.createElement("div", { className: _cssmodule["base"] + " " + (_cssmodule["other"] + " ") + _cssmodule["compound"] }, "Base test."); 58 | } 59 | }]); 60 | 61 | return _class; 62 | }(_react2.default.Component); 63 | 64 | exports.default = _class; 65 | ; 66 | -------------------------------------------------------------------------------- /test/fixtures/compiled/binary-expression/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | var arrayIdentifier = [_cssmodule["good"], _cssmodule["luck"]]; 58 | 59 | return _react2.default.createElement("div", { className: this.props.isOpen ? _cssmodule["yup"] : arrayIdentifier.join(" ") }, "Base test."); 60 | } 61 | }]); 62 | 63 | return _class; 64 | }(_react2.default.Component); 65 | 66 | exports.default = _class; 67 | ; 68 | -------------------------------------------------------------------------------- /test/fixtures/compiled/jsx-spread/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 4 | 5 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 6 | 7 | Object.defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | var _react = require("react"); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16 | 17 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 18 | 19 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 20 | 21 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 22 | 23 | var base = "base"; 24 | 25 | var _class = (function (_React$Component) { 26 | _inherits(_class, _React$Component); 27 | 28 | function _class() { 29 | _classCallCheck(this, _class); 30 | 31 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 32 | } 33 | 34 | _createClass(_class, [{ 35 | key: "render", 36 | value: function render() { 37 | return _react2.default.createElement( 38 | "div", 39 | _extends({}, this.props, { className: base }), 40 | "Base test." 41 | ); 42 | } 43 | }]); 44 | 45 | return _class; 46 | })(_react2.default.Component); 47 | 48 | exports.default = _class; 49 | ; -------------------------------------------------------------------------------- /test/fixtures/compiled/call-expression/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var base = function base(_) { 46 | return "base"; 47 | }; 48 | 49 | var _class = function (_React$Component) { 50 | _inherits(_class, _React$Component); 51 | 52 | function _class() { 53 | _classCallCheck(this, _class); 54 | 55 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 56 | } 57 | 58 | _createClass(_class, [{ 59 | key: "render", 60 | value: function render() { 61 | return _react2.default.createElement("div", { className: base().split(" ").map(function (i) { 62 | return _cssmodule[i] || i; 63 | }).join(" ") }, "Base test."); 64 | } 65 | }]); 66 | 67 | return _class; 68 | }(_react2.default.Component); 69 | 70 | exports.default = _class; 71 | ; 72 | -------------------------------------------------------------------------------- /test/fixtures/compiled/logical-expression/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | var conservative = ["good", "luck"]; 58 | 59 | return _react2.default.createElement("div", { className: _cssmodule["yup"] || conservative.map(function (i) { 60 | return _cssmodule[i] || i; 61 | }).join(" ") }, "Base test.", conservative.map(function (c) { 62 | return c; 63 | })); 64 | } 65 | }]); 66 | 67 | return _class; 68 | }(_react2.default.Component); 69 | 70 | exports.default = _class; 71 | ; 72 | -------------------------------------------------------------------------------- /test/fixtures/compiled/array-join/actual.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | var _react = require("react"); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16 | 17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 18 | 19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 20 | 21 | var _class = (function (_React$Component) { 22 | _inherits(_class, _React$Component); 23 | 24 | function _class() { 25 | _classCallCheck(this, _class); 26 | 27 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 28 | } 29 | 30 | _createClass(_class, [{ 31 | key: "render", 32 | value: function render() { 33 | var arrayIdentifier = ["good", this.props.good]; 34 | var beConservative = ["good", "luck"]; 35 | 36 | return _react2.default.createElement( 37 | "div", 38 | { className: ["hello", "world"].join(" ") }, 39 | _react2.default.createElement( 40 | "div", 41 | { className: arrayIdentifier.join(" ") }, 42 | _react2.default.createElement( 43 | "div", 44 | { className: beConservative.join(" ") }, 45 | "Base test.", 46 | beConservative.join(" ") 47 | ) 48 | ) 49 | ); 50 | } 51 | }]); 52 | 53 | return _class; 54 | })(_react2.default.Component); 55 | 56 | exports.default = _class; 57 | ; 58 | -------------------------------------------------------------------------------- /test/fixtures/compiled/classnames/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | var _classnames = require("classnames"); 24 | 25 | var _classnames2 = _interopRequireDefault(_classnames); 26 | 27 | function _interopRequireDefault(obj) { 28 | return obj && obj.__esModule ? obj : { default: obj }; 29 | } 30 | 31 | function _classCallCheck(instance, Constructor) { 32 | if (!(instance instanceof Constructor)) { 33 | throw new TypeError("Cannot call a class as a function"); 34 | } 35 | } 36 | 37 | function _possibleConstructorReturn(self, call) { 38 | if (!self) { 39 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 40 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 41 | } 42 | 43 | function _inherits(subClass, superClass) { 44 | if (typeof superClass !== "function" && superClass !== null) { 45 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 46 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 47 | } 48 | 49 | var _class = function (_React$Component) { 50 | _inherits(_class, _React$Component); 51 | 52 | function _class() { 53 | _classCallCheck(this, _class); 54 | 55 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 56 | } 57 | 58 | _createClass(_class, [{ 59 | key: "render", 60 | value: function render() { 61 | return _react2.default.createElement("div", { className: (0, _classnames2.default)("hello", this.hideable(), { 62 | "a": true, 63 | "b": false 64 | }).split(" ").map(function (i) { 65 | return _cssmodule[i] || i; 66 | }).join(" ") }, "Base test."); 67 | } 68 | }]); 69 | 70 | return _class; 71 | }(_react2.default.Component); 72 | 73 | exports.default = _class; 74 | ; 75 | -------------------------------------------------------------------------------- /test/fixtures/compiled/jsx-spread/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _extends = Object.assign || function (target) { 6 | for (var i = 1; i < arguments.length; i++) { 7 | var source = arguments[i];for (var key in source) { 8 | if (Object.prototype.hasOwnProperty.call(source, key)) { 9 | target[key] = source[key]; 10 | } 11 | } 12 | }return target; 13 | }; 14 | 15 | var _createClass = function () { 16 | function defineProperties(target, props) { 17 | for (var i = 0; i < props.length; i++) { 18 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 19 | } 20 | }return function (Constructor, protoProps, staticProps) { 21 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 22 | }; 23 | }(); 24 | 25 | Object.defineProperty(exports, "__esModule", { 26 | value: true 27 | }); 28 | 29 | var _react = require("react"); 30 | 31 | var _react2 = _interopRequireDefault(_react); 32 | 33 | function _interopRequireDefault(obj) { 34 | return obj && obj.__esModule ? obj : { default: obj }; 35 | } 36 | 37 | function _classCallCheck(instance, Constructor) { 38 | if (!(instance instanceof Constructor)) { 39 | throw new TypeError("Cannot call a class as a function"); 40 | } 41 | } 42 | 43 | function _possibleConstructorReturn(self, call) { 44 | if (!self) { 45 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 46 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 47 | } 48 | 49 | function _inherits(subClass, superClass) { 50 | if (typeof superClass !== "function" && superClass !== null) { 51 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 52 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 53 | } 54 | 55 | var base = _cssmodule["base"]; 56 | 57 | var _class = function (_React$Component) { 58 | _inherits(_class, _React$Component); 59 | 60 | function _class() { 61 | _classCallCheck(this, _class); 62 | 63 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 64 | } 65 | 66 | _createClass(_class, [{ 67 | key: "render", 68 | value: function render() { 69 | return _react2.default.createElement("div", _extends({}, this.props, { className: base }), "Base test."); 70 | } 71 | }]); 72 | 73 | return _class; 74 | }(_react2.default.Component); 75 | 76 | exports.default = _class; 77 | ; 78 | -------------------------------------------------------------------------------- /test/fixtures/compiled/array-join/expected.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssmodule = require("path/to/classnames.css"); 4 | 5 | var _createClass = function () { 6 | function defineProperties(target, props) { 7 | for (var i = 0; i < props.length; i++) { 8 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 9 | } 10 | }return function (Constructor, protoProps, staticProps) { 11 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 12 | }; 13 | }(); 14 | 15 | Object.defineProperty(exports, "__esModule", { 16 | value: true 17 | }); 18 | 19 | var _react = require("react"); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | function _interopRequireDefault(obj) { 24 | return obj && obj.__esModule ? obj : { default: obj }; 25 | } 26 | 27 | function _classCallCheck(instance, Constructor) { 28 | if (!(instance instanceof Constructor)) { 29 | throw new TypeError("Cannot call a class as a function"); 30 | } 31 | } 32 | 33 | function _possibleConstructorReturn(self, call) { 34 | if (!self) { 35 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 36 | }return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | } 38 | 39 | function _inherits(subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 43 | } 44 | 45 | var _class = function (_React$Component) { 46 | _inherits(_class, _React$Component); 47 | 48 | function _class() { 49 | _classCallCheck(this, _class); 50 | 51 | return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments)); 52 | } 53 | 54 | _createClass(_class, [{ 55 | key: "render", 56 | value: function render() { 57 | var arrayIdentifier = [_cssmodule["good"], _cssmodule[this.props.good]]; 58 | var beConservative = ["good", "luck"]; 59 | 60 | return _react2.default.createElement("div", { className: [_cssmodule["hello"], _cssmodule["world"]].join(" ") }, _react2.default.createElement("div", { className: arrayIdentifier.join(" ") }, _react2.default.createElement("div", { className: beConservative.map(function (i) { 61 | return _cssmodule[i] || i; 62 | }).join(" ") }, "Base test.", beConservative.join(" ")))); 63 | } 64 | }]); 65 | 66 | return _class; 67 | }(_react2.default.Component); 68 | 69 | exports.default = _class; 70 | ; 71 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint no-extra-parens: 0 */ 2 | type Path = { 3 | node: node; 4 | scope: any; 5 | matchesPattern: (pattern:string) => boolean; 6 | }; 7 | 8 | type StateOpts = { 9 | cssmodule: string; 10 | modules: "commonjs"|"es6"; 11 | path: string; 12 | }; 13 | 14 | type State = { 15 | opts: StateOpts 16 | }; 17 | 18 | import template from "babel-template"; 19 | import generate from "babel-generator"; 20 | import find from "array-find"; 21 | import {join} from "path"; 22 | 23 | const LOG_CACHE = {}; 24 | 25 | /** 26 | * Convenience method to log additional work to do a single time per node type. 27 | * 28 | * @param {string} fnName function being called 29 | * @param {Node} node AST node 30 | * @param {Path} [path] optional AST Path for printing additional context. 31 | **/ 32 | const LogOnceImplementation = (fnName, node, path) => { 33 | const name = `${fnName}-${node.type}`; 34 | if (!LOG_CACHE[name]) { 35 | LOG_CACHE[name] = true; 36 | console.log( 37 | "babel-plugin-react-cssmoduleify WARNING(%s): unhandled node type `%s`.\n%s\n", 38 | fnName, 39 | node.type, 40 | generate(path ? path.node : node).code 41 | ); 42 | } 43 | }; 44 | 45 | export default ({types: t}) => { // eslint-disable-line 46 | // by default logging is a noop, but it is configurable 47 | let logOnce = () => {}; 48 | 49 | const ROOT_CSSNAMES_IDENTIFIER = "cssmodule"; 50 | const BAIL_OUT = "__dontTransformMe"; 51 | 52 | const matchesPatterns = (path:Path, patterns:Array) => ( 53 | !!find(patterns, (pattern) => ( 54 | t.isIdentifier(path.node, { name: pattern }) || 55 | path.matchesPattern(pattern) 56 | )) 57 | ); 58 | 59 | /** 60 | * Updates a ConditionalExpression consequent or alternate node with the most 61 | * appropriate CSS Module lookup. 62 | * 63 | * @param {Path} path consequent or alternate node of a conditional expression 64 | * @param {Node} cssmodule cssmodule identifier 65 | */ 66 | const replaceConditionalExpression = (path, cssmodule) => { 67 | return path.replaceWith(computeClassName(path, cssmodule)); // eslint-disable-line 68 | }; 69 | 70 | /** 71 | * Generate the string concat version of the following TemplateElements 72 | * `${ slot } ${ anotherslot }` 73 | */ 74 | const stringConcat = (cssmodule, values) => { 75 | const copy = values.slice(0); 76 | const first = copy.shift(); 77 | const concat = (left, right) => { 78 | return t.binaryExpression("+", left, right || t.stringLiteral(" ")); 79 | }; 80 | return copy.reduce((expr, v, i) => { 81 | // short circuit empty strings. this happens with something like: 82 | // {className: "hello " + "world"} 83 | if (v === "") { 84 | return expr; 85 | } 86 | const cssModule = t.memberExpression(cssmodule, t.stringLiteral(v), true); 87 | return concat(expr, (i === copy.length - 1) ? cssModule : concat(cssModule)); 88 | }, concat(t.memberExpression(cssmodule, t.stringLiteral(first), true))); 89 | }; 90 | 91 | const maybeCSSModuleExpression = (node, cssmodule) => 92 | t.logicalExpression( 93 | "||", 94 | t.memberExpression(cssmodule, node, true), 95 | node 96 | ); 97 | 98 | const computeClassName = (value, cssmodule) => { 99 | if (t.isStringLiteral(value)) { 100 | if (value.node.value === "") { 101 | return value.node; 102 | } 103 | const values = value.node.value.split(" "); 104 | return values.length === 1 105 | ? t.memberExpression(cssmodule, t.stringLiteral(values[0]), true) 106 | : stringConcat(cssmodule, values); 107 | } else if (t.isIdentifier(value)) { 108 | // TODO: need to validate what type of node this identifier refers to 109 | return t.memberExpression(cssmodule, value.node, true); 110 | } else if (t.isMemberExpression(value)) { 111 | return t.memberExpression(cssmodule, value.node, true); 112 | } else if (t.isConditionalExpression(value)) { 113 | replaceConditionalExpression(value.get("consequent"), cssmodule); 114 | replaceConditionalExpression(value.get("alternate"), cssmodule); 115 | return value.node; 116 | } else { 117 | logOnce("computeClassName", value.node); 118 | return value.node; 119 | } 120 | }; 121 | 122 | const isArrayJoin = (path) => { 123 | return ( 124 | t.isCallExpression(path.node) && 125 | t.isMemberExpression(path.node.callee) && 126 | t.isIdentifier(path.node.callee.property, {name: "join"}) && ( 127 | t.isArrayExpression(path.node.callee.object) || 128 | t.isIdentifier(path.node.callee.object) // TODO: resolve identifier 129 | ) 130 | ); 131 | }; 132 | 133 | /** 134 | * Resolves a path to most conservative Path to be converted. If there is only 135 | * one reference to an Identifier we can mutate that safely, otherwise we 136 | * return the original node to be transformed. 137 | * 138 | * @param {Path} path an Identifier or ArrayExpression Path 139 | * @return {Path} the conservatively resolved path 140 | */ 141 | const conservativeResolve = (path) => { 142 | // if it’s not an identifier we already have what we need 143 | if (!t.isIdentifier(path.node)) { 144 | return path; 145 | } 146 | const binding = path.scope.getBinding(path.node.name); 147 | 148 | // if there is only one reference, we can mutate that directly 149 | if (binding.references === 1) { 150 | if (t.isVariableDeclarator(binding.path)) { 151 | return binding.path.get("init"); 152 | } 153 | console.warn("TODO: ensure this branch is tracked"); 154 | return binding.path; 155 | } 156 | 157 | // else we should probably return conservatively only the one we want and 158 | // transform inline 159 | return path; 160 | }; 161 | 162 | /** 163 | * Replaces [...].join(" ") or identifier.join(" ") with the most appropriate 164 | * cssmodule lookup hash. 165 | * 166 | * @param {Path} path an Identifier or ArrayExpression Path 167 | * @param {Node} cssmodule the root identifier to the cssmodules object 168 | */ 169 | const replaceArrayJoinElements = (path, cssmodule) => { 170 | const arrayExpressionPath = conservativeResolve(path.get("callee").get("object")); 171 | if (t.isIdentifier(arrayExpressionPath)) { 172 | arrayExpressionPath.parent.object = 173 | t.callExpression( 174 | t.memberExpression( 175 | arrayExpressionPath.node, 176 | t.identifier("map"), 177 | false 178 | ), 179 | [t.functionExpression( 180 | null, 181 | [t.identifier("i")], 182 | t.blockStatement([ 183 | t.returnStatement(maybeCSSModuleExpression(t.identifier("i"), cssmodule)) 184 | ]) 185 | )] 186 | ); 187 | return; 188 | } 189 | 190 | for (let i = 0; i < arrayExpressionPath.node.elements.length; i++) { 191 | const element = arrayExpressionPath.get("elements", i)[i]; 192 | element.replaceWith(computeClassName(element, cssmodule)); 193 | } 194 | }; 195 | 196 | /** 197 | * Replaces React.createElement(..., path, ...) with the most appropriate 198 | * cssmodule lookup hash. 199 | * 200 | * @param {Path} cssmodule the root identifier to the cssmodules object 202 | */ 203 | const replaceIdentifier = (path, cssmodule) => { // eslint-disable-line 204 | const binding = path.scope.getBinding(path.node.name); 205 | 206 | const updateProperty = (property) => { 207 | if (property.node.key.name === "className") { 208 | updateClassName(property.get("value"), cssmodule); // eslint-disable-line 209 | } 210 | }; 211 | 212 | if (t.isVariableDeclarator(binding.path)) { 213 | // if there is only one reference, we can mutate that directly 214 | // we're assuming a props identifier is only used in local props so this 215 | // is technically a destructive transform. 216 | if (binding.references > 1) { 217 | logOnce("replaceIdentifier", {type: "with multiple references"}, binding.path); 218 | } 219 | 220 | const sourceNode = binding.path.get("init"); 221 | if (t.isNullLiteral(sourceNode)) { 222 | return; 223 | } else if (t.isCallExpression(sourceNode)) { 224 | sourceNode.get("arguments").forEach((arg) => { 225 | if (t.isObjectExpression(arg)) { 226 | arg.get("properties").forEach(updateProperty); 227 | } 228 | }); 229 | } else if (t.isObjectExpression(sourceNode)) { 230 | sourceNode.get("properties").forEach(updateProperty); 231 | } else if (t.isIdentifier(sourceNode)) { 232 | replaceIdentifier(sourceNode, cssmodule); 233 | } else { 234 | updateClassName(sourceNode, cssmodule); // eslint-disable-line 235 | } 236 | } else { 237 | logOnce("replaceIdentifier[maybe]", binding.path.node, binding.path); 238 | } 239 | }; 240 | 241 | /** 242 | * Updates a callExpression value with the most appropriate CSS Module lookup. 243 | * 244 | * @param {Path} callExpression 245 | * @param {Node} cssmodule cssmodule identifier 246 | */ 247 | const replaceCallExpression = (callExpression, cssmodule) => { 248 | if (isArrayJoin(callExpression)) { 249 | return replaceArrayJoinElements(callExpression, cssmodule); 250 | } 251 | 252 | // this is just mean 253 | callExpression.replaceWith( 254 | t.callExpression( 255 | t.memberExpression( 256 | t.callExpression( 257 | t.memberExpression( 258 | t.callExpression( 259 | t.memberExpression(callExpression.node, t.identifier("split"), false), 260 | [t.stringLiteral(" ")] 261 | ), 262 | t.identifier("map") 263 | ), 264 | [t.functionExpression( 265 | null, 266 | [t.identifier("i")], 267 | t.blockStatement([ 268 | t.returnStatement(maybeCSSModuleExpression(t.identifier("i"), cssmodule)) 269 | ]) 270 | )] 271 | ), 272 | t.identifier("join"), 273 | false 274 | ), 275 | [t.stringLiteral(" ")] 276 | ) 277 | ); 278 | }; 279 | 280 | const updateClassName = (value, cssmodule) => { 281 | if (t.isStringLiteral(value)) { 282 | value.replaceWith(computeClassName(value, cssmodule)); 283 | } else if (t.isMemberExpression(value)) { 284 | value.replaceWith(computeClassName(value, cssmodule)); 285 | } else if (t.isIdentifier(value)) { 286 | const binding = value.scope.getBinding(value.node.name); 287 | 288 | if (t.isVariableDeclarator(binding.path.node)) { 289 | updateClassName(binding.path.get("init"), cssmodule); 290 | } else { 291 | value.replaceWith(computeClassName(value, cssmodule)); 292 | } 293 | } else if (t.isCallExpression(value)) { 294 | replaceCallExpression(value, cssmodule); 295 | } else if (t.isObjectProperty(value)) { 296 | updateClassName(value.get("value"), cssmodule); 297 | } else if (t.isConditionalExpression(value)) { 298 | updateClassName(value.get("consequent"), cssmodule); 299 | updateClassName(value.get("alternate"), cssmodule); 300 | } else if (t.isLogicalExpression(value) || t.isBinaryExpression(value)) { 301 | updateClassName(value.get("left"), cssmodule); 302 | updateClassName(value.get("right"), cssmodule); 303 | } else { 304 | logOnce("updateClassName", value); 305 | } 306 | }; 307 | 308 | /** 309 | * Updates a JSX className value with the most appropriate CSS Module lookup. 310 | * 311 | * @param {Path} value 312 | * @param {Node} cssmodule cssmodule identifier 313 | */ 314 | const updateJSXClassName = (value, cssmodule) => { 315 | if (!t.isJSXExpressionContainer(value)) { 316 | value.replaceWith({ 317 | type: "JSXExpressionContainer", 318 | expression: value.node 319 | }); 320 | } 321 | updateClassName(value.get("expression"), cssmodule); 322 | }; 323 | 324 | const buildRequire = template(` 325 | var IMPORT_NAME = require(SOURCE); 326 | `); 327 | 328 | // TODO: template doesn't work for import. 329 | const buildImport = ({IMPORT_NAME, SOURCE}) => 330 | t.importDeclaration( 331 | [t.importDefaultSpecifier(IMPORT_NAME)], SOURCE 332 | ); 333 | 334 | return { 335 | visitor: { 336 | JSXAttribute(path, state) { 337 | if (state[BAIL_OUT]) { 338 | return; 339 | } 340 | 341 | if (path.get("name").node.name !== "className") { 342 | return; 343 | } 344 | 345 | if (!state.cssModuleId) { 346 | state.cssModuleId = path.scope.generateUidIdentifier(ROOT_CSSNAMES_IDENTIFIER); 347 | } 348 | 349 | updateJSXClassName(path.get("value"), state.cssModuleId); 350 | }, 351 | 352 | CallExpression(path, state) { 353 | if (state[BAIL_OUT]) { 354 | return; 355 | } 356 | 357 | const isCreateElementCall = matchesPatterns( 358 | path.get("callee"), 359 | ["React.createElement", "_react2.default.createElement"] 360 | ); 361 | 362 | if (!isCreateElementCall) { 363 | return; 364 | } 365 | 366 | if (!state.cssModuleId) { 367 | state.cssModuleId = path.scope.generateUidIdentifier(ROOT_CSSNAMES_IDENTIFIER); 368 | } 369 | 370 | const updateProperty = (property) => { 371 | if (property.node.key.name === "className") { 372 | updateClassName(property.get("value"), state.cssModuleId); 373 | } 374 | }; 375 | 376 | const argument = path.get("arguments")[1]; 377 | if (t.isNullLiteral(argument)) { 378 | return; 379 | } else if (t.isCallExpression(argument)) { 380 | argument.get("arguments").forEach((arg) => { 381 | if (t.isObjectExpression(arg)) { 382 | arg.get("properties").forEach(updateProperty); 383 | } 384 | }); 385 | } else if (t.isObjectExpression(argument)) { 386 | argument.get("properties").forEach(updateProperty); 387 | } else if (t.isIdentifier(argument)) { 388 | replaceIdentifier(argument, state.cssModuleId); 389 | } else { 390 | logOnce("CallExpression Visitor", argument.node, path); 391 | } 392 | }, 393 | 394 | Program: { 395 | enter(path, state:State) { 396 | if (state.opts.log) { 397 | logOnce = LogOnceImplementation; 398 | } 399 | 400 | if (!state.opts.path || new RegExp(state.opts.path).test(state.file.opts.filename)) { 401 | // detect if this is likely compiled source 402 | if (path.scope.getBinding("_interopRequireDefault")) { 403 | state.transformingOutput = true; 404 | state.cssModuleId = path.scope.generateUidIdentifier(ROOT_CSSNAMES_IDENTIFIER); 405 | } 406 | } else { 407 | state[BAIL_OUT] = true; 408 | } 409 | }, 410 | 411 | exit(path, state:State) { 412 | if (state[BAIL_OUT]) { 413 | return; 414 | } 415 | 416 | if (state.cssModuleId) { 417 | const importOpts = { 418 | IMPORT_NAME: state.cssModuleId, 419 | SOURCE: t.stringLiteral(join( 420 | process.env.NODE_ENV === "test" ? "" : process.cwd(), 421 | state.opts.cssmodule 422 | )) 423 | }; 424 | 425 | const firstChild = path.get("body")[0]; 426 | const {leadingComments} = firstChild.node; 427 | delete firstChild.node.leadingComments; 428 | 429 | // currently we’re using the heuristic if the module system is using 430 | // commonjs then we'll export as commonjs 431 | path.get("body")[0].insertBefore( 432 | state.opts.modules === "commonjs" || state.transformingOutput 433 | ? buildRequire(importOpts) 434 | : buildImport(importOpts) 435 | ); 436 | path.get("body")[0].node.leadingComments = leadingComments; 437 | } 438 | } 439 | } 440 | } 441 | }; 442 | }; 443 | 444 | --------------------------------------------------------------------------------