babel-plugin-transform-react-jsx-to-rn-stylesheet 3.6.1 → 3.6.2-canary.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/__tests__/__snapshots__/index.spec.js.snap +83 -83
- package/package.json +10 -2
package/LICENSE
CHANGED
|
@@ -137,3 +137,24 @@ MIT (miniprogram-render):
|
|
|
137
137
|
The following files embed [miniprogram-render](https://github.com/Tencent/kbone) MIT:
|
|
138
138
|
`/packages/taro-plugin-http/src/runtime/Cookie.ts`
|
|
139
139
|
See `/LICENSE` for details of the license.
|
|
140
|
+
|
|
141
|
+
==================
|
|
142
|
+
|
|
143
|
+
MIT (stencil-ds-output-targets):
|
|
144
|
+
The following files embed [stencil-ds-output-targets](https://github.com/ionic-team/stencil-ds-output-targets/) MIT:
|
|
145
|
+
`/packages/taro-components-library-react/src/react-component-lib/utils/attachProps.ts`
|
|
146
|
+
`/packages/taro-components-library-react/src/react-component-lib/utils/case.ts`
|
|
147
|
+
`/packages/taro-components-library-react/src/react-component-lib/utils/dev.ts`
|
|
148
|
+
`/packages/taro-components-library-react/src/react-component-lib/utils/index.tsx`
|
|
149
|
+
`/packages/taro-components-library-react/src/react-component-lib/createComponent.tsx`
|
|
150
|
+
`/packages/taro-components-library-react/src/react-component-lib/createOverlayComponent.tsx`
|
|
151
|
+
`/packages/taro-components-library-react/src/react-component-lib/interfaces.ts`
|
|
152
|
+
`/packages/taro-components-library-vue3/src/vue-component-lib/utils.ts`
|
|
153
|
+
See `/LICENSE` for details of the license.
|
|
154
|
+
|
|
155
|
+
==================
|
|
156
|
+
|
|
157
|
+
MIT (stencil-vue2-output-target):
|
|
158
|
+
The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
|
|
159
|
+
`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
|
|
160
|
+
See `/LICENSE` for details of the license.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`jsx style plugin Processing module style assignment When css module enable 1`] = `
|
|
4
4
|
"import { createElement, Component } from 'rax';
|
|
5
|
-
import _appScssStyleSheet from
|
|
5
|
+
import _appScssStyleSheet from "./app.scss";
|
|
6
6
|
import _styleSheetModuleStyle from './app.module.scss';
|
|
7
7
|
|
|
8
8
|
function _getClassName() {
|
|
@@ -34,7 +34,7 @@ function _getClassName() {
|
|
|
34
34
|
function _getStyle(classNameExpression) {
|
|
35
35
|
var className = _getClassName(classNameExpression);
|
|
36
36
|
|
|
37
|
-
var classNameArr = className.split(
|
|
37
|
+
var classNameArr = className.split(/\\s+/);
|
|
38
38
|
var style = {};
|
|
39
39
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
40
40
|
return style;
|
|
@@ -64,7 +64,7 @@ function _mergeStyles() {
|
|
|
64
64
|
return newTarget;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
var _styleSheet = _mergeStyles([_appScssStyleSheet,
|
|
67
|
+
var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
|
|
68
68
|
|
|
69
69
|
class App extends Component {
|
|
70
70
|
render() {
|
|
@@ -77,7 +77,7 @@ class App extends Component {
|
|
|
77
77
|
|
|
78
78
|
exports[`jsx style plugin Processing module style conditional expression When css module enable 1`] = `
|
|
79
79
|
"import { createElement, Component } from 'rax';
|
|
80
|
-
import _appScssStyleSheet from
|
|
80
|
+
import _appScssStyleSheet from "./app.scss";
|
|
81
81
|
import _styleSheetModuleStyle from './app.module.scss';
|
|
82
82
|
|
|
83
83
|
function _getClassName() {
|
|
@@ -109,7 +109,7 @@ function _getClassName() {
|
|
|
109
109
|
function _getStyle(classNameExpression) {
|
|
110
110
|
var className = _getClassName(classNameExpression);
|
|
111
111
|
|
|
112
|
-
var classNameArr = className.split(
|
|
112
|
+
var classNameArr = className.split(/\\s+/);
|
|
113
113
|
var style = {};
|
|
114
114
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
115
115
|
return style;
|
|
@@ -139,7 +139,7 @@ function _mergeStyles() {
|
|
|
139
139
|
return newTarget;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
var _styleSheet = _mergeStyles([_appScssStyleSheet,
|
|
142
|
+
var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
|
|
143
143
|
|
|
144
144
|
class App extends Component {
|
|
145
145
|
render() {
|
|
@@ -152,7 +152,7 @@ class App extends Component {
|
|
|
152
152
|
|
|
153
153
|
exports[`jsx style plugin Processing module style spread and assign When css module enable 1`] = `
|
|
154
154
|
"import { createElement, Component } from 'rax';
|
|
155
|
-
import _appScssStyleSheet from
|
|
155
|
+
import _appScssStyleSheet from "./app.scss";
|
|
156
156
|
import _styleSheetModuleStyle from './app.module.scss';
|
|
157
157
|
|
|
158
158
|
function _getClassName() {
|
|
@@ -184,7 +184,7 @@ function _getClassName() {
|
|
|
184
184
|
function _getStyle(classNameExpression) {
|
|
185
185
|
var className = _getClassName(classNameExpression);
|
|
186
186
|
|
|
187
|
-
var classNameArr = className.split(
|
|
187
|
+
var classNameArr = className.split(/\\s+/);
|
|
188
188
|
var style = {};
|
|
189
189
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
190
190
|
return style;
|
|
@@ -214,7 +214,7 @@ function _mergeStyles() {
|
|
|
214
214
|
return newTarget;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
var _styleSheet = _mergeStyles([_appScssStyleSheet,
|
|
217
|
+
var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
|
|
218
218
|
|
|
219
219
|
class App extends Component {
|
|
220
220
|
render() {
|
|
@@ -261,7 +261,7 @@ function _getClassName() {
|
|
|
261
261
|
function _getStyle(classNameExpression) {
|
|
262
262
|
var className = _getClassName(classNameExpression);
|
|
263
263
|
|
|
264
|
-
var classNameArr = className.split(
|
|
264
|
+
var classNameArr = className.split(/\\s+/);
|
|
265
265
|
var style = {};
|
|
266
266
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
267
267
|
return style;
|
|
@@ -291,7 +291,7 @@ function _mergeStyles() {
|
|
|
291
291
|
return newTarget;
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
var _styleSheet = _mergeStyles([_styleSheetModuleStyle,
|
|
294
|
+
var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"]);
|
|
295
295
|
|
|
296
296
|
class App extends Component {
|
|
297
297
|
render() {
|
|
@@ -337,7 +337,7 @@ function _getClassName() {
|
|
|
337
337
|
function _getStyle(classNameExpression) {
|
|
338
338
|
var className = _getClassName(classNameExpression);
|
|
339
339
|
|
|
340
|
-
var classNameArr = className.split(
|
|
340
|
+
var classNameArr = className.split(/\\s+/);
|
|
341
341
|
var style = {};
|
|
342
342
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
343
343
|
return style;
|
|
@@ -369,7 +369,7 @@ function _mergeStyles() {
|
|
|
369
369
|
return newTarget;
|
|
370
370
|
}
|
|
371
371
|
|
|
372
|
-
var _styleSheet = _mergeStyles([_styleSheetModuleStyle,
|
|
372
|
+
var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"], [_styleSheet2ModuleStyle, "styleSheet2"]);
|
|
373
373
|
|
|
374
374
|
class App extends Component {
|
|
375
375
|
render() {
|
|
@@ -413,7 +413,7 @@ function _getClassName() {
|
|
|
413
413
|
function _getStyle(classNameExpression) {
|
|
414
414
|
var className = _getClassName(classNameExpression);
|
|
415
415
|
|
|
416
|
-
var classNameArr = className.split(
|
|
416
|
+
var classNameArr = className.split(/\\s+/);
|
|
417
417
|
var style = {};
|
|
418
418
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
419
419
|
return style;
|
|
@@ -443,13 +443,13 @@ function _mergeStyles() {
|
|
|
443
443
|
return newTarget;
|
|
444
444
|
}
|
|
445
445
|
|
|
446
|
-
var _styleSheet = _mergeStyles([_styleSheetModuleStyle,
|
|
446
|
+
var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"]);
|
|
447
447
|
|
|
448
448
|
class App extends Component {
|
|
449
449
|
render() {
|
|
450
450
|
return <div>
|
|
451
451
|
<div style={_getStyle(styleSheet.header)} />
|
|
452
|
-
<div style={_styleSheet[
|
|
452
|
+
<div style={_styleSheet["red"]} />
|
|
453
453
|
</div>;
|
|
454
454
|
}
|
|
455
455
|
|
|
@@ -458,7 +458,7 @@ class App extends Component {
|
|
|
458
458
|
|
|
459
459
|
exports[`jsx style plugin combine inline style object and className 1`] = `
|
|
460
460
|
"import { createElement, Component } from 'rax';
|
|
461
|
-
import _appCssStyleSheet from
|
|
461
|
+
import _appCssStyleSheet from "./app.css";
|
|
462
462
|
|
|
463
463
|
function _mergeEleStyles() {
|
|
464
464
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -468,7 +468,7 @@ var _styleSheet = _appCssStyleSheet;
|
|
|
468
468
|
|
|
469
469
|
class App extends Component {
|
|
470
470
|
render() {
|
|
471
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
471
|
+
return <div style={_mergeEleStyles(_styleSheet["header"], {
|
|
472
472
|
height: 100
|
|
473
473
|
})} />;
|
|
474
474
|
}
|
|
@@ -478,8 +478,8 @@ class App extends Component {
|
|
|
478
478
|
|
|
479
479
|
exports[`jsx style plugin combine multiple anonymous css file 1`] = `
|
|
480
480
|
"import { createElement, Component } from 'rax';
|
|
481
|
-
import _app1CssStyleSheet from
|
|
482
|
-
import _app2CssStyleSheet from
|
|
481
|
+
import _app1CssStyleSheet from "./app1.css";
|
|
482
|
+
import _app2CssStyleSheet from "./app2.css";
|
|
483
483
|
|
|
484
484
|
function _mergeEleStyles() {
|
|
485
485
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -501,11 +501,11 @@ function _mergeStyles() {
|
|
|
501
501
|
return newTarget;
|
|
502
502
|
}
|
|
503
503
|
|
|
504
|
-
var _styleSheet = _mergeStyles([_app1CssStyleSheet,
|
|
504
|
+
var _styleSheet = _mergeStyles([_app1CssStyleSheet, ""], [_app2CssStyleSheet, ""]);
|
|
505
505
|
|
|
506
506
|
class App extends Component {
|
|
507
507
|
render() {
|
|
508
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
508
|
+
return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
|
|
509
509
|
}
|
|
510
510
|
|
|
511
511
|
}"
|
|
@@ -513,10 +513,10 @@ class App extends Component {
|
|
|
513
513
|
|
|
514
514
|
exports[`jsx style plugin combine multiple different extension style sources 1`] = `
|
|
515
515
|
"import { createElement, render } from 'rax';
|
|
516
|
-
import _indexCssStyleSheet from
|
|
517
|
-
import _indexScssStyleSheet from
|
|
518
|
-
import _indexLessStyleSheet from
|
|
519
|
-
import styl from
|
|
516
|
+
import _indexCssStyleSheet from "./index.css";
|
|
517
|
+
import _indexScssStyleSheet from "./index.scss";
|
|
518
|
+
import _indexLessStyleSheet from "../index.less";
|
|
519
|
+
import styl from "./index.styl";
|
|
520
520
|
|
|
521
521
|
function _mergeStyles() {
|
|
522
522
|
var newTarget = {};
|
|
@@ -534,15 +534,15 @@ function _mergeStyles() {
|
|
|
534
534
|
return newTarget;
|
|
535
535
|
}
|
|
536
536
|
|
|
537
|
-
var _styleSheet = _mergeStyles([_indexCssStyleSheet,
|
|
537
|
+
var _styleSheet = _mergeStyles([_indexCssStyleSheet, ""], [_indexScssStyleSheet, ""], [_indexLessStyleSheet, ""], [styl, ""]);
|
|
538
538
|
|
|
539
|
-
render(<div style={_styleSheet[
|
|
539
|
+
render(<div style={_styleSheet["header"]} />);"
|
|
540
540
|
`;
|
|
541
541
|
|
|
542
542
|
exports[`jsx style plugin combine multiple styles and className 1`] = `
|
|
543
543
|
"import { createElement, Component } from 'rax';
|
|
544
|
-
import _appCssStyleSheet from
|
|
545
|
-
import style from
|
|
544
|
+
import _appCssStyleSheet from "./app.css";
|
|
545
|
+
import style from "./style.css";
|
|
546
546
|
|
|
547
547
|
function _mergeEleStyles() {
|
|
548
548
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -564,11 +564,11 @@ function _mergeStyles() {
|
|
|
564
564
|
return newTarget;
|
|
565
565
|
}
|
|
566
566
|
|
|
567
|
-
var _styleSheet = _mergeStyles([_appCssStyleSheet,
|
|
567
|
+
var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [style, ""]);
|
|
568
568
|
|
|
569
569
|
class App extends Component {
|
|
570
570
|
render() {
|
|
571
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
571
|
+
return <div style={_mergeEleStyles(_styleSheet["header2"], style.header1, style.header3)} />;
|
|
572
572
|
}
|
|
573
573
|
|
|
574
574
|
}"
|
|
@@ -576,8 +576,8 @@ class App extends Component {
|
|
|
576
576
|
|
|
577
577
|
exports[`jsx style plugin combine one style and className 1`] = `
|
|
578
578
|
"import { createElement, Component } from 'rax';
|
|
579
|
-
import _appCssStyleSheet from
|
|
580
|
-
import style from
|
|
579
|
+
import _appCssStyleSheet from "./app.css";
|
|
580
|
+
import style from "./style.css";
|
|
581
581
|
|
|
582
582
|
function _mergeEleStyles() {
|
|
583
583
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -599,11 +599,11 @@ function _mergeStyles() {
|
|
|
599
599
|
return newTarget;
|
|
600
600
|
}
|
|
601
601
|
|
|
602
|
-
var _styleSheet = _mergeStyles([_appCssStyleSheet,
|
|
602
|
+
var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [style, ""]);
|
|
603
603
|
|
|
604
604
|
class App extends Component {
|
|
605
605
|
render() {
|
|
606
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
606
|
+
return <div style={_mergeEleStyles(_styleSheet["header2"], style.header1)} />;
|
|
607
607
|
}
|
|
608
608
|
|
|
609
609
|
}"
|
|
@@ -611,9 +611,9 @@ class App extends Component {
|
|
|
611
611
|
|
|
612
612
|
exports[`jsx style plugin combine the same filename style source 1`] = `
|
|
613
613
|
"import { createElement, Component } from 'rax';
|
|
614
|
-
import _appCssStyleSheet from
|
|
615
|
-
import _appCssStyleSheet2 from
|
|
616
|
-
import _appCssStyleSheet3 from
|
|
614
|
+
import _appCssStyleSheet from "./app.css";
|
|
615
|
+
import _appCssStyleSheet2 from "../a/app.css";
|
|
616
|
+
import _appCssStyleSheet3 from "../b/app.css";
|
|
617
617
|
|
|
618
618
|
function _mergeEleStyles() {
|
|
619
619
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -635,11 +635,11 @@ function _mergeStyles() {
|
|
|
635
635
|
return newTarget;
|
|
636
636
|
}
|
|
637
637
|
|
|
638
|
-
var _styleSheet = _mergeStyles([_appCssStyleSheet,
|
|
638
|
+
var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [_appCssStyleSheet2, ""], [_appCssStyleSheet3, ""]);
|
|
639
639
|
|
|
640
640
|
class App extends Component {
|
|
641
641
|
render() {
|
|
642
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
642
|
+
return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
|
|
643
643
|
}
|
|
644
644
|
|
|
645
645
|
}"
|
|
@@ -647,12 +647,12 @@ class App extends Component {
|
|
|
647
647
|
|
|
648
648
|
exports[`jsx style plugin disableMultipleClassName and transform multiple className to multiple style 1`] = `
|
|
649
649
|
"import { createElement, Component } from 'rax';
|
|
650
|
-
import _appCssStyleSheet from
|
|
650
|
+
import _appCssStyleSheet from "./app.css";
|
|
651
651
|
var _styleSheet = _appCssStyleSheet;
|
|
652
652
|
|
|
653
653
|
class App extends Component {
|
|
654
654
|
render() {
|
|
655
|
-
return <div headerClassName
|
|
655
|
+
return <div headerClassName="header" style={_styleSheet["container"]} />;
|
|
656
656
|
}
|
|
657
657
|
|
|
658
658
|
}"
|
|
@@ -660,12 +660,12 @@ class App extends Component {
|
|
|
660
660
|
|
|
661
661
|
exports[`jsx style plugin enableMultipleClassName and transform error css value 1`] = `
|
|
662
662
|
"import { createElement, Component } from 'rax';
|
|
663
|
-
import _appCssStyleSheet from
|
|
663
|
+
import _appCssStyleSheet from "./app.css";
|
|
664
664
|
var _styleSheet = _appCssStyleSheet;
|
|
665
665
|
|
|
666
666
|
class App extends Component {
|
|
667
667
|
render() {
|
|
668
|
-
return <StatusBar barStyle={
|
|
668
|
+
return <StatusBar barStyle={"dark-content"} />;
|
|
669
669
|
}
|
|
670
670
|
|
|
671
671
|
}"
|
|
@@ -673,12 +673,12 @@ class App extends Component {
|
|
|
673
673
|
|
|
674
674
|
exports[`jsx style plugin enableMultipleClassName and transform multiple className to multiple style 1`] = `
|
|
675
675
|
"import { createElement, Component } from 'rax';
|
|
676
|
-
import _appCssStyleSheet from
|
|
676
|
+
import _appCssStyleSheet from "./app.css";
|
|
677
677
|
var _styleSheet = _appCssStyleSheet;
|
|
678
678
|
|
|
679
679
|
class App extends Component {
|
|
680
680
|
render() {
|
|
681
|
-
return <div style={_styleSheet[
|
|
681
|
+
return <div style={_styleSheet["container"]} headerStyle={_styleSheet["header"]} />;
|
|
682
682
|
}
|
|
683
683
|
|
|
684
684
|
}"
|
|
@@ -686,7 +686,7 @@ class App extends Component {
|
|
|
686
686
|
|
|
687
687
|
exports[`jsx style plugin enableMultipleClassName and transform multiple className to multiple style as array 1`] = `
|
|
688
688
|
"import { createElement, Component } from 'rax';
|
|
689
|
-
import _appCssStyleSheet from
|
|
689
|
+
import _appCssStyleSheet from "./app.css";
|
|
690
690
|
|
|
691
691
|
function _mergeEleStyles() {
|
|
692
692
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -696,10 +696,10 @@ var _styleSheet = _appCssStyleSheet;
|
|
|
696
696
|
|
|
697
697
|
class App extends Component {
|
|
698
698
|
render() {
|
|
699
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
700
|
-
color:
|
|
701
|
-
})} headerStyle={_mergeEleStyles(_styleSheet[
|
|
702
|
-
color:
|
|
699
|
+
return <div style={_mergeEleStyles(_styleSheet["container"], {
|
|
700
|
+
color: "red"
|
|
701
|
+
})} headerStyle={_mergeEleStyles(_styleSheet["header"], {
|
|
702
|
+
color: "green"
|
|
703
703
|
})} />;
|
|
704
704
|
}
|
|
705
705
|
|
|
@@ -708,8 +708,8 @@ class App extends Component {
|
|
|
708
708
|
|
|
709
709
|
exports[`jsx style plugin merge stylesheet when css module disable 1`] = `
|
|
710
710
|
"import { createElement, Component } from 'rax';
|
|
711
|
-
import _appScssStyleSheet from
|
|
712
|
-
import styleSheet from
|
|
711
|
+
import _appScssStyleSheet from "./app.scss";
|
|
712
|
+
import styleSheet from "./app.module.scss";
|
|
713
713
|
|
|
714
714
|
function _mergeEleStyles() {
|
|
715
715
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -731,11 +731,11 @@ function _mergeStyles() {
|
|
|
731
731
|
return newTarget;
|
|
732
732
|
}
|
|
733
733
|
|
|
734
|
-
var _styleSheet = _mergeStyles([_appScssStyleSheet,
|
|
734
|
+
var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [styleSheet, ""]);
|
|
735
735
|
|
|
736
736
|
class App extends Component {
|
|
737
737
|
render() {
|
|
738
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
738
|
+
return <div style={_mergeEleStyles(_styleSheet["header"], styleSheet.red)} />;
|
|
739
739
|
}
|
|
740
740
|
|
|
741
741
|
}"
|
|
@@ -743,7 +743,7 @@ class App extends Component {
|
|
|
743
743
|
|
|
744
744
|
exports[`jsx style plugin transform array, object and expressions 1`] = `
|
|
745
745
|
"import { createElement, Component } from 'rax';
|
|
746
|
-
import _appCssStyleSheet from
|
|
746
|
+
import _appCssStyleSheet from "./app.css";
|
|
747
747
|
|
|
748
748
|
function _getClassName() {
|
|
749
749
|
var className = [];
|
|
@@ -774,7 +774,7 @@ function _getClassName() {
|
|
|
774
774
|
function _getStyle(classNameExpression) {
|
|
775
775
|
var className = _getClassName(classNameExpression);
|
|
776
776
|
|
|
777
|
-
var classNameArr = className.split(
|
|
777
|
+
var classNameArr = className.split(/\\s+/);
|
|
778
778
|
var style = {};
|
|
779
779
|
classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
|
|
780
780
|
return style;
|
|
@@ -784,7 +784,7 @@ var _styleSheet = _appCssStyleSheet;
|
|
|
784
784
|
|
|
785
785
|
class App extends Component {
|
|
786
786
|
render() {
|
|
787
|
-
return <div style={_styleSheet[
|
|
787
|
+
return <div style={_styleSheet["header"]}>
|
|
788
788
|
<div style={_getStyle({
|
|
789
789
|
active: props.isActive
|
|
790
790
|
})} />
|
|
@@ -801,21 +801,21 @@ class App extends Component {
|
|
|
801
801
|
|
|
802
802
|
exports[`jsx style plugin transform constant elements in render 1`] = `
|
|
803
803
|
"import { createElement, render } from 'rax';
|
|
804
|
-
import _appCssStyleSheet from
|
|
804
|
+
import _appCssStyleSheet from "./app.css";
|
|
805
805
|
var _styleSheet = _appCssStyleSheet;
|
|
806
|
-
render(<div style={_styleSheet[
|
|
806
|
+
render(<div style={_styleSheet["header"]} />);"
|
|
807
807
|
`;
|
|
808
808
|
|
|
809
809
|
exports[`jsx style plugin transform less in render 1`] = `
|
|
810
810
|
"import { createElement, render } from 'rax';
|
|
811
|
-
import _appLessStyleSheet from
|
|
811
|
+
import _appLessStyleSheet from "./app.less";
|
|
812
812
|
var _styleSheet = _appLessStyleSheet;
|
|
813
|
-
render(<div style={_styleSheet[
|
|
813
|
+
render(<div style={_styleSheet["header"]} />);"
|
|
814
814
|
`;
|
|
815
815
|
|
|
816
816
|
exports[`jsx style plugin transform multiple classNames to style as array 1`] = `
|
|
817
817
|
"import { createElement, Component } from 'rax';
|
|
818
|
-
import _appCssStyleSheet from
|
|
818
|
+
import _appCssStyleSheet from "./app.css";
|
|
819
819
|
|
|
820
820
|
function _mergeEleStyles() {
|
|
821
821
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
@@ -825,7 +825,7 @@ var _styleSheet = _appCssStyleSheet;
|
|
|
825
825
|
|
|
826
826
|
class App extends Component {
|
|
827
827
|
render() {
|
|
828
|
-
return <div style={_mergeEleStyles(_styleSheet[
|
|
828
|
+
return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
|
|
829
829
|
}
|
|
830
830
|
|
|
831
831
|
}"
|
|
@@ -833,12 +833,12 @@ class App extends Component {
|
|
|
833
833
|
|
|
834
834
|
exports[`jsx style plugin transform only one className to style as member 1`] = `
|
|
835
835
|
"import { createElement, Component } from 'rax';
|
|
836
|
-
import _appCssStyleSheet from
|
|
836
|
+
import _appCssStyleSheet from "./app.css";
|
|
837
837
|
var _styleSheet = _appCssStyleSheet;
|
|
838
838
|
|
|
839
839
|
class App extends Component {
|
|
840
840
|
render() {
|
|
841
|
-
return <div style={_styleSheet[
|
|
841
|
+
return <div style={_styleSheet["header"]} />;
|
|
842
842
|
}
|
|
843
843
|
|
|
844
844
|
}"
|
|
@@ -846,12 +846,12 @@ class App extends Component {
|
|
|
846
846
|
|
|
847
847
|
exports[`jsx style plugin transform scss file 1`] = `
|
|
848
848
|
"import { createElement, Component } from 'rax';
|
|
849
|
-
import _appScssStyleSheet from
|
|
849
|
+
import _appScssStyleSheet from "./app.scss";
|
|
850
850
|
var _styleSheet = _appScssStyleSheet;
|
|
851
851
|
|
|
852
852
|
class App extends Component {
|
|
853
853
|
render() {
|
|
854
|
-
return <div style={_styleSheet[
|
|
854
|
+
return <div style={_styleSheet["header"]} />;
|
|
855
855
|
}
|
|
856
856
|
|
|
857
857
|
}"
|
|
@@ -859,12 +859,12 @@ class App extends Component {
|
|
|
859
859
|
|
|
860
860
|
exports[`jsx style plugin transform scss file with hyphen(-) in the filename 1`] = `
|
|
861
861
|
"import { createElement, Component } from 'rax';
|
|
862
|
-
import _appStyleScssStyleSheet from
|
|
862
|
+
import _appStyleScssStyleSheet from "./app-style.scss";
|
|
863
863
|
var _styleSheet = _appStyleScssStyleSheet;
|
|
864
864
|
|
|
865
865
|
class App extends Component {
|
|
866
866
|
render() {
|
|
867
|
-
return <div style={_styleSheet[
|
|
867
|
+
return <div style={_styleSheet["header"]} />;
|
|
868
868
|
}
|
|
869
869
|
|
|
870
870
|
}"
|
|
@@ -872,14 +872,14 @@ class App extends Component {
|
|
|
872
872
|
|
|
873
873
|
exports[`jsx style plugin transform styleAttribute expression 1`] = `
|
|
874
874
|
"import { createElement, render } from 'rax';
|
|
875
|
-
import _appLessStyleSheet from
|
|
875
|
+
import _appLessStyleSheet from "./app.less";
|
|
876
876
|
|
|
877
877
|
function _mergeEleStyles() {
|
|
878
878
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
879
879
|
}
|
|
880
880
|
|
|
881
881
|
var _styleSheet = _appLessStyleSheet;
|
|
882
|
-
render(<div style={_mergeEleStyles(_styleSheet[
|
|
882
|
+
render(<div style={_mergeEleStyles(_styleSheet["header"], {
|
|
883
883
|
width: 100,
|
|
884
884
|
height: 100
|
|
885
885
|
})} />);"
|
|
@@ -887,26 +887,26 @@ render(<div style={_mergeEleStyles(_styleSheet[\\"header\\"], {
|
|
|
887
887
|
|
|
888
888
|
exports[`jsx style plugin transform styleAttribute inline string and exsit classNameAttribute 1`] = `
|
|
889
889
|
"import { createElement, render } from 'rax';
|
|
890
|
-
import _appLessStyleSheet from
|
|
890
|
+
import _appLessStyleSheet from "./app.less";
|
|
891
891
|
|
|
892
892
|
function _mergeEleStyles() {
|
|
893
893
|
return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
|
|
894
894
|
}
|
|
895
895
|
|
|
896
896
|
var _styleSheet = _appLessStyleSheet;
|
|
897
|
-
render(<div style={_mergeEleStyles(_styleSheet[
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
897
|
+
render(<div style={_mergeEleStyles(_styleSheet["header"], {
|
|
898
|
+
"width": 100,
|
|
899
|
+
"height": 100,
|
|
900
|
+
"backgroundColor": "rgba(0, 0, 0, 0.5)",
|
|
901
|
+
"borderWidth": 1,
|
|
902
|
+
"borderStyle": "solid",
|
|
903
|
+
"borderColor": "black"
|
|
904
904
|
})} />);"
|
|
905
905
|
`;
|
|
906
906
|
|
|
907
907
|
exports[`jsx style plugin transform stylus in render 1`] = `
|
|
908
908
|
"import { createElement, render } from 'rax';
|
|
909
|
-
import _appStylStyleSheet from
|
|
909
|
+
import _appStylStyleSheet from "./app.styl";
|
|
910
910
|
var _styleSheet = _appStylStyleSheet;
|
|
911
|
-
render(<div style={_styleSheet[
|
|
911
|
+
render(<div style={_styleSheet["header"]} />);"
|
|
912
912
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "babel-plugin-transform-react-jsx-to-rn-stylesheet",
|
|
3
|
-
"version": "3.6.1",
|
|
3
|
+
"version": "3.6.2-canary.1",
|
|
4
4
|
"description": "Transform stylesheet selector to style in JSX Elements.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -18,7 +18,15 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"camelize": "^1.0.0",
|
|
21
|
-
"taro-css-to-react-native": "3.6.1"
|
|
21
|
+
"taro-css-to-react-native": "3.6.2-canary.1"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@babel/core": "^7.14.5",
|
|
25
|
+
"babel-jest": "^29.5.0",
|
|
26
|
+
"jest": "^29.3.1",
|
|
27
|
+
"jest-cli": "^29.3.1",
|
|
28
|
+
"ts-jest": "^29.0.5",
|
|
29
|
+
"typescript": "^4.7.4"
|
|
22
30
|
},
|
|
23
31
|
"scripts": {
|
|
24
32
|
"test": "jest",
|