feat: support module #422

packages/babel-plugin-transform-jsx-stylesheet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-jsx-stylesheet",
-  "version": "0.6.11",
+  "version": "0.7.11",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js

@@ -1,16 +1,5 @@
-import jSXStylePlugin from '../index';
-import syntaxJSX from 'babel-plugin-syntax-jsx';
-import { transform } from 'babel-core';
 import { mergeStylesFunctionString, getClassNameFunctionString, getStyleFunctionString } from '../constants';
-
-function getTransfromCode(code, opts) {
-  return transform(code, {
-    plugins: [
-      [jSXStylePlugin, opts],
-      syntaxJSX
-    ]
-  }).code;
-}
+import getTransfromCode from '../getTransfromCode';
 
 describe('jsx style plugin', () => {
   it('transform only one className to style as member', () => {

packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/module.js

@@ -0,0 +1,16 @@
+import getTransfromCode from '../getTransfromCode';
+
+describe('css module', () => {
+    it('should transform css module', () => {
+      expect(getTransfromCode(`
+  import { createElement, render } from 'rax';
+  import styles from './app.css';
+
+  render(<div className={styles.header} />);
+  `)).toBe(`
+import { createElement, render } from 'rax';
+import styles from './app.css';
+
+render(<div style={styles.header} />);`);
+});
+});

packages/babel-plugin-transform-jsx-stylesheet/src/getTransfromCode.js

@@ -0,0 +1,13 @@
+import syntaxJSX from 'babel-plugin-syntax-jsx';
+import { transform } from 'babel-core';
+import jSXStylePlugin from './index';
+
+export default function getTransfromCode(code, opts) {
+  return transform(code, {
+    plugins: [
+      [jSXStylePlugin, opts],
+      syntaxJSX
+    ]
+  }).code;
+}
+

packages/babel-plugin-transform-jsx-stylesheet/src/index.js

@@ -34,9 +34,15 @@ export default function({ types: t, template }, opts = {}) {
       // className
       // className=""
       return [];
-    } else if (value.type === 'JSXExpressionContainer' && value.expression && typeof value.expression.value !== 'string') {
+    } else if (value.type === 'JSXExpressionContainer' &&
+                                      value.expression &&
+                                      typeof value.expression.value !== 'string'
+    ) {
       // className={{ container: true }}
       // className={['container wrapper', { scroll: false }]}
+      if (value.expression.type === 'MemberExpression') {
+        return [value.expression];
+      }
       return [t.callExpression(t.identifier(GET_STYLE_FUNC_NAME), [value.expression])];
     } else {
       // className="container"
@@ -102,11 +108,6 @@ export default function({ types: t, template }, opts = {}) {
           convertImport = true, // default to true
         } = opts;
 
-        const cssFileCount = file.get('cssFileCount') || 0;
-        if (cssFileCount < 1 && convertImport !== false) {
-          return;
-        }
-
         // Check if has "style"
         let hasStyleAttribute = false;
         let styleAttribute;
@@ -129,6 +130,16 @@ export default function({ types: t, template }, opts = {}) {
           }
         }
 
+        // like className={ x.xxx }
+        const isCssModule = hasClassName && classNameAttribute.value &&
+          classNameAttribute.value.type === 'JSXExpressionContainer' &&
+          classNameAttribute.value.expression.type === 'MemberExpression';
+
+        const cssFileCount = file.get('cssFileCount') || 0;
+        if (!isCssModule && cssFileCount < 1 && convertImport !== false) {
+          return;
+        }
+
         if (hasClassName) {
           // Dont remove className
           if (!retainClassName) {
@@ -149,6 +160,11 @@ export default function({ types: t, template }, opts = {}) {
             file.set('injectGetStyle', true);
           }
 
+          if (isCssModule) {
+            classNameAttribute.name.name = 'style';
+            file.set('injectGetStyle', false);
+          }
+
           const arrayExpression = getArrayExpression(classNameAttribute.value);
 
           if (arrayExpression.length === 0) {