Feat/add regexp support for filetype (#240)

* feat: use RegExp as including condition in filetype config

* test: add corresponding test cases.

* fix: do not use extension-style filrtype as RegExp pattern

* feat: modify the priority between RegExp pattern filetype and extension style filetype

* style: no continue

* style: for comment #2

Co-authored-by: super-cattle <xuxinhang4567#126.com>

Author: xuxinhang

src/conditionalClassMerge.js

@@ -12,6 +12,7 @@ export default (
   classNameExpression: any,
   styleNameExpression: any,
 ): any => {
+  // classNameExpression ? (classNameExpression + ' ') : '' + styleNameExpression
   return binaryExpression(
     '+',
     conditionalExpression(

src/findMatchedFiletype.js

@@ -0,0 +1,25 @@
+// @flow
+
+export default (sourceFilePath: string, filetypes: $ReadOnlyArray<string>): ?string => {
+  // Try to match as the RegExp pattern
+  for (const pattern of filetypes) {
+    if (!pattern.match(/^\.[a-z0-9A-Z]+?$/)) {
+      if (sourceFilePath.match(new RegExp(pattern))) {
+        return pattern;
+      }
+    }
+  }
+
+  const extensionDotIndex = sourceFilePath.lastIndexOf('.');
+
+  if (extensionDotIndex > -1) {
+    const extension = sourceFilePath.substr(extensionDotIndex);
+    const index = filetypes.indexOf(extension);
+
+    if (index > -1) {
+      return filetypes[index];
+    }
+  }
+
+  return null;
+};

src/getClassName.js

@@ -120,6 +120,7 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM
         return getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleName);
       }
 
+      // There is only one imported CSS module file.
       const styleModuleMap: StyleModuleMapType = styleModuleImportMap[styleModuleImportMapKeys[0]];
 
       if (!styleModuleMap[styleName]) {

src/index.js

@@ -15,6 +15,7 @@ import requireCssModule from './requireCssModule';
 import resolveStringLiteral from './resolveStringLiteral';
 import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
 import attributeNameExists from './attributeNameExists';
+import findMatchedFiletype from './findMatchedFiletype';
 import createSpreadMapper from './createSpreadMapper';
 import handleSpreadClassName from './handleSpreadClassName';
 
@@ -130,12 +131,12 @@ export default ({
     return filename.match(new RegExp(exclude));
   };
 
+  // decide whether the import statement should be processed as CSS module
   const notForPlugin = (path: *, stats: *) => {
     stats.opts.filetypes = stats.opts.filetypes || {};
 
-    const extension = path.node.source.value.lastIndexOf('.') > -1 ? path.node.source.value.substr(path.node.source.value.lastIndexOf('.')) : null;
-
-    if (extension !== '.css' && Object.keys(stats.opts.filetypes).indexOf(extension) < 0) {
+    // @HACK
+    if (path.node.source.value.indexOf('babel-plugin-react-css-modules') === 0) {
       return true;
     }
 
@@ -145,7 +146,10 @@ export default ({
       return true;
     }
 
-    return false;
+    const filetypeKeys = Object.keys(stats.opts.filetypes);
+    filetypeKeys.push('.css');
+
+    return !findMatchedFiletype(filename, filetypeKeys);
   };
 
   return {

src/requireCssModule.js

@@ -18,6 +18,7 @@ import type {
   GenerateScopedNameConfigurationType,
   StyleModuleMapType
 } from './types';
+import findMatchedFiletype from './findMatchedFiletype';
 import optionsDefaults from './schemas/optionsDefaults';
 
 type FiletypeOptionsType = {|
@@ -36,10 +37,9 @@ type OptionsType = {|
 |};
 
 const getFiletypeOptions = (cssSourceFilePath: string, filetypes: FiletypesConfigurationType): ?FiletypeOptionsType => {
-  const extension = cssSourceFilePath.substr(cssSourceFilePath.lastIndexOf('.'));
-  const filetype = filetypes ? filetypes[extension] : null;
+  const matchedKey = findMatchedFiletype(cssSourceFilePath, Object.keys(filetypes));
 
-  return filetype;
+  return matchedKey ? filetypes && filetypes[matchedKey] : null;
 };
 
 // eslint-disable-next-line flowtype/no-weak-types

src/resolveStringLiteral.js

@@ -41,7 +41,6 @@ export default (
     } else {
       throw new Error('Unexpected attribute value:' + destinationAttribute.value);
     }
-
     path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(sourceAttribute), 1);
   } else {
     sourceAttribute.name.name = destinationName;

test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.less

@@ -0,0 +1,3 @@
+@color: #f00;
+
+.a {background-color: @color;}

test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.md.less

@@ -0,0 +1,3 @@
+@color: #f00;
+
+.a {background-color: @color;}

test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/input.js

@@ -0,0 +1,3 @@
+import './bar.md.less';
+
+<div styleName="a"></div>;

test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/options.json

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "filetypes": {
+          "\\.md\\.less$": {
+            "syntax": "postcss-less"
+          }
+        }
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/output.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("./bar.md.less");
+
+<div className="bar-md__a"></div>;

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/bar.md.css

@@ -0,0 +1 @@
+.a {background-color: #f00;}

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/foo.css

@@ -0,0 +1 @@
+.a {background-color: #f00;}

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/input.js

@@ -0,0 +1,4 @@
+import barMd from './bar.md.css';
+import base from './styles/base.css';
+
+<div styleName="barMd.a base.b"></div>;

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/options.json

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "filetypes": {
+          "\\.md\\.less$": {
+            "syntax": "postcss-less"
+          },
+          "styles/.*?\\.css$": {}
+        }
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/output.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _barMd = _interopRequireDefault(require("./bar.md.css"));
+
+var _base = _interopRequireDefault(require("./styles/base.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+<div className="bar-md__a base__b"></div>;

test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/styles/base.css

@@ -0,0 +1 @@
+.b {background-color: #0f0;}