Skip to content

Commit 3b72b52

Browse files
func-starfunc-star
committed
feat: 添加 json 类型的 className 转换
1 parent 6040db0 commit 3b72b52

File tree

4 files changed

+96
-38
lines changed

4 files changed

+96
-38
lines changed

‎dist/index.js

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
88

99
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
1010

11-
var a1 = React.createElement("div", {
12-
className: "".concat(_MONAJS_IMPORT_CSS_.ssss, "")
13-
}, React.createElement("div", null, _events.default.on));
14-
var a2 = React.createElement("div", {
15-
className: "".concat(_MONAJS_IMPORT_CSS_.ssss, " ").concat(_MONAJS_IMPORT_CSS_.fds, " ").concat(_MONAJS_IMPORT_CSS_.ss, "")
16-
}, React.createElement("div", null, _events.default.on));
17-
var a3 = React.createElement("div", {
18-
className: "".concat(_MONAJS_IMPORT_CSS_.ssss, " ").concat(_MONAJS_IMPORT_CSS_.fds, "")
19-
}, React.createElement("div", null, _events.default.on));
20-
var b1 = React.createElement("div", {
21-
className: "".concat(_MONAJS_IMPORT_CSS_.aaa, "")
22-
}, React.createElement("div", null, _events.default.on)); // const b2 = (
11+
// const a1 = (
12+
// <div className='ssss'>
13+
// <div>{events.on}</div>
14+
// </div>
15+
// )
16+
//
17+
// const a2 = (
18+
// <div className='ssss fds ss'>
19+
// <div>{events.on}</div>
20+
// </div>
21+
// )
22+
//
23+
// const a3 = (
24+
// <div className='ssss fds '>
25+
// <div>{events.on}</div>
26+
// </div>
27+
// )
28+
//
29+
// const b1 = (
30+
// <div className={['aaa']}>
31+
// <div>{events.on}</div>
32+
// </div>
33+
// )
34+
//
35+
// const b2 = (
2336
// <div className={['aaa', 'bbb', { ccc: true }]}>
2437
// <div>{events.on}</div>
2538
// </div>
@@ -30,12 +43,18 @@ var b1 = React.createElement("div", {
3043
// <div>{events.on}</div>
3144
// </div>
3245
// )
33-
34-
var b4 = React.createElement("div", {
35-
className: "".concat(_MONAJS_IMPORT_CSS_.aaa, " ").concat(_MONAJS_IMPORT_CSS_.bbb, " ").concat(_events.default.on ? _MONAJS_IMPORT_CSS_.sssccc : "", " ").concat(true ? _MONAJS_IMPORT_CSS_.fff : "", " ").concat(false ? _MONAJS_IMPORT_CSS_.fdsfff : "", "")
36-
}, React.createElement("div", null, _events.default.on)); //
37-
// const c1 = (
38-
// <div className={{ 'sssccc': true }}>
46+
//
47+
// const b4 = (
48+
// <div className={['aaa', 'bbb', { 'sssccc': events.on, fff: true, 'fdsfff': false }]}>
3949
// <div>{events.on}</div>
4050
// </div>
41-
// )
51+
// )
52+
var c1 = React.createElement("div", {
53+
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc : "", "")
54+
}, React.createElement("div", null, _events.default.on));
55+
var c2 = React.createElement("div", {
56+
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc : "", " ").concat(_events.default ? _MONAJS_IMPORT_CSS_.fds : "", "")
57+
}, React.createElement("div", null, _events.default.on));
58+
var c3 = React.createElement("div", {
59+
className: ""
60+
}, React.createElement("div", null, _events.default.on));

‎example/index.jsx

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,38 @@ const b1 = (
2525
</div>
2626
)
2727

28-
// const b2 = (
29-
// <div className={['aaa', 'bbb', { ccc: true }]}>
30-
// <div>{events.on}</div>
31-
// </div>
32-
// )
33-
//
34-
// const b3 = (
35-
// <div className={['aaa', 'bbb', { 'sssccc': events.on }]}>
36-
// <div>{events.on}</div>
37-
// </div>
38-
// )
28+
const b2 = (
29+
<div className={['aaa', 'bbb', { ccc: true }]}>
30+
<div>{events.on}</div>
31+
</div>
32+
)
33+
34+
const b3 = (
35+
<div className={['aaa', 'bbb', { 'sssccc': events.on }]}>
36+
<div>{events.on}</div>
37+
</div>
38+
)
3939

4040
const b4 = (
4141
<div className={['aaa', 'bbb', { 'sssccc': events.on, fff: true, 'fdsfff': false }]}>
4242
<div>{events.on}</div>
4343
</div>
4444
)
45-
//
46-
// const c1 = (
47-
// <div className={{ 'sssccc': true }}>
48-
// <div>{events.on}</div>
49-
// </div>
50-
// )
45+
46+
const c1 = (
47+
<div className={{ 'sssccc': true }}>
48+
<div>{events.on}</div>
49+
</div>
50+
)
51+
52+
const c2 = (
53+
<div className={{ 'sssccc': true, fds: events }}>
54+
<div>{events.on}</div>
55+
</div>
56+
)
57+
58+
const c3 = (
59+
<div className={{}}>
60+
<div>{events.on}</div>
61+
</div>
62+
)

‎src/core/transform.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,28 @@ const transformArrayClassName = function (path, cssModules) {
5656
path.replaceWith(callExpression)
5757
}
5858

59+
const transformObjectClassName = function (path, cssModules) {
60+
let concatMemberExpression = null
61+
let callExpression = t.identifier('""')
62+
const { properties } = path.node
63+
properties.forEach((item, index) => {
64+
concatMemberExpression = t.memberExpression(callExpression, t.identifier('concat'))
65+
let { key, value } = item
66+
if (t.isStringLiteral(key)) {
67+
key = t.identifier(key.value)
68+
}
69+
const classExpression = t.memberExpression(cssModules, key)
70+
const conditionalExpression = t.conditionalExpression(value, classExpression, t.identifier('""'))
71+
callExpression = t.callExpression(concatMemberExpression, [
72+
conditionalExpression,
73+
t.identifier(index === properties.length - 1 ? '""' : '" "')
74+
])
75+
})
76+
path.replaceWith(callExpression)
77+
}
78+
5979
module.exports = {
6080
transformStringClassName,
61-
transformArrayClassName
81+
transformArrayClassName,
82+
transformObjectClassName
6283
}

‎src/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* @author yangxi | 599321378@qq.com
55
*/
66

7-
const { transformStringClassName, transformArrayClassName } = require('./core/transform')
7+
const { transformStringClassName, transformArrayClassName, transformObjectClassName } = require('./core/transform')
88
const { IMPORT_CSS_MODULE_NAME } = require('./core/constant')
99

1010
module.exports = function ({ types: t }) {
@@ -49,6 +49,12 @@ module.exports = function ({ types: t }) {
4949
if (path.parentPath.isJSXExpressionContainer() && path.parentPath.parentPath.isJSXAttribute()) {
5050
transformArrayClassName(path, cssModules)
5151
}
52+
},
53+
54+
ObjectExpression (path) {
55+
if (path.parentPath.isJSXExpressionContainer() && path.parentPath.parentPath.isJSXAttribute()) {
56+
transformObjectClassName(path, cssModules)
57+
}
5258
}
5359
})
5460
}

0 commit comments

Comments
 (0)