babel-plugin-react-cssmoduleify
Advanced tools
Comparing version 0.9.4 to 0.9.5
46
index.js
@@ -72,3 +72,3 @@ /** | ||
const isClassnamesIsh = (node) => { | ||
const isClassnames = (node, scope) => { | ||
const reClassnames = /classnames/i; | ||
@@ -80,21 +80,27 @@ | ||
if (node.callee.type === 'Identifier') { | ||
return reClassnames.test(node.callee.name); | ||
const identifierName = ( | ||
node.callee.type === 'Identifier' ? node.callee.name | ||
: node.callee.object ? node.callee.object.name | ||
: node.callee.type === 'SequenceExpression' ? node.callee.expressions[1].object.name | ||
: 'TODO' | ||
); | ||
if (!identifierName || identifierName === 'TODO') { | ||
return false; | ||
} | ||
let thing = node.callee; | ||
// babel does this stuff | ||
if (node.callee.type === 'SequenceExpression') { | ||
if (node.callee.expressions.length !== 2) return false; | ||
if (node.callee.expressions[0].value !== 0) return false; | ||
thing = node.callee.expressions[1]; | ||
const definition = scope.getBinding(identifierName); | ||
// follow the variable declaration to a require | ||
if (definition.path.node.type === 'VariableDeclarator') { | ||
const {init} = definition.path.node; | ||
if (init.type !== 'CallExpression') { | ||
return false; | ||
} | ||
if (/require|_interopRequireDefault/.test(init.callee.name)) { | ||
return reClassnames.test(init.arguments[0].name); | ||
} | ||
} | ||
if (thing.type === 'Identifier') { | ||
return reClassnames.test(thing.name); | ||
} else if (thing.type === 'MemberExpression') { | ||
return reClassnames.test(thing.object.name); | ||
} | ||
// TODO: track `import` statements | ||
return false; | ||
}; | ||
@@ -261,3 +267,4 @@ | ||
const handleProp = (prop, node, scope, file) => { | ||
if (prop.key.name !== 'className') return prop; | ||
// pick up className, activeClassName, hoverClassName, etc | ||
if (!/classname/i.test(prop.key.name)) return prop; | ||
@@ -276,3 +283,3 @@ if (prop.value.type === 'Identifier') { | ||
} | ||
else if (isClassnamesIsh(path.node.init)) { | ||
else if (isClassnames(path.node.init, scope)) { | ||
mutateClassnamesCall(path.node.init, scope); | ||
@@ -288,3 +295,3 @@ } | ||
} | ||
else if (isClassnamesIsh(prop.value)) { | ||
else if (isClassnames(prop.value, scope)) { | ||
mutateClassnamesCall(prop.value, scope); | ||
@@ -294,3 +301,2 @@ } | ||
return handleBinaryExpressionProp(prop, node, scope, file); | ||
return prop; | ||
} | ||
@@ -297,0 +303,0 @@ else if (prop.value.type === 'ConditionalExpression') { |
@@ -67,3 +67,3 @@ /** | ||
var isClassnamesIsh = function isClassnamesIsh(node) { | ||
var isClassnames = function isClassnames(node, scope) { | ||
var reClassnames = /classnames/i; | ||
@@ -75,21 +75,23 @@ | ||
if (node.callee.type === 'Identifier') { | ||
return reClassnames.test(node.callee.name); | ||
var identifierName = node.callee.type === 'Identifier' ? node.callee.name : node.callee.object ? node.callee.object.name : node.callee.type === 'SequenceExpression' ? node.callee.expressions[1].object.name : 'TODO'; | ||
if (!identifierName || identifierName === 'TODO') { | ||
return false; | ||
} | ||
var thing = node.callee; | ||
var definition = scope.getBinding(identifierName); | ||
// follow the variable declaration to a require | ||
if (definition.path.node.type === 'VariableDeclarator') { | ||
var init = definition.path.node.init; | ||
// babel does this stuff | ||
if (node.callee.type === 'SequenceExpression') { | ||
if (node.callee.expressions.length !== 2) return false; | ||
if (node.callee.expressions[0].value !== 0) return false; | ||
thing = node.callee.expressions[1]; | ||
if (init.type !== 'CallExpression') { | ||
return false; | ||
} | ||
if (/require|_interopRequireDefault/.test(init.callee.name)) { | ||
return reClassnames.test(init.arguments[0].name); | ||
} | ||
} | ||
if (thing.type === 'Identifier') { | ||
return reClassnames.test(thing.name); | ||
} else if (thing.type === 'MemberExpression') { | ||
return reClassnames.test(thing.object.name); | ||
} | ||
// TODO: track `import` statements | ||
return false; | ||
}; | ||
@@ -204,3 +206,4 @@ | ||
var handleProp = function handleProp(prop, node, scope, file) { | ||
if (prop.key.name !== 'className') return prop; | ||
// pick up className, activeClassName, hoverClassName, etc | ||
if (!/classname/i.test(prop.key.name)) return prop; | ||
@@ -219,3 +222,3 @@ if (prop.value.type === 'Identifier') { | ||
mutateStringPropertyToCSSModule(prop); | ||
} else if (isClassnamesIsh(path.node.init)) { | ||
} else if (isClassnames(path.node.init, scope)) { | ||
mutateClassnamesCall(path.node.init, scope); | ||
@@ -229,7 +232,6 @@ } | ||
mutateStringPropertyToCSSModule(prop); | ||
} else if (isClassnamesIsh(prop.value)) { | ||
} else if (isClassnames(prop.value, scope)) { | ||
mutateClassnamesCall(prop.value, scope); | ||
} else if (prop.value.type === 'BinaryExpression') { | ||
return handleBinaryExpressionProp(prop, node, scope, file); | ||
return prop; | ||
} else if (prop.value.type === 'ConditionalExpression') { | ||
@@ -236,0 +238,0 @@ prop.value.consequent = handleProp({ key: { name: 'className' }, |
{ | ||
"name": "babel-plugin-react-cssmoduleify", | ||
"version": "0.9.4", | ||
"version": "0.9.5", | ||
"description": "Babel plugin to transform traditional classNames to CSS Modules", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -43,5 +43,6 @@ # babel-plugin-react-cssmoduleify | ||
This works on both post-babel compiled JavaScript as well as the original | ||
source. The following example demonstrates the modifications on the babel output | ||
of a React component. | ||
This currently works on only the babel compiled JavaScript and not the original | ||
source. Adding support the original source would likely be fairly trivial. The | ||
following example demonstrates the modifications on the babel output of a | ||
React component. | ||
@@ -48,0 +49,0 @@ ### Before |
31344
639
230