Skip to content

Commit d4caaa4

Browse files
anchengjiananchengjian
committed
init project
0 parents  commit d4caaa4

File tree

10 files changed

+556
-0
lines changed

10 files changed

+556
-0
lines changed

‎.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.{json,yml}]
12+
indent_size = 2

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
npm-debug.log
3+
yarn-error.log
4+
package-lock.json

‎.npmignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.npmignore
2+
.gitignore
3+
.editorconfig
4+
5+
node_modules/
6+
npm-debug.log
7+
yarn.lock
8+
9+
*.test.js
10+
.travis.yml

‎.travis.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
cache: yarn
3+
node_js:
4+
- stable
5+
- "6"
6+
- "4"

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018-present, 美团点评
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# PostCSS Wxss
2+
3+
[PostCSS] plugin for wxss.
4+
5+
专门为 wxss 格式化处理的的一个 postcss 插件，特别是在做 css 转 wxss 的时候好用到爆。
6+
7+
## 实现的功能
8+
- 清理 wxss 不支持的选择器。
9+
- 清理 wxss 不支持的注释。
10+
- 转换 rem 单位到 rpx。
11+
- 转换 Web 的标签选择器到小程序的 class 选择器。
12+
- style scoped（postcss插件部分）。
13+
14+
``` css
15+
/* 被清理 */
16+
* {
17+
margin: 100px
18+
}
19+
20+
/* 保持原样 */
21+
view {
22+
width: 50rpx;
23+
}
24+
.container {
25+
width: 7.5rem;
26+
font-size: .24rem
27+
}
28+
29+
/* Web 标签转换 */
30+
div {
31+
width: 50rpx;
32+
}
33+
ul li {
34+
width: 50rpx;
35+
}
36+
body {
37+
width: 50rpx;
38+
}
39+
```
40+
41+
``` css
42+
view {
43+
width: 50rpx;
44+
}
45+
.container {
46+
width: 50rpx;
47+
font-size: 24.4rpx
48+
}
49+
._div {
50+
width: 50rpx;
51+
}
52+
._ul ._li {
53+
width: 50rpx;
54+
}
55+
page {
56+
width: 50rpx;
57+
}
58+
```
59+
60+
## Usage
61+
62+
```js
63+
postcss([ require('postcss-mpvue-wxss') ])
64+
```
65+
66+
or use `.postcssrc.js`
67+
```
68+
// https://github.com/michael-ciniawsky/postcss-load-config
69+
const optopns = {}
70+
71+
module.exports = {
72+
"plugins": {
73+
// to edit target browsers: use "browserslist" field in package.json
74+
"postcss-mpvue-wxss": optopns
75+
}
76+
}
77+
```
78+
79+
with options:
80+
81+
```
82+
const replaceTagSelectorMap = require('postcss-mpvue-wxss/lib/wxmlTagMap')
83+
84+
const optopns = {
85+
cleanSelector: ['*'],
86+
remToRpx: 100,
87+
replaceTagSelector: Object.assign(replaceTagSelectorMap, {
88+
'*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
89+
})
90+
}
91+
```
92+
93+
更多详细文档请查阅 [postcss-mpvue-wxss](http://mpvue.com/build/postcss-mpvue-wxss)。
94+
95+
bug 或者交流建议等请反馈到 [mpvue/issues](https://github.com/Meituan-Dianping/mpvue/issues)。
96+
97+
See [PostCSS] docs for examples for your environment.
98+
99+
[PostCSS]: https://github.com/postcss/postcss
100+

‎index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// postcss-mpvuew-wxss.js
2+
// https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md
3+
4+
const postcss = require('postcss');
5+
const selectorParser = require('postcss-selector-parser');
6+
const replaceTagSelector = require('./lib/wxmlTagMap');
7+
8+
const defConfig = {
9+
cleanSelector: ['*'],
10+
remToRpx: 100,
11+
replaceTagSelector
12+
};
13+
14+
const remReg = /(\d*\.?\d+)rem/ig;
15+
const replaceRemOption = { fast: 'rem' };
16+
17+
module.exports = postcss.plugin('postcss-mpvue-wxss', function (options) {
18+
// Work with options here
19+
options = Object.assign({}, defConfig, options);
20+
21+
return function (root) {
22+
// Transform CSS AST here： root, result
23+
root.walkRules(rule => {
24+
const { selector } = rule || {};
25+
26+
// rem 转换 rpx
27+
rule.replaceValues(remReg, replaceRemOption, str => {
28+
return options.remToRpx * parseFloat(str) + 'rpx';
29+
});
30+
31+
rule.selector = selectorParser(function (selectors) {
32+
selectors.each(function (selector) {
33+
selector.each(function (n) {
34+
// 转换 tag 选择器
35+
if (n.type === 'tag') {
36+
const k = n.value;
37+
const v = options.replaceTagSelector[k];
38+
if (v) {
39+
n.value = v === 'replaceToClass' ? `._${k}` : v;
40+
}
41+
}
42+
43+
// 清理不支持的选择器
44+
if (options.cleanSelector.includes(n.value)) {
45+
// return n.value = 'view';
46+
return rule.remove()
47+
}
48+
})
49+
})
50+
}).process(selector).result;
51+
});
52+
53+
// 清理所有的注释
54+
root.walkComments(comment => {
55+
comment.remove();
56+
});
57+
};
58+
});

‎lib/wxmlTagMap.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// This map form [mpvue](https://github.com/Meituan-Dianping/mpvue) src/platforms/mpvue/compiler/codegen
2+
3+
module.exports = {
4+
'br': 'replaceToClass',
5+
'hr': 'replaceToClass',
6+
7+
'p': 'replaceToClass',
8+
'h1': 'replaceToClass',
9+
'h2': 'replaceToClass',
10+
'h3': 'replaceToClass',
11+
'h4': 'replaceToClass',
12+
'h5': 'replaceToClass',
13+
'h6': 'replaceToClass',
14+
'abbr': 'replaceToClass',
15+
'address': 'replaceToClass',
16+
'b': 'replaceToClass',
17+
'bdi': 'replaceToClass',
18+
'bdo': 'replaceToClass',
19+
'blockquote': 'replaceToClass',
20+
'cite': 'replaceToClass',
21+
'code': 'replaceToClass',
22+
'del': 'replaceToClass',
23+
'ins': 'replaceToClass',
24+
'dfn': 'replaceToClass',
25+
'em': 'replaceToClass',
26+
'strong': 'replaceToClass',
27+
'samp': 'replaceToClass',
28+
'kbd': 'replaceToClass',
29+
'var': 'replaceToClass',
30+
'i': 'replaceToClass',
31+
'mark': 'replaceToClass',
32+
'pre': 'replaceToClass',
33+
'q': 'replaceToClass',
34+
'ruby': 'replaceToClass',
35+
'rp': 'replaceToClass',
36+
'rt': 'replaceToClass',
37+
's': 'replaceToClass',
38+
'small': 'replaceToClass',
39+
'sub': 'replaceToClass',
40+
'sup': 'replaceToClass',
41+
'time': 'replaceToClass',
42+
'u': 'replaceToClass',
43+
'wbr': 'replaceToClass',
44+
45+
// 表单元素
46+
'form': 'replaceToClass',
47+
'input': 'replaceToClass',
48+
'textarea': 'replaceToClass',
49+
'button': 'replaceToClass',
50+
'select': 'replaceToClass',
51+
'option': 'replaceToClass',
52+
'optgroup': 'replaceToClass',
53+
'label': 'replaceToClass',
54+
'fieldset': 'replaceToClass',
55+
'datalist': 'replaceToClass',
56+
'legend': 'replaceToClass',
57+
'output': 'replaceToClass',
58+
59+
// 框架
60+
'iframe': 'replaceToClass',
61+
// 图像
62+
'img': 'replaceToClass',
63+
'canvas': 'replaceToClass',
64+
'figure': 'replaceToClass',
65+
'figcaption': 'replaceToClass',
66+
67+
// 音视频
68+
'audio': 'replaceToClass',
69+
'source': 'replaceToClass',
70+
'video': 'replaceToClass',
71+
'track': 'replaceToClass',
72+
// 链接
73+
'a': 'replaceToClass',
74+
'nav': 'replaceToClass',
75+
'link': 'replaceToClass',
76+
// 列表
77+
'ul': 'replaceToClass',
78+
'ol': 'replaceToClass',
79+
'li': 'replaceToClass',
80+
'dl': 'replaceToClass',
81+
'dt': 'replaceToClass',
82+
'dd': 'replaceToClass',
83+
'menu': 'replaceToClass',
84+
'command': 'replaceToClass',
85+
86+
// 表格table
87+
'table': 'replaceToClass',
88+
'caption': 'replaceToClass',
89+
'th': 'replaceToClass',
90+
'td': 'replaceToClass',
91+
'tr': 'replaceToClass',
92+
'thead': 'replaceToClass',
93+
'tbody': 'replaceToClass',
94+
'tfoot': 'replaceToClass',
95+
'col': 'replaceToClass',
96+
'colgroup': 'replaceToClass',
97+
// 样式 节
98+
'div': 'replaceToClass',
99+
'main': 'replaceToClass',
100+
'span': 'replaceToClass',
101+
'header': 'replaceToClass',
102+
'footer': 'replaceToClass',
103+
'section': 'replaceToClass',
104+
'article': 'replaceToClass',
105+
'aside': 'replaceToClass',
106+
'details': 'replaceToClass',
107+
'dialog': 'replaceToClass',
108+
'summary': 'replaceToClass',
109+
110+
'progress': 'replaceToClass',
111+
'meter': 'replaceToClass', // todo
112+
'head': 'replaceToClass', // todo
113+
'meta': 'replaceToClass', // todo
114+
'base': 'replaceToClass', // todo
115+
'map': 'replaceToClass', // TODO不是很恰当
116+
'area': 'replaceToClass', // j结合map使用
117+
118+
'script': 'replaceToClass',
119+
'noscript': 'replaceToClass',
120+
'embed': 'replaceToClass',
121+
'object': 'replaceToClass',
122+
'param': 'replaceToClass',
123+
'body': 'page',
124+
'html': 'page'
125+
}

‎package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "postcss-mpvue-wxss",
3+
"version": "1.0.0",
4+
"description": "PostCSS plugin for wxss",
5+
"keywords": [
6+
"postcss",
7+
"css",
8+
"postcss-plugin",
9+
"wxss"
10+
],
11+
"author": "anchengjian <anchengjian@gmail.com>",
12+
"license": "MIT",
13+
"repository": "git@github.com:mpvue/postcss-mpvue-wxss.git",
14+
"homepage": "https://github.com/mpvue/postcss-mpvue-wxss",
15+
"dependencies": {
16+
"postcss": "^6.0.8",
17+
"postcss-selector-parser": "^2.2.3"
18+
},
19+
"devDependencies": {
20+
"jest": "^20.0.0"
21+
},
22+
"scripts": {
23+
"test": "jest test"
24+
},
25+
"eslintConfig": {
26+
"env": {
27+
"jest": true
28+
}
29+
}
30+
}

0 commit comments

Comments
 (0)