From d94ae753bcddcedf0898d592e086e88727bb81ec Mon Sep 17 00:00:00 2001
From: biorz <ebiorz@gmail.com>
Date: Tue, 13 Sep 2022 18:40:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(jsx-to-stylesheet):=20=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E5=90=8C=E5=90=8D=20style=20=E6=96=87=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=90=8D=E5=86=B2=E7=AA=81=20(#12478)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(jsx-to-stylesheet): 引入同名 style 文件时变量冲突

* test(jsx-to-stylesheet): update snapshot

* fix(jsx-to-stylesheet): 引入三个及以上同名 style 文件报错
---
 .../__snapshots__/index.spec.js.snap          | 296 ++++++++++++++++--
 .../__tests__/index.spec.js                   | 218 +------------
 .../src/index.ts                              |   3 +-
 3 files changed, 292 insertions(+), 225 deletions(-)

diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/__snapshots__/index.spec.js.snap b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/__snapshots__/index.spec.js.snap
index 412e66e7fd76..c0e71c026081 100644
--- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`jsx style plugin Processing module style assignment When css module enable 1`] = `
 "import { createElement, Component } from 'rax';
-import appScssStyleSheet from \\"./app.scss\\";
+import _appScssStyleSheet from \\"./app.scss\\";
 import _styleSheetModuleStyle from './app.module.scss';
 
 function _getClassName() {
@@ -64,7 +64,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
+var _styleSheet = _mergeStyles([_appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
 
 class App extends Component {
   render() {
@@ -77,7 +77,7 @@ class App extends Component {
 
 exports[`jsx style plugin Processing module style conditional expression When css module enable 1`] = `
 "import { createElement, Component } from 'rax';
