Skip to content

Commit 5622f66

Browse files
author
Supriya S
committed
add jsx resolution support
1 parent b52a84e commit 5622f66

File tree

6 files changed

+51
-21
lines changed

6 files changed

+51
-21
lines changed

.flowconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
[ignore]
22
<PROJECT_ROOT>/node_modules/config-chain/test/broken.json
3+
<PROJECT_ROOT>/npm/node_modules/config-chain/test/broken.json
34
<PROJECT_ROOT>/node_modules/conventional-changelog-core/test/fixtures/_malformation.json
45
<PROJECT_ROOT>/node_modules/npmconf/test/fixtures/package.json
56

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import classnames from 'classnames';
3+
import './table.css';
4+
5+
export default () => {
6+
var cname = classnames({'row': true});
7+
8+
return <div styleName={classnames('table')}>
9+
<div styleName={cname}>
10+
<div styleName='cell'>A2</div>
11+
<div styleName='cell'>B2</div>
12+
<div styleName='cell'>C2</div>
13+
</div>
14+
</div>;
15+
};

demo/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import ReactDom from 'react-dom';
33
import AnonymouseStyleResolution from './components/AnonymouseStyleResolution';
44
import NamedStyleResolution from './components/NamedStyleResolution';
55
import RuntimeStyleResolution from './components/RuntimeStyleResolution';
6+
import JSXExpressionStyleResolution from './components/JSXExpressionStyleResolution';
67

78
ReactDom.render(<div>
89
<AnonymouseStyleResolution />
910
<NamedStyleResolution />
11+
<JSXExpressionStyleResolution />
1012
<RuntimeStyleResolution />
1113
</div>, document.getElementById('main'));

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"scripts": {
5555
"build": "rm -fr ./dist && NODE_ENV=production babel ./src --out-dir ./dist --source-maps --copy-files && npm run build-helper",
5656
"build-helper": "mkdir -p ./dist/browser && NODE_ENV=production babel ./src/getClassName.js --out-file ./dist/browser/getClassName.js --source-maps --no-babelrc --plugins transform-es2015-modules-commonjs,transform-flow-strip-types --presets es2015",
57-
"lint": "eslint ./src && flow",
57+
"lint": "eslint ./src --fix && flow",
5858
"precommit": "npm run test && npm run lint",
5959
"test": " NODE_ENV=test mocha --require babel-core/register"
6060
},

src/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import optionsDefaults from './schemas/optionsDefaults';
1313
import createObjectExpression from './createObjectExpression';
1414
import requireCssModule from './requireCssModule';
1515
import resolveStringLiteral from './resolveStringLiteral';
16-
import resolveJSXExpression from './resolveJSXExpression';
16+
import resolveJsxExpression from './resolveJsxExpression';
1717
import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
1818

1919
const ajv = new Ajv({
@@ -211,8 +211,8 @@ export default ({
211211
}
212212
);
213213
} else if (t.isJSXExpressionContainer(attribute.value)) {
214-
if(t.isCallExpression(attribute.value.expression)) {
215-
resolveJSXExpression(
214+
if (t.isCallExpression(attribute.value.expression) || t.isIdentifier(attribute.value.expression)) {
215+
resolveJsxExpression(
216216
path,
217217
filenameMap[filename].styleModuleImportMap,
218218
attribute,
@@ -221,6 +221,7 @@ export default ({
221221
handleMissingStyleName
222222
}
223223
);
224+
224225
return;
225226
}
226227
if (!filenameMap[filename].importedHelperIndentifier) {

src/resolveJSXExpression.js

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// @flow
22

33
import {
4-
isJSXExpressionContainer,
54
isStringLiteral,
5+
isIdentifier,
66
isObjectExpression,
7-
JSXAttribute,
8-
stringLiteral
7+
isCallExpression,
8+
isVariableDeclarator,
9+
JSXAttribute
910
} from 'babel-types';
10-
import conditionalClassMerge from './conditionalClassMerge';
1111
import getClassName from './getClassName';
1212
import type {
1313
StyleModuleImportMapType,
@@ -27,28 +27,39 @@ export default (
2727
sourceAttribute: JSXAttribute,
2828
destinationName: string,
2929
options: OptionsType): void => {
30-
const callExpressionArguments = sourceAttribute.value.expression.arguments;
31-
32-
for (let argumentIndex in callExpressionArguments) {
33-
let argument = callExpressionArguments[argumentIndex];
34-
if(isStringLiteral(argument)) {
35-
callExpressionArguments[argumentIndex].value = getClassName(argument.value, styleModuleImportMap, options);
36-
} else if(isObjectExpression(argument)) {
37-
for (let propertyIndex in argument.properties){
38-
let property = argument.properties[propertyIndex];
39-
if(isStringLiteral(property.key)) {
40-
property.key.value = getClassName(property.key.value, styleModuleImportMap, options);
41-
}
30+
const jsxExpression = sourceAttribute.value.expression;
31+
const replaceCallArguments = function (callExpressionArguments) {
32+
for (const argument of callExpressionArguments) {
33+
if (isStringLiteral(argument)) {
34+
argument.value = getClassName(argument.value, styleModuleImportMap, options);
35+
} else if (isObjectExpression(argument)) {
36+
for (const property of argument.properties) {
37+
if (isStringLiteral(property.key)) {
38+
property.key.value = getClassName(property.key.value, styleModuleImportMap, options);
39+
}
4240
}
4341
}
42+
}
43+
};
44+
45+
if (isCallExpression(jsxExpression)) {
46+
replaceCallArguments(sourceAttribute.value.expression.arguments);
47+
} else if (isIdentifier(jsxExpression)) {
48+
const variableDeclaration = path.scope.getBinding(jsxExpression.name).path.node;
49+
50+
if (isVariableDeclarator(variableDeclaration)) {
51+
if (isCallExpression(variableDeclaration.init)) {
52+
replaceCallArguments(variableDeclaration.init.arguments);
53+
}
54+
}
4455
}
45-
4656

4757
const destinationAttribute = path.node.openingElement.attributes
4858
.find((attribute) => {
4959
return typeof attribute.name !== 'undefined' && attribute.name.name === destinationName;
5060
});
5161

62+
// the desination attribute cannot be already present on the Jsx
5263
if (destinationAttribute) {
5364
throw new Error('Destination Attribute cannot be present on JSX Element when using JSX Expressions');
5465
} else {

0 commit comments

Comments
 (0)