Skip to content

Commit a01e9da

Browse files
michalkvasnicakmichalkvasnicak
authored
Merge pull request #32 from GabeMedrash/feature/import-declaration
feature/import declaration (#31)
2 parents f50cc1e + c0cc8c9 commit a01e9da

File tree

4 files changed

+43
-33
lines changed

4 files changed

+43
-33
lines changed

‎package.json

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,18 @@
2929
"mkdirp": "^0.5.1"
3030
},
3131
"devDependencies": {
32-
"babel-cli": "^6.1.18",
33-
"babel-core": "^6.1.21",
34-
"babel-eslint": "^4.1.5",
35-
"babel-plugin-transform-es2015-destructuring": "^6.1.18",
36-
"babel-plugin-transform-es2015-modules-commonjs": "^6.1.18",
37-
"babel-plugin-transform-es2015-parameters": "^6.1.18",
38-
"babel-plugin-transform-es2015-spread": "^6.1.18",
39-
"babel-plugin-transform-export-extensions": "^6.1.18",
40-
"babel-plugin-transform-object-rest-spread": "^6.1.18",
41-
"babel-plugin-transform-strict-mode": "^6.1.18",
42-
"babel-preset-es2015": "^6.5.0",
32+
"babel-cli": "^6.22.2",
33+
"babel-core": "^6.22.1",
34+
"babel-eslint": "^7.1.1",
35+
"babel-plugin-transform-es2015-block-scoping": "^6.22.0",
36+
"babel-plugin-transform-es2015-destructuring": "^6.22.0",
37+
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
38+
"babel-plugin-transform-es2015-parameters": "^6.22.0",
39+
"babel-plugin-transform-es2015-spread": "^6.22.0",
40+
"babel-plugin-transform-export-extensions": "^6.22.0",
41+
"babel-plugin-transform-object-rest-spread": "^6.22.0",
42+
"babel-plugin-transform-strict-mode": "^6.22.0",
43+
"babel-preset-es2015": "^6.22.0",
4344
"chai": "^3.4.1",
4445
"eslint": "^1.9.0",
4546
"eslint-config-airbnb-lite": "^1.0.0",

‎src/index.js

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,18 @@ export default function transformCssModules({ types: t }) {
5151
return new RegExp(`(${extensionsPattern})$`, 'i');
5252
}
5353

54+
function buildClassNameToScopeNameMap(tokens) {
55+
/* eslint-disable new-cap */
56+
return t.ObjectExpression(
57+
Object.keys(tokens).map(token =>
58+
t.ObjectProperty(
59+
t.StringLiteral(token),
60+
t.StringLiteral(tokens[token])
61+
)
62+
)
63+
);
64+
}
65+
5466
return {
5567
visitor: {
5668
Program(path, state) {
@@ -106,18 +118,26 @@ export default function transformCssModules({ types: t }) {
106118
initialized = true;
107119
},
108120

109-
ImportDeclaration(path, { file }) {
110-
// this method is called between enter and exit, so we can map css to our state
111-
// it is then replaced with require call which will be handled in seconds pass by CallExpression
112-
// CallExpression will then replace it or remove depending on parent node (if is Program or not)
113-
const { value } = path.node.source;
121+
// import styles from './style.css';
122+
ImportDefaultSpecifier(path, { file }) {
123+
const { value } = path.parentPath.node.source;
114124

115125
if (matchExtensions.test(value)) {
116126
const requiringFile = file.opts.filename;
117-
requireCssFile(requiringFile, value);
127+
const tokens = requireCssFile(requiringFile, value);
128+
129+
path.parentPath.replaceWith(
130+
t.variableDeclaration('var', [
131+
t.variableDeclarator(
132+
t.identifier(path.node.local.name),
133+
buildClassNameToScopeNameMap(tokens)
134+
)
135+
]),
136+
);
118137
}
119138
},
120139

140+
// const styles = require('./styles.css');
121141
CallExpression(path, { file }) {
122142
const { callee: { name: calleeName }, arguments: args } = path.node;
123143

@@ -134,15 +154,7 @@ export default function transformCssModules({ types: t }) {
134154
// if parent expression is not a Program, replace expression with tokens
135155
// Otherwise remove require from file, we just want to get generated css for our output
136156
if (!t.isExpressionStatement(path.parent)) {
137-
/* eslint-disable new-cap */
138-
path.replaceWith(t.ObjectExpression(
139-
Object.keys(tokens).map(
140-
token => t.ObjectProperty(
141-
t.StringLiteral(token),
142-
t.StringLiteral(tokens[token])
143-
)
144-
)
145-
));
157+
path.replaceWith(buildClassNameToScopeNameMap(tokens));
146158
} else {
147159
path.remove();
148160
}

‎test/fixtures/import.expected.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
'use strict';
22

3-
var _styles = {
3+
var styles = {
44
'className': 'styles__className___385m0 parent__block___33Sxl child__line___3fweh'
55
};
6-
7-
var _styles2 = _interopRequireDefault(_styles);
8-
9-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

‎test/index.spec.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ describe('babel-plugin-css-modules-transform', () => {
1212
if (configuration && !('devMode' in configuration)) configuration.devMode = true;
1313

1414
return babel.transformFileSync(resolve(__dirname, path), {
15+
babelrc: false,
1516
plugins: [
17+
'transform-es2015-block-scoping',
1618
'transform-strict-mode',
1719
'transform-es2015-parameters',
1820
'transform-es2015-destructuring',
19-
'transform-es2015-modules-commonjs',
2021
'transform-object-rest-spread',
2122
'transform-es2015-spread',
2223
'transform-export-extensions',
@@ -34,10 +35,10 @@ describe('babel-plugin-css-modules-transform', () => {
3435

3536
return gulpBabel({
3637
plugins: [
38+
'transform-es2015-block-scoping',
3739
'transform-strict-mode',
3840
'transform-es2015-parameters',
3941
'transform-es2015-destructuring',
40-
'transform-es2015-modules-commonjs',
4142
'transform-object-rest-spread',
4243
'transform-es2015-spread',
4344
'transform-export-extensions',

0 commit comments

Comments
 (0)