-import appScssStyleSheet from \\"./app.scss\\";
+import _appScssStyleSheet from \\"./app.scss\\";
 import _styleSheetModuleStyle from './app.module.scss';
 
 function _getClassName() {
@@ -139,7 +139,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
+var _styleSheet = _mergeStyles([_appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
 
 class App extends Component {
   render() {
@@ -152,7 +152,7 @@ class App extends Component {
 
 exports[`jsx style plugin Processing module style spread and assign When css module enable 1`] = `
 "import { createElement, Component } from 'rax';
-import appScssStyleSheet from \\"./app.scss\\";
+import _appScssStyleSheet from \\"./app.scss\\";
 import _styleSheetModuleStyle from './app.module.scss';
 
 function _getClassName() {
@@ -214,7 +214,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
+var _styleSheet = _mergeStyles([_appScssStyleSheet, \\"\\"], [_styleSheetModuleStyle, \\"styleSheet\\"]);
 
 class App extends Component {
   render() {
@@ -456,10 +456,30 @@ class App extends Component {
 }"
 `;
 
+exports[`jsx style plugin combine inline style object and className 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+
+function _mergeEleStyles() {
+  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
+}
+
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_mergeEleStyles(_styleSheet[\\"header\\"], {
+      height: 100
+    })} />;
+  }
+
+}"
+`;
+
 exports[`jsx style plugin combine multiple anonymous css file 1`] = `
 "import { createElement, Component } from 'rax';
-import app1CssStyleSheet from \\"./app1.css\\";
-import app2CssStyleSheet from \\"./app2.css\\";
+import _app1CssStyleSheet from \\"./app1.css\\";
+import _app2CssStyleSheet from \\"./app2.css\\";
 
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
@@ -481,7 +501,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([app1CssStyleSheet, \\"\\"], [app2CssStyleSheet, \\"\\"]);
+var _styleSheet = _mergeStyles([_app1CssStyleSheet, \\"\\"], [_app2CssStyleSheet, \\"\\"]);
 
 class App extends Component {
   render() {
@@ -493,9 +513,9 @@ class App extends Component {
 
 exports[`jsx style plugin combine multiple different extension style sources 1`] = `
 "import { createElement, render } from 'rax';
-import indexCssStyleSheet from \\"./index.css\\";
-import indexScssStyleSheet from \\"./index.scss\\";
-import indexLessStyleSheet from \\"../index.less\\";
+import _indexCssStyleSheet from \\"./index.css\\";
+import _indexScssStyleSheet from \\"./index.scss\\";
+import _indexLessStyleSheet from \\"../index.less\\";
 import styl from \\"./index.styl\\";
 
 function _mergeStyles() {
@@ -514,14 +534,14 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([indexCssStyleSheet, \\"\\"], [indexScssStyleSheet, \\"\\"], [indexLessStyleSheet, \\"\\"], [styl, \\"\\"]);
+var _styleSheet = _mergeStyles([_indexCssStyleSheet, \\"\\"], [_indexScssStyleSheet, \\"\\"], [_indexLessStyleSheet, \\"\\"], [styl, \\"\\"]);
 
 render(<div style={_styleSheet[\\"header\\"]} />);"
 `;
 
 exports[`jsx style plugin combine multiple styles and className 1`] = `
 "import { createElement, Component } from 'rax';
-import appCssStyleSheet from \\"./app.css\\";
+import _appCssStyleSheet from \\"./app.css\\";
 import style from \\"./style.css\\";
 
 function _mergeEleStyles() {
@@ -544,7 +564,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appCssStyleSheet, \\"\\"], [style, \\"\\"]);
+var _styleSheet = _mergeStyles([_appCssStyleSheet, \\"\\"], [style, \\"\\"]);
 
 class App extends Component {
   render() {
@@ -556,7 +576,7 @@ class App extends Component {
 
 exports[`jsx style plugin combine one style and className 1`] = `
 "import { createElement, Component } from 'rax';
-import appCssStyleSheet from \\"./app.css\\";
+import _appCssStyleSheet from \\"./app.css\\";
 import style from \\"./style.css\\";
 
 function _mergeEleStyles() {
@@ -579,7 +599,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appCssStyleSheet, \\"\\"], [style, \\"\\"]);
+var _styleSheet = _mergeStyles([_appCssStyleSheet, \\"\\"], [style, \\"\\"]);
 
 class App extends Component {
   render() {
@@ -591,8 +611,9 @@ class App extends Component {
 
 exports[`jsx style plugin combine the same filename style source 1`] = `
 "import { createElement, Component } from 'rax';
-import appCssStyleSheet from \\"./app.css\\";
-import appCssStyleSheet from \\"../app.css\\";
+import _appCssStyleSheet from \\"./app.css\\";
+import _appCssStyleSheet2 from \\"../a/app.css\\";
+import _appCssStyleSheet3 from \\"../b/app.css\\";
 
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
@@ -614,7 +635,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appCssStyleSheet, \\"\\"], [appCssStyleSheet, \\"\\"]);
+var _styleSheet = _mergeStyles([_appCssStyleSheet, \\"\\"], [_appCssStyleSheet2, \\"\\"], [_appCssStyleSheet3, \\"\\"]);
 
 class App extends Component {
   render() {
@@ -624,9 +645,70 @@ class App extends Component {
 }"
 `;
 
+exports[`jsx style plugin disableMultipleClassName and transform multiple className to multiple style 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div headerClassName=\\"header\\" style={_styleSheet[\\"container\\"]} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin enableMultipleClassName and transform error css value 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <StatusBar barStyle={\\"dark-content\\"} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin enableMultipleClassName and transform multiple className to multiple style 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_styleSheet[\\"container\\"]} headerStyle={_styleSheet[\\"header\\"]} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin enableMultipleClassName and transform multiple className to multiple style as array 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+
+function _mergeEleStyles() {
+  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
+}
+
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_mergeEleStyles(_styleSheet[\\"container\\"], {
+      color: \\"red\\"
+    })} headerStyle={_mergeEleStyles(_styleSheet[\\"header\\"], {
+      color: \\"green\\"
+    })} />;
+  }
+
+}"
+`;
+
 exports[`jsx style plugin merge stylesheet when css module disable 1`] = `
 "import { createElement, Component } from 'rax';
-import appScssStyleSheet from \\"./app.scss\\";
+import _appScssStyleSheet from \\"./app.scss\\";
 import styleSheet from \\"./app.module.scss\\";
 
 function _mergeEleStyles() {
@@ -649,7 +731,7 @@ function _mergeStyles() {
   return newTarget;
 }
 
-var _styleSheet = _mergeStyles([appScssStyleSheet, \\"\\"], [styleSheet, \\"\\"]);
+var _styleSheet = _mergeStyles([_appScssStyleSheet, \\"\\"], [styleSheet, \\"\\"]);
 
 class App extends Component {
   render() {
@@ -658,3 +740,173 @@ class App extends Component {
 
 }"
 `;
+
+exports[`jsx style plugin transform array, object and expressions 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+
+function _getClassName() {
+  var className = [];
+  var args = arguments[0];
+  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
+
+  if (type === 'string') {
+    args = args.trim();
+    args && className.push(args);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } else if (type === 'object') {
+    for (var k in args) {
+      k = k.trim();
+
+      if (k && args.hasOwnProperty(k) && args[k]) {
+        className.push(k);
+      }
+    }
+  }
+
+  return className.join(' ').trim();
+}
+
+function _getStyle(classNameExpression) {
+  var className = _getClassName(classNameExpression);
+
+  var classNameArr = className.split(/\\\\s+/);
+  var style = {};
+  classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
+  return style;
+}
+
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_styleSheet[\\"header\\"]}>
+      <div style={_getStyle({
+        active: props.isActive
+      })} />
+      <div style={_getStyle(['header1 header2', 'header3', {
+        active: props.isActive
+      }])} />
+      <div style={_getStyle(props.visible ? 'show' : 'hide')} />
+      <div style={_getStyle(getClassName())} />
+    </div>;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin transform constant elements in render 1`] = `
+"import { createElement, render } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+var _styleSheet = _appCssStyleSheet;
+render(<div style={_styleSheet[\\"header\\"]} />);"
+`;
+
+exports[`jsx style plugin transform less in render 1`] = `
+"import { createElement, render } from 'rax';
+import _appLessStyleSheet from \\"./app.less\\";
+var _styleSheet = _appLessStyleSheet;
+render(<div style={_styleSheet[\\"header\\"]} />);"
+`;
+
+exports[`jsx style plugin transform multiple classNames to style as array 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+
+function _mergeEleStyles() {
+  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
+}
+
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_mergeEleStyles(_styleSheet[\\"header1\\"], _styleSheet[\\"header2\\"])} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin transform only one className to style as member 1`] = `
+"import { createElement, Component } from 'rax';
+import _appCssStyleSheet from \\"./app.css\\";
+var _styleSheet = _appCssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_styleSheet[\\"header\\"]} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin transform scss file 1`] = `
+"import { createElement, Component } from 'rax';
+import _appScssStyleSheet from \\"./app.scss\\";
+var _styleSheet = _appScssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_styleSheet[\\"header\\"]} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin transform scss file with hyphen(-) in the filename 1`] = `
+"import { createElement, Component } from 'rax';
+import _appStyleScssStyleSheet from \\"./app-style.scss\\";
+var _styleSheet = _appStyleScssStyleSheet;
+
+class App extends Component {
+  render() {
+    return <div style={_styleSheet[\\"header\\"]} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin transform styleAttribute expression 1`] = `
+"import { createElement, render } from 'rax';
+import _appLessStyleSheet from \\"./app.less\\";
+
+function _mergeEleStyles() {
+  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
+}
+
+var _styleSheet = _appLessStyleSheet;
+render(<div style={_mergeEleStyles(_styleSheet[\\"header\\"], {
+  width: 100,
+  height: 100
+})} />);"
+`;
+
+exports[`jsx style plugin transform styleAttribute inline string and exsit classNameAttribute 1`] = `
+"import { createElement, render } from 'rax';
+import _appLessStyleSheet from \\"./app.less\\";
+
+function _mergeEleStyles() {
+  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
+}
+
+var _styleSheet = _appLessStyleSheet;
+render(<div style={_mergeEleStyles(_styleSheet[\\"header\\"], {
+  \\"width\\": 100,
+  \\"height\\": 100,
+  \\"backgroundColor\\": \\"rgba(0, 0, 0, 0.5)\\",
+  \\"borderWidth\\": 1,
+  \\"borderStyle\\": \\"solid\\",
+  \\"borderColor\\": \\"black\\"
+})} />);"
+`;
+
+exports[`jsx style plugin transform stylus in render 1`] = `
+"import { createElement, render } from 'rax';
+import _appStylStyleSheet from \\"./app.styl\\";
+var _styleSheet = _appStylStyleSheet;
+render(<div style={_styleSheet[\\"header\\"]} />);"
+`;
diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/index.spec.js b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/index.spec.js
index 09ef61b5d7ec..f7ec2350c4e2 100644
--- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/index.spec.js
+++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/__tests__/index.spec.js
@@ -3,44 +3,6 @@ import syntaxJSX from 'babel-plugin-syntax-jsx'
 
 import jSXStylePlugin from '../src/index'
 
-const getClassNameFunctionTemplate = `function _getClassName() {
-  var className = [];
-  var args = arguments[0];
-  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
-  if (type === 'string') {
-    args = args.trim();
-    args && className.push(args);
-  } else if (type === 'array') {
-    args.forEach(function (cls) {
-      cls = _getClassName(cls).trim();
-      cls && className.push(cls);
-    });
-  } else if (type === 'object') {
-    for (var k in args) {
-      k = k.trim();
-
-      if (k && args.hasOwnProperty(k) && args[k]) {
-        className.push(k);
-      }
-    }
-  }
-
-  return className.join(' ').trim();
-}`
-
-const getStyleFunctionTemplete = `function _getStyle(classNameExpression) {
-  var className = _getClassName(classNameExpression);\n
-  var classNameArr = className.split(/\\s+/);
-  var style = {};
-  classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
-  return style;
-}`
-
-const mergeEleStylesFunctionTemplate = `function _mergeEleStyles() {
-  return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
-}`
-
 describe('jsx style plugin', () => {
   function getTransfromCode (source, debug = false, options = {}) {
     const { enableCSSModule, enableMultipleClassName = false } = options
@@ -84,16 +46,7 @@ class App extends Component {
   render() {
     return <div className="header" />;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_styleSheet["header"]} />;
-  }
-
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('transform multiple classNames to style as array', () => {
@@ -105,19 +58,7 @@ class App extends Component {
   render() {
     return <div className="header1 header2" />;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-
-${mergeEleStylesFunctionTemplate}
-
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
-  }
-
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('transform array, object and expressions', () => {
@@ -134,30 +75,7 @@ class App extends Component {
       <div className={getClassName()} />
     </div>;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-
-${getClassNameFunctionTemplate}
-
-${getStyleFunctionTemplete}
-
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_styleSheet["header"]}>
-      <div style={_getStyle({
-        active: props.isActive
-      })} />
-      <div style={_getStyle(['header1 header2', 'header3', {
-        active: props.isActive
-      }])} />
-      <div style={_getStyle(props.visible ? 'show' : 'hide')} />
-      <div style={_getStyle(getClassName())} />
-    </div>;
-  }
-
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('combine multiple anonymous css file', () => {
@@ -175,7 +93,8 @@ class App extends Component {
   it('combine the same filename style source', () => {
     expect(getTransfromCode(`import { createElement, Component } from 'rax';
 import './app.css';
-import '../app.css';
+import '../a/app.css';
+import '../b/app.css';
 
 class App extends Component {
   render() {
@@ -207,20 +126,7 @@ class App extends Component {
       height: 100
     }} />;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-
-${mergeEleStylesFunctionTemplate}
-
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_mergeEleStyles(_styleSheet["header"], {
-      height: 100
-    })} />;
-  }\n
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('combine multiple styles and className', () => {
@@ -257,15 +163,7 @@ class App extends Component {
   render() {
     return <div className="header" />;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appScssStyleSheet from "./app.scss";
-var _styleSheet = appScssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_styleSheet["header"]} />;
-  }\n
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('transform scss file with hyphen(-) in the filename', () => {
@@ -277,15 +175,7 @@ class App extends Component {
   render() {
     return <div className="header" />;
   }
-}`)).toBe(`import { createElement, Component } from 'rax';
-import appStyleScssStyleSheet from "./app-style.scss";
-var _styleSheet = appStyleScssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_styleSheet["header"]} />;
-  }\n
-}`)
+}`)).toMatchSnapshot()
   })
 
   it('transform constant elements in render', () => {
@@ -294,10 +184,7 @@ import { createElement, render } from 'rax';
 import './app.css';
 
 render(<div className="header" />);
-`)).toBe(`import { createElement, render } from 'rax';
-import appCssStyleSheet from "./app.css";
-var _styleSheet = appCssStyleSheet;
-render(<div style={_styleSheet["header"]} />);`)
+`)).toMatchSnapshot()
   })
 
   it('transform stylus in render', () => {
@@ -306,10 +193,7 @@ import { createElement, render } from 'rax';
 import './app.styl';
 
 render(<div className="header" />);
-`)).toBe(`import { createElement, render } from 'rax';
-import appStylStyleSheet from "./app.styl";
-var _styleSheet = appStylStyleSheet;
-render(<div style={_styleSheet["header"]} />);`)
+`)).toMatchSnapshot()
   })
 
   it('transform less in render', () => {
@@ -318,10 +202,7 @@ import { createElement, render } from 'rax';
 import './app.less';
 
 render(<div className="header" />);
-`)).toBe(`import { createElement, render } from 'rax';
-import appLessStyleSheet from "./app.less";
-var _styleSheet = appLessStyleSheet;
-render(<div style={_styleSheet["header"]} />);`)
+`)).toMatchSnapshot()
   })
 
   it('combine multiple different extension style sources', () => {
@@ -341,16 +222,7 @@ import { createElement, render } from 'rax';
 import './app.less';
 
 render(<div className="header" style={{width: 100, height: 100}} />);
-`)).toBe(`import { createElement, render } from 'rax';
-import appLessStyleSheet from "./app.less";
-
-${mergeEleStylesFunctionTemplate}
-
-var _styleSheet = appLessStyleSheet;
-render(<div style={_mergeEleStyles(_styleSheet["header"], {
-  width: 100,
-  height: 100
-})} />);`)
+`)).toMatchSnapshot()
   })
   it('transform styleAttribute inline string', () => {
     expect(getTransfromCode(`
@@ -373,20 +245,7 @@ render(<div style={{
 import { createElement, render } from 'rax';
 import './app.less';
 render(<div className="header" style="width:100px;height:100px;background-color:rgba(0, 0, 0, 0.5);border: 1px solid;" />);
-`)).toBe(`import { createElement, render } from 'rax';
-import appLessStyleSheet from "./app.less";
-
-${mergeEleStylesFunctionTemplate}
-
-var _styleSheet = appLessStyleSheet;
-render(<div style={_mergeEleStyles(_styleSheet["header"], {
-  "width": 100,
-  "height": 100,
-  "backgroundColor": "rgba(0, 0, 0, 0.5)",
-  "borderWidth": 1,
-  "borderStyle": "solid",
-  "borderColor": "black"
-})} />);`)
+`)).toMatchSnapshot()
   })
 
   it('Provide a default stylesheet object when css module enable and import css module sheet only', () => {
@@ -497,16 +356,7 @@ class App extends Component {
   render() {
     return <div className="container" headerClassName="header" />;
   }
-}`, false, { enableMultipleClassName: false })).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div headerClassName="header" style={_styleSheet["container"]} />;
-  }
-
-}`)
+}`, false, { enableMultipleClassName: false })).toMatchSnapshot()
   })
 
   it('enableMultipleClassName and transform multiple className to multiple style', () => {
@@ -518,16 +368,7 @@ class App extends Component {
   render() {
     return <div className="container" headerClassName="header" />;
   }
-}`, false, { enableMultipleClassName: true })).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_styleSheet["container"]} headerStyle={_styleSheet["header"]} />;
-  }
-
-}`)
+}`, false, { enableMultipleClassName: true })).toMatchSnapshot()
   })
 
   it('enableMultipleClassName and transform multiple className to multiple style as array', () => {
@@ -539,23 +380,7 @@ class App extends Component {
   render() {
     return <div className="container" headerClassName="header" style={{ color: "red" }} headerStyle={{ color: "green" }} />;
   }
-}`, false, { enableMultipleClassName: true })).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-
-${mergeEleStylesFunctionTemplate}
-
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <div style={_mergeEleStyles(_styleSheet["container"], {
-      color: "red"
-    })} headerStyle={_mergeEleStyles(_styleSheet["header"], {
-      color: "green"
-    })} />;
-  }
-
-}`)
+}`, false, { enableMultipleClassName: true })).toMatchSnapshot()
   })
 
   it('enableMultipleClassName and transform error css value', () => {
@@ -567,15 +392,6 @@ class App extends Component {
   render() {
     return <StatusBar barStyle="dark-content" />;
   }
-}`, false, { enableMultipleClassName: true })).toBe(`import { createElement, Component } from 'rax';
-import appCssStyleSheet from "./app.css";
-var _styleSheet = appCssStyleSheet;
-
-class App extends Component {
-  render() {
-    return <StatusBar barStyle={"dark-content"} />;
-  }
-
-}`)
+}`, false, { enableMultipleClassName: true })).toMatchSnapshot()
   })
 })
diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts
index a387e69ca141..7205f4adb9b3 100644
--- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts
+++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts
@@ -399,8 +399,7 @@ function importDeclaration (astPath, state, t) {
         styleSheetIdentifierName = styleSheetName
       } else {
         styleSheetName = camelize(`${cssFileBaseName}${ext}_${NAME_SUFFIX}`)
-        const repeatName = styleSheetIdentifiers.find(identifier => identifier.name === styleSheetName)
-        styleSheetIdentifierName = repeatName ? styleSheetName + '1' : styleSheetName // fix repeat name
+        styleSheetIdentifierName = astPath.scope.generateUid(styleSheetName)
         // styleSheetIdentifierName = camelize(`${cssFileBaseName}${ext}_${NAME_SUFFIX}`)
       }
       const styleSheetIdentifier = t.identifier(styleSheetIdentifierName)