Skip to content

Commit b52a84e

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

File tree

4 files changed

+72
-1
lines changed

4 files changed

+72
-1
lines changed

demo/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
},
66
"dependencies": {
77
"babel-plugin-react-css-modules": "^2.1.3",
8+
"classnames": "^2.2.6",
89
"react": "^15.4.1",
910
"react-dom": "^15.4.1",
1011
"webpack": "^2.2.0-rc.3"

demo/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = {
2323
plugins: [
2424
'transform-react-jsx',
2525
[
26-
'react-css-modules',
26+
require('../dist/index.js').default,
2727
{
2828
context
2929
}

src/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +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';
1617
import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
1718

1819
const ajv = new Ajv({
@@ -210,6 +211,18 @@ export default ({
210211
}
211212
);
212213
} else if (t.isJSXExpressionContainer(attribute.value)) {
214+
if(t.isCallExpression(attribute.value.expression)) {
215+
resolveJSXExpression(
216+
path,
217+
filenameMap[filename].styleModuleImportMap,
218+
attribute,
219+
destinationName,
220+
{
221+
handleMissingStyleName
222+
}
223+
);
224+
return;
225+
}
213226
if (!filenameMap[filename].importedHelperIndentifier) {
214227
setupFileForRuntimeResolution(path, filename);
215228
}

src/resolveJSXExpression.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// @flow
2+
3+
import {
4+
isJSXExpressionContainer,
5+
isStringLiteral,
6+
isObjectExpression,
7+
JSXAttribute,
8+
stringLiteral
9+
} from 'babel-types';
10+
import conditionalClassMerge from './conditionalClassMerge';
11+
import getClassName from './getClassName';
12+
import type {
13+
StyleModuleImportMapType,
14+
HandleMissingStyleNameOptionType
15+
} from './types';
16+
17+
type OptionsType = {|
18+
handleMissingStyleName: HandleMissingStyleNameOptionType
19+
|};
20+
21+
/**
22+
* Updates the className value of a JSX element using a provided styleName attribute.
23+
*/
24+
export default (
25+
path: *,
26+
styleModuleImportMap: StyleModuleImportMapType,
27+
sourceAttribute: JSXAttribute,
28+
destinationName: string,
29+
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+
}
42+
}
43+
}
44+
}
45+
46+
47+
const destinationAttribute = path.node.openingElement.attributes
48+
.find((attribute) => {
49+
return typeof attribute.name !== 'undefined' && attribute.name.name === destinationName;
50+
});
51+
52+
if (destinationAttribute) {
53+
throw new Error('Destination Attribute cannot be present on JSX Element when using JSX Expressions');
54+
} else {
55+
sourceAttribute.name.name = destinationName;
56+
}
57+
};

0 commit comments

Comments
 (0)