add keepImport option, closes #65

Author: michalkvasnicak

README.md

@@ -175,6 +175,24 @@ To extract all files in a single directory, give an object:
 Note that `relativeRoot` is used to resolve relative directory names, available
 as `[path]` in `filename` pattern.
 
+## Keeping import
+
+To keep import statements you should set option `keepImport` to *true*. In this way, simultaneously with the converted values, the import will be described as unassigned call expression.
+
+```js
+// before
+const styles = require('./test.css');
+```
+
+```js
+// after
+require('./test.css');
+
+const styles = {
+    'someClass': 'Test__someClass___2Frqu'
+}
+```
+
 ## Alternatives
 
 - [babel-plugin-transform-postcss](https://github.com/wbyoung/babel-plugin-transform-postcss) - which supports async plugins and does not depend on `css-modules-require-hook`.

src/index.js

@@ -10,6 +10,21 @@ const defaultOptions = {
     generateScopedName: '[name]__[local]___[hash:base64:5]'
 };
 
+function findExpressionStatementChild(path, t) {
+    const parent = path.parentPath;
+    if (!parent) {
+        throw new Error('Invalid expression structure');
+    }
+    if (
+    t.isExpressionStatement(parent)
+    || t.isProgram(parent)
+    || t.isBlockStatement(parent)
+  ) {
+        return path;
+    }
+    return findExpressionStatementChild(parent, t);
+}
+
 export default function transformCssModules({ types: t }) {
     function resolveModulePath(filename) {
         const dir = dirname(filename);
@@ -91,6 +106,7 @@ export default function transformCssModules({ types: t }) {
             const currentConfig = { ...defaultOptions, ...thisPluginOptions };
             // this is not a css-require-ook config
             delete currentConfig.extractCss;
+            delete currentConfig.keepImport;
 
             // match file extensions, speeds up transform by creating one
             // RegExp ahead of execution time
@@ -154,14 +170,29 @@ export default function transformCssModules({ types: t }) {
                     const requiringFile = file.opts.filename;
                     const tokens = requireCssFile(requiringFile, value);
 
-                    path.parentPath.replaceWith(
-                        t.variableDeclaration('var', [
+                    const varDeclaration = t.variableDeclaration(
+                        'var',
+                        [
                             t.variableDeclarator(
                                 t.identifier(path.node.local.name),
                                 buildClassNameToScopeNameMap(tokens)
                             )
-                        ]),
+                        ]
                     );
+
+                    if (thisPluginOptions.keepImport === true) {
+                        path.parentPath.replaceWithMultiple([
+                            t.expressionStatement(
+                              t.callExpression(
+                                t.identifier('require'),
+                                [t.stringLiteral(value)]
+                              )
+                            ),
+                            varDeclaration
+                        ]);
+                    } else {
+                        path.parentPath.replaceWith(varDeclaration);
+                    }
                 }
             },
 
@@ -183,7 +214,19 @@ export default function transformCssModules({ types: t }) {
                     // Otherwise remove require from file, we just want to get generated css for our output
                     if (!t.isExpressionStatement(path.parent)) {
                         path.replaceWith(buildClassNameToScopeNameMap(tokens));
-                    } else {
+
+                        // Keeped import will places before closest expression statement child
+                        if (thisPluginOptions.keepImport === true) {
+                            findExpressionStatementChild(path, t).insertBefore(
+                                t.expressionStatement(
+                                t.callExpression(
+                                    t.identifier('require'),
+                                    [t.stringLiteral(stylesheetPath)]
+                                )
+                              )
+                            );
+                        }
+                    } else if (thisPluginOptions.keepImport !== true) {
                         path.remove();
                     }
                 }

test/fixtures/keepImport.expected.js

@@ -0,0 +1,16 @@
+'use strict';
+
+require('../styles.css');
+
+var css = {
+  'className': 'styles__className___385m0 parent__block___33Sxl child__line___3fweh'
+};
+
+require('../extensions.scss');
+
+var scss = {
+  'sassy': 'extensions__sassy___12Yag'
+};
+require('../extensions.scss');
+var foo = require('something-that-has-css-somewhere-in-the-name');
+var bar = require('something-that-has-scss-somewhere-in-the-name');

test/fixtures/keepImport.js

@@ -0,0 +1,5 @@
+import css from '../styles.css';
+var scss = require('../extensions.scss');
+require('../extensions.scss');
+var foo = require('something-that-has-css-somewhere-in-the-name');
+var bar = require('something-that-has-scss-somewhere-in-the-name');

test/index.spec.js

@@ -292,4 +292,13 @@ describe('babel-plugin-css-modules-transform', () => {
             'styles.css'
         ]);
     });
+
+    describe('keepImport option', () => {
+        it('keeps requires/imports', () => {
+            expect(transform('fixtures/keepImport.js', {
+                keepImport: true,
+                extensions: ['.scss', '.css']
+            }).code).to.be.equal(readExpected('fixtures/keepImport.expected.js'));
+        });
+    });
 });