Skip to content

Commit 39d0c20

Browse files
func-starfunc-star
committed
feat: 添加一个 cssModules 的空保护
1 parent 3b72b52 commit 39d0c20

File tree

7 files changed

+53
-53
lines changed

7 files changed

+53
-53
lines changed

‎.babelrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"@babel/preset-env"
55
],
66
"plugins": [
7-
"./"
7+
"./",
8+
"jsx-control-statements",
9+
"transform-object-assign",
10+
"@babel/plugin-proposal-class-properties"
811
]
912
}

‎dev/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ fs.readFile(path, { encoding: 'utf8' }, (err, data) => {
1414
require('@babel/preset-env')
1515
],
1616
plugins: [
17-
require('../src/index')
17+
require('../src/index'),
18+
require('babel-plugin-jsx-control-statements'),
19+
require('babel-plugin-transform-object-assign'),
20+
require('@babel/plugin-proposal-class-properties')
1821
]
1922
})
2023
fs.writeFile(outPath, result.code, 'utf8', (err) => {

‎dist/index.js

Lines changed: 23 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,52 +8,32 @@ 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-
// 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 = (
36-
// <div className={['aaa', 'bbb', { ccc: true }]}>
37-
// <div>{events.on}</div>
38-
// </div>
39-
// )
40-
//
41-
// const b3 = (
42-
// <div className={['aaa', 'bbb', { 'sssccc': events.on }]}>
43-
// <div>{events.on}</div>
44-
// </div>
45-
// )
46-
//
47-
// const b4 = (
48-
// <div className={['aaa', 'bbb', { 'sssccc': events.on, fff: true, 'fdsfff': false }]}>
49-
// <div>{events.on}</div>
50-
// </div>
51-
// )
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));
23+
var b2 = React.createElement("div", {
24+
className: "".concat(_MONAJS_IMPORT_CSS_.aaa || "", " ").concat(_MONAJS_IMPORT_CSS_.bbb || "", " ").concat(true ? _MONAJS_IMPORT_CSS_.ccc || "" : "", "")
25+
}, React.createElement("div", null, _events.default.on));
26+
var b3 = React.createElement("div", {
27+
className: "".concat(_MONAJS_IMPORT_CSS_.aaa || "", " ").concat(_MONAJS_IMPORT_CSS_.bbb || "", " ").concat(_events.default.on ? _MONAJS_IMPORT_CSS_.sssccc || "" : "", "")
28+
}, React.createElement("div", null, _events.default.on));
29+
var b4 = React.createElement("div", {
30+
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 || "" : "", "")
31+
}, React.createElement("div", null, _events.default.on));
5232
var c1 = React.createElement("div", {
53-
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc : "", "")
33+
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc || "" : "", "")
5434
}, React.createElement("div", null, _events.default.on));
5535
var c2 = React.createElement("div", {
56-
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc : "", " ").concat(_events.default ? _MONAJS_IMPORT_CSS_.fds : "", "")
36+
className: "".concat(true ? _MONAJS_IMPORT_CSS_.sssccc || "" : "", " ").concat(_events.default ? _MONAJS_IMPORT_CSS_.fds || "" : "", "")
5737
}, React.createElement("div", null, _events.default.on));
5838
var c3 = React.createElement("div", {
5939
className: ""

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "@monajs/babel-plugin-react-css-modules",
3-
"version": "0.0.1",
3+
"version": "0.2.0",
44
"description": "test",
55
"main": "src/index.js",
66
"scripts": {
77
"test": "mocha",
88
"babel": "rm -rf dist&&babel example --out-dir dist"
99
},
1010
"files": [
11-
"lib"
11+
"src"
1212
],
1313
"repository": {
1414
"type": "git",
@@ -29,6 +29,9 @@
2929
"@babel/core": "^7.3.3",
3030
"@babel/preset-env": "^7.3.1",
3131
"@babel/preset-react": "^7.0.0",
32+
"@babel/plugin-proposal-class-properties": "^7.1.0",
33+
"babel-plugin-jsx-control-statements": "^3.2.8",
34+
"babel-plugin-transform-object-assign": "^6.22.0",
3235
"chai": "^4.2.0",
3336
"mocha": "^6.0.0",
3437
"react": "^16.8.3"

‎src/core/transform.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
const t = require('@babel/types')
7-
const { getClassList } = require('./util')
7+
const { getClassList, optionCssModules } = require('./util')
88

99
// 转换 string 格式的 className
1010
const transformStringClassName = function (path, cssModules) {
@@ -15,7 +15,7 @@ const transformStringClassName = function (path, cssModules) {
1515
classList.forEach((v, i) => {
1616
concatMemberExpression = t.memberExpression(callExpression, t.identifier('concat'))
1717
callExpression = t.callExpression(concatMemberExpression, [
18-
t.memberExpression(cssModules, t.identifier(v)),
18+
optionCssModules(cssModules, t.identifier(v)),
1919
t.identifier(i === classList.length - 1 ? '""' : '" "')
2020
])
2121
})
@@ -33,7 +33,7 @@ const transformArrayClassName = function (path, cssModules) {
3333
if (t.isStringLiteral(v)) {
3434
concatMemberExpression = t.memberExpression(callExpression, t.identifier('concat'))
3535
callExpression = t.callExpression(concatMemberExpression, [
36-
t.memberExpression(cssModules, t.identifier(v.value)),
36+
optionCssModules(cssModules, t.identifier(v.value)),
3737
t.identifier(i === classList.length - 1 ? '""' : '" "')
3838
])
3939
} else if (t.isObjectExpression(v)) {
@@ -44,7 +44,7 @@ const transformArrayClassName = function (path, cssModules) {
4444
if (t.isStringLiteral(key)) {
4545
key = t.identifier(key.value)
4646
}
47-
const classExpression = t.memberExpression(cssModules, key)
47+
const classExpression = optionCssModules(cssModules, key)
4848
const conditionalExpression = t.conditionalExpression(value, classExpression, t.identifier('""'))
4949
callExpression = t.callExpression(concatMemberExpression, [
5050
conditionalExpression,
@@ -56,6 +56,7 @@ const transformArrayClassName = function (path, cssModules) {
5656
path.replaceWith(callExpression)
5757
}
5858

59+
// 转换 json 格式的 className
5960
const transformObjectClassName = function (path, cssModules) {
6061
let concatMemberExpression = null
6162
let callExpression = t.identifier('""')
@@ -66,7 +67,7 @@ const transformObjectClassName = function (path, cssModules) {
6667
if (t.isStringLiteral(key)) {
6768
key = t.identifier(key.value)
6869
}
69-
const classExpression = t.memberExpression(cssModules, key)
70+
const classExpression = optionCssModules(cssModules, key)
7071
const conditionalExpression = t.conditionalExpression(value, classExpression, t.identifier('""'))
7172
callExpression = t.callExpression(concatMemberExpression, [
7273
conditionalExpression,

‎src/core/util.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@
33
* @author yangxi | 599321378@qq.com
44
*/
55

6+
const t = require('@babel/types')
7+
68
const getClassList = function (classes) {
79
return classes.split(' ').filter(v => v)
810
}
911

12+
const optionCssModules = function (cssModules, identifier) {
13+
const classModulesExpression = t.memberExpression(cssModules, identifier)
14+
return t.logicalExpression('||', classModulesExpression, t.identifier('""'))
15+
}
16+
1017
module.exports = {
11-
getClassList
18+
getClassList,
19+
optionCssModules
1220
}

‎src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,14 @@ module.exports = function ({ types: t }) {
4545
}
4646
},
4747

48+
// 处理 className 为 array 的场景
4849
ArrayExpression (path) {
4950
if (path.parentPath.isJSXExpressionContainer() && path.parentPath.parentPath.isJSXAttribute()) {
5051
transformArrayClassName(path, cssModules)
5152
}
5253
},
5354

55+
// 处理 className 为 json 的场景
5456
ObjectExpression (path) {
5557
if (path.parentPath.isJSXExpressionContainer() && path.parentPath.parentPath.isJSXAttribute()) {
5658
transformObjectClassName(path, cssModules)

0 commit comments

Comments
 (0)