Skip to content

Commit 0593f33

Browse files
author
Supriya S
committed
more changes to plugin
1 parent 7b35ed5 commit 0593f33

File tree

6 files changed

+106
-156
lines changed

6 files changed

+106
-156
lines changed

‎demo/src/components/JSXExpressionStyleResolution.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import './table.css';
55
export default () => {
66
var cname = classnames({'row': true});
77

8-
return <div styleName={classnames('table')}>
9-
<div styleName={cname}>
8+
return <div className={classnames('table')}>
9+
<div className={cname}>
1010
<div styleName='cell'>A2</div>
1111
<div styleName='cell'>B2</div>
1212
<div styleName='cell'>C2</div>

‎src/getClassName.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,10 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM
9797
if (!styleModuleMap[styleName]) {
9898
if (handleMissingStyleName === 'throw') {
9999
throw new Error('Could not resolve the styleName \'' + styleName + '\'.');
100-
}
101-
else if (handleMissingStyleName === 'warn') {
100+
} else if (handleMissingStyleName === 'warn') {
102101
// eslint-disable-next-line no-console
103102
console.warn('Could not resolve the styleName \'' + styleName + '\'.');
104-
}
105-
else if (handleMissingStyleName === 'retain') {
103+
} else if (handleMissingStyleName === 'retain') {
106104
return styleName;
107105
}
108106
}

‎src/index.js

Lines changed: 58 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ import ajvKeywords from 'ajv-keywords';
1010
import Ajv from 'ajv';
1111
import optionsSchema from './schemas/optionsSchema.json';
1212
import optionsDefaults from './schemas/optionsDefaults';
13-
import createObjectExpression from './createObjectExpression';
1413
import requireCssModule from './requireCssModule';
1514
import resolveStringLiteral from './resolveStringLiteral';
16-
import resolveJsxExpression from './resolveJsxExpression';
17-
import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
15+
import resolveClassnameCallExpression from './resolveClassnameCallExpression';
1816

1917
const ajv = new Ajv({
2018
// eslint-disable-next-line id-match
@@ -32,44 +30,44 @@ export default ({
3230
}) => {
3331
const filenameMap = {};
3432

35-
const setupFileForRuntimeResolution = (path, filename) => {
36-
const programPath = path.findParent((parentPath) => {
37-
return parentPath.isProgram();
38-
});
39-
40-
filenameMap[filename].importedHelperIndentifier = programPath.scope.generateUidIdentifier('getClassName');
41-
filenameMap[filename].styleModuleImportMapIdentifier = programPath.scope.generateUidIdentifier('styleModuleImportMap');
42-
43-
programPath.unshiftContainer(
44-
'body',
45-
t.importDeclaration(
46-
[
47-
t.importDefaultSpecifier(
48-
filenameMap[filename].importedHelperIndentifier
49-
)
50-
],
51-
t.stringLiteral('babel-plugin-react-css-modules/dist/browser/getClassName')
52-
)
53-
);
54-
55-
const firstNonImportDeclarationNode = programPath.get('body').find((node) => {
56-
return !t.isImportDeclaration(node);
57-
});
58-
59-
firstNonImportDeclarationNode.insertBefore(
60-
t.variableDeclaration(
61-
'const',
62-
[
63-
t.variableDeclarator(
64-
filenameMap[filename].styleModuleImportMapIdentifier,
65-
createObjectExpression(t, filenameMap[filename].styleModuleImportMap)
66-
)
67-
]
68-
)
69-
);
70-
// eslint-disable-next-line no-console
71-
// console.log('setting up', filename, util.inspect(filenameMap,{depth: 5}))
72-
};
33+
// const setupFileForRuntimeResolution = (path, filename) => {
34+
// const programPath = path.findParent((parentPath) => {
35+
// return parentPath.isProgram();
36+
// });
37+
38+
// filenameMap[filename].importedHelperIndentifier = programPath.scope.generateUidIdentifier('getClassName');
39+
// filenameMap[filename].styleModuleImportMapIdentifier = programPath.scope.generateUidIdentifier('styleModuleImportMap');
40+
41+
// programPath.unshiftContainer(
42+
// 'body',
43+
// t.importDeclaration(
44+
// [
45+
// t.importDefaultSpecifier(
46+
// filenameMap[filename].importedHelperIndentifier
47+
// )
48+
// ],
49+
// t.stringLiteral('babel-plugin-react-css-modules/dist/browser/getClassName')
50+
// )
51+
// );
52+
53+
// const firstNonImportDeclarationNode = programPath.get('body').find((node) => {
54+
// return !t.isImportDeclaration(node);
55+
// });
56+
57+
// firstNonImportDeclarationNode.insertBefore(
58+
// t.variableDeclaration(
59+
// 'const',
60+
// [
61+
// t.variableDeclarator(
62+
// filenameMap[filename].styleModuleImportMapIdentifier,
63+
// createObjectExpression(t, filenameMap[filename].styleModuleImportMap)
64+
// )
65+
// ]
66+
// )
67+
// );
68+
// // eslint-disable-next-line no-console
69+
// // console.log('setting up', filename, util.inspect(filenameMap,{depth: 5}))
70+
// };
7371

7472
const addWebpackHotModuleAccept = (path) => {
7573
const test = t.memberExpression(t.identifier('module'), t.identifier('hot'));
@@ -141,6 +139,22 @@ export default ({
141139
return {
142140
inherits: babelPluginJsxSyntax,
143141
visitor: {
142+
CallExpression (path: *, stats: *): void {
143+
const filename = stats.file.opts.filename;
144+
145+
const handleMissingStyleName = stats.opts && stats.opts.handleMissingStyleName || optionsDefaults.handleMissingStyleName;
146+
147+
if (t.isIdentifier(path.node.callee, {name: 'classnames'}) && !t.isJSXExpressionContainer(path.parentPath.node)) {
148+
resolveClassnameCallExpression(
149+
path,
150+
stats,
151+
filenameMap[filename].styleModuleImportMap,
152+
{
153+
handleMissingStyleName
154+
}
155+
);
156+
}
157+
},
144158
ImportDeclaration (path: *, stats: *): void {
145159
if (notForPlugin(path, stats)) {
146160
return;
@@ -210,35 +224,6 @@ export default ({
210224
handleMissingStyleName
211225
}
212226
);
213-
} else if (t.isJSXExpressionContainer(attribute.value)) {
214-
if (t.isCallExpression(attribute.value.expression) || t.isIdentifier(attribute.value.expression)) {
215-
resolveJsxExpression(
216-
path,
217-
stats,
218-
filenameMap[filename].styleModuleImportMap,
219-
attribute,
220-
destinationName,
221-
{
222-
handleMissingStyleName
223-
}
224-
);
225-
226-
return;
227-
}
228-
if (!filenameMap[filename].importedHelperIndentifier) {
229-
setupFileForRuntimeResolution(path, filename);
230-
}
231-
replaceJsxExpressionContainer(
232-
t,
233-
path,
234-
attribute,
235-
destinationName,
236-
filenameMap[filename].importedHelperIndentifier,
237-
filenameMap[filename].styleModuleImportMapIdentifier,
238-
{
239-
handleMissingStyleName
240-
}
241-
);
242227
}
243228
}
244229
},
@@ -256,16 +241,16 @@ export default ({
256241
styleModuleImportMap: {}
257242
};
258243

259-
if(stats.opts.defaultCssFile) {
244+
if (stats.opts.defaultCssFile) {
260245
filenameMap[filename] = {
261246
styleModuleImportMap: {
262-
"default": requireCssModule(resolve(stats.opts.defaultCssFile), {
247+
default: requireCssModule(resolve(stats.opts.defaultCssFile), {
263248
context: stats.opts.context,
264249
filetypes: stats.opts.filetypes || {},
265250
generateScopedName: stats.opts.generateScopedName
266251
})
267252
}
268-
}
253+
};
269254
}
270255
}
271256
}

‎src/requireCssModule.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ type FiletypesConfigurationType = {
2828
[key: string]: FiletypeOptionsType
2929
};
3030

31-
//Cache all tokens generated for each file
32-
var fileTokensCache = {};
31+
// Cache all tokens generated for each file
32+
const fileTokensCache = {};
3333

3434
const getFiletypeOptions = (cssSourceFilePath: string, filetypes: FiletypesConfigurationType): ?FiletypeOptionsType => {
3535
const extension = cssSourceFilePath.substr(cssSourceFilePath.lastIndexOf('.'));
@@ -97,7 +97,7 @@ type OptionsType = {|
9797
|};
9898

9999
export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMapType => {
100-
if(fileTokensCache[cssSourceFilePath]) {
100+
if (fileTokensCache[cssSourceFilePath]) {
101101
return fileTokensCache[cssSourceFilePath];
102102
}
103103
// eslint-disable-next-line prefer-const
@@ -139,5 +139,6 @@ export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMap
139139

140140
runner = postcss(plugins);
141141
fileTokensCache[cssSourceFilePath] = getTokens(runner, cssSourceFilePath, filetypeOptions);
142+
142143
return fileTokensCache[cssSourceFilePath];
143144
};

‎src/resolveClassnameCallExpression.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// @flow
2+
3+
import {
4+
isStringLiteral,
5+
isObjectExpression
6+
} from 'babel-types';
7+
import getClassName from './getClassName';
8+
import type {
9+
StyleModuleImportMapType,
10+
HandleMissingStyleNameOptionType
11+
} from './types';
12+
13+
type OptionsType = {|
14+
handleMissingStyleName: HandleMissingStyleNameOptionType
15+
|};
16+
17+
/**
18+
* Updates the className value of a JSX element using a provided styleName attribute.
19+
*/
20+
export default (
21+
path: *,
22+
stats: *,
23+
styleModuleImportMap: StyleModuleImportMapType,
24+
options: OptionsType): void => {
25+
const replaceCallArguments = function (callExpressionArguments) {
26+
for (const argument of callExpressionArguments) {
27+
if (isStringLiteral(argument)) {
28+
argument.value = getClassName(argument.value, styleModuleImportMap, options);
29+
} else if (isObjectExpression(argument)) {
30+
for (const property of argument.properties) {
31+
if (isStringLiteral(property.key)) {
32+
property.key.value = getClassName(property.key.value, styleModuleImportMap, options);
33+
}
34+
}
35+
}
36+
}
37+
};
38+
39+
replaceCallArguments(path.node.arguments);
40+
};

‎src/resolveJSXExpression.js

Lines changed: 0 additions & 74 deletions
This file was deleted.

0 commit comments

Comments
 (0)