Merge pull request #85 from xile611/master

Add a new option `importPathFormatter` to format the path of css files

Author: michalkvasnicak

src/index.js

@@ -10,6 +10,16 @@ const defaultOptions = {
     generateScopedName: '[name]__[local]___[hash:base64:5]'
 };
 
+function updateStyleSheetPath(pathStringLiteral, importPathFormatter) {
+    if (!importPathFormatter) { return pathStringLiteral; }
+
+    return {
+        ...pathStringLiteral,
+        value: importPathFormatter(pathStringLiteral.value)
+    };
+}
+
+
 function findExpressionStatementChild(path, t) {
     const parent = path.parentPath;
     if (!parent) {
@@ -113,6 +123,7 @@ export default function transformCssModules({ types: t }) {
             // this is not a css-require-ook config
             delete currentConfig.extractCss;
             delete currentConfig.keepImport;
+            delete currentConfig.importPathFormatter;
 
             // match file extensions, speeds up transform by creating one
             // RegExp ahead of execution time
@@ -139,6 +150,9 @@ export default function transformCssModules({ types: t }) {
             Object.keys(requireHooksOptions).forEach(key => {
                 // skip undefined options
                 if (currentConfig[key] === undefined) {
+                    if (key === 'importPathFormatter' && thisPluginOptions && thisPluginOptions[key]) {
+                        thisPluginOptions[key] = requireHooksOptions[key](thisPluginOptions[key]);
+                    }
                     return;
                 }
 
@@ -191,7 +205,7 @@ export default function transformCssModules({ types: t }) {
                             t.expressionStatement(
                               t.callExpression(
                                 t.identifier('require'),
-                                [t.stringLiteral(value)]
+                                [updateStyleSheetPath(t.stringLiteral(value), thisPluginOptions.importPathFormatter)]
                               )
                             ),
                             varDeclaration
@@ -227,7 +241,7 @@ export default function transformCssModules({ types: t }) {
                                 t.expressionStatement(
                                 t.callExpression(
                                     t.identifier('require'),
-                                    [t.stringLiteral(stylesheetPath)]
+                                    [updateStyleSheetPath(t.stringLiteral(stylesheetPath), thisPluginOptions.importPathFormatter)]
                                 )
                               )
                             );

src/options_resolvers/importPathFormatter.js

@@ -0,0 +1,23 @@
+import { isFunction, isModulePath, requireLocalFileOrNodeModule } from '../utils';
+
+/**
+ * Resolves importPathFormatter option
+ *
+ * @param {String|Function} value
+ * @returns {Function}
+ */
+export default function importPathFormatter(value/* , currentConfig */) {
+    if (isFunction(value)) {
+        return value;
+    } else if (isModulePath(value)) {
+        const requiredOption = requireLocalFileOrNodeModule(value);
+
+        if (!isFunction(requiredOption)) {
+            throw new Error(`Configuration file for 'importPathFormatter' is not exporting a function`);
+        }
+
+        return requiredOption;
+    }
+
+    throw new Error(`Configuration 'importPathFormatter' is not a function nor a valid module path`);
+}

src/options_resolvers/index.js

@@ -13,3 +13,4 @@ export { default as processorOpts } from './processorOpts';
 export { default as rootDir } from './rootDir';
 export { default as resolve } from './resolve';
 export { default as use } from './use';
+export { default as importPathFormatter } from './importPathFormatter';

test/index.spec.js

@@ -109,12 +109,13 @@ describe('babel-plugin-css-modules-transform', () => {
     });
 
     it('should write a multiple css files using import', () => {
-        expect(transform('fixtures/import.js', {
+        expect(transform(`${__dirname}/fixtures/import.js`, {
             extractCss: {
                 dir: `${__dirname}/output/`,
-                filename: '[name].css',
-                relativeRoot: `${__dirname}`
-            }
+                filename: '[path]/[name].css',
+                relativeRoot: __dirname
+            },
+            extensions: ['.scss', '.css']
         }).code).to.be.equal(readExpected('fixtures/import.expected.js'));
 
         expect(readExpected(`${__dirname}/output/parent.css`))