New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

babel-plugin-react-cssmoduleify

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-react-cssmoduleify - npm Package Compare versions

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc