feat: support module #422 (#424)

* feat: support module #422

* chore: update version

* test: change test files

* chore: file lint

* chore: code lint

* chore: updaate version 1.0.0

Co-authored-by: boiawang <zhengwang.z@alibaba-inc.com>

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

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-jsx-stylesheet",
-  "version": "0.6.11",
+  "version": "1.0.0",
   "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,9 +1,9 @@
-import jSXStylePlugin from '../index';
+import { mergeStylesFunctionString, getClassNameFunctionString, getStyleFunctionString } from '../constants';
 import syntaxJSX from 'babel-plugin-syntax-jsx';
 import { transform } from 'babel-core';
-import { mergeStylesFunctionString, getClassNameFunctionString, getStyleFunctionString } from '../constants';
+import jSXStylePlugin from '../index';
 
-function getTransfromCode(code, opts) {
+export default function getTransformCode(code, opts) {
   return transform(code, {
     plugins: [
       [jSXStylePlugin, opts],
@@ -14,7 +14,7 @@ function getTransfromCode(code, opts) {
 
 describe('jsx style plugin', () => {
   it('transform only one className to style as member', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -35,7 +35,7 @@ class App extends Component {
   });
 
   it('transform multiple classNames to style as array', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -56,7 +56,7 @@ class App extends Component {
   });
 
   it('transform array, object and expressions', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -92,7 +92,7 @@ class App extends Component {
   });
 
   it('combine one style and className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 import styles from './style.css';
@@ -115,7 +115,7 @@ class App extends Component {
   });
 
   it('combine inline style object and className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -140,7 +140,7 @@ class App extends Component {
   });
 
   it('combine multiple styles and className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 import styles from './style.css';
@@ -172,11 +172,11 @@ class App extends Component {
   }
 }`;
 
-    expect(getTransfromCode(code)).toBe(code);
+    expect(getTransformCode(code)).toBe(code);
   });
 
   it('transform scss file', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 
@@ -197,7 +197,7 @@ class App extends Component {
   });
 
   it('transform constant elements in render', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.css';
 
@@ -211,7 +211,7 @@ render(<div style={_styleSheet["header"]} />);`);
   });
 
   it('dont remove className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.css';
 
@@ -233,7 +233,7 @@ describe('test development env', () => {
   });
 
   it('transform constant element in development env', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.css';
 
@@ -253,7 +253,7 @@ render(<div __class="header" style={_styleSheet["header"]} />);`);
 
 describe('edge test', () => {
   it('transform class and style import same file', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.css';
 import styles from './app.css';
@@ -269,7 +269,7 @@ render(<div style={Object.assign({}, _styleSheet["header1"], styles.header)} />)
   });
 
   it('should transform two class files', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app1.css';
 import './app2.css';
@@ -287,7 +287,7 @@ render(<div style={Object.assign({}, _styleSheet["header1"], _styleSheet["header
   });
 
   it('should delete className attr when empty string', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import 'app.css'
 

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

@@ -0,0 +1,27 @@
+import syntaxJSX from 'babel-plugin-syntax-jsx';
+import { transform } from 'babel-core';
+import jSXStylePlugin from '../index';
+
+export default function getTransformCode(code, opts) {
+  return transform(code, {
+    plugins: [
+      [jSXStylePlugin, opts],
+      syntaxJSX
+    ]
+  }).code;
+}
+
+describe('css module', () => {
+  it('should transform css module', () => {
+    expect(getTransformCode(`
+  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/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) {