stylelint-taro 4.0.0-beta.7 → 4.0.0-beta.71
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/README.md +175 -0
- package/lib/platform/constrant.js +1 -1
- package/lib/platform/harmony.js +21 -21
- package/lib/rules/no-nested-selectors/index.js +2 -1
- package/package.json +1 -1
- package/src/config.ts +3 -6
- package/src/platform/constrant.ts +2 -2
- package/src/platform/h5.ts +2 -2
- package/src/platform/harmony.ts +22 -22
- package/src/platform/miniprogram.ts +2 -2
- package/src/platform/rn.ts +1 -1
- package/src/rules/declaration-property-value-allowed-list/index.ts +3 -5
- package/src/rules/no-nested-selectors/index.ts +3 -3
- package/src/rules/property-allowed-list/index.ts +0 -2
- package/src/utils/index.ts +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@ yarn add -D stylelint-taro
|
|
|
12
12
|
|
|
13
13
|
## 使用
|
|
14
14
|
|
|
15
|
+
项目根目录添加文件 `.stylelintrc.js`
|
|
16
|
+
|
|
15
17
|
```js
|
|
16
18
|
// .stylelintrc.js
|
|
17
19
|
const mergeConfig = require('stylelint-taro/lib/config')
|
|
@@ -112,3 +114,176 @@ module.exports = mergeConfig(['harmony', 'rn'], {})
|
|
|
112
114
|
"stylelint.validate": ["css", "sass", "scss", "less", "postcss"]
|
|
113
115
|
}
|
|
114
116
|
```
|
|
117
|
+
|
|
118
|
+
## 样式支持情况
|
|
119
|
+
|
|
120
|
+
| 类型 | 举例合法值 | 备注 |
|
|
121
|
+
| ------ | ------------------------------------------------ | :-----------------: |
|
|
122
|
+
| Length | 10px、10vw、10vh、100%、10rem、calc(100% - 20px) | 1rem = 16px |
|
|
123
|
+
| Color | #f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green | 暂不支持 hsl 等方法 |
|
|
124
|
+
| Border | '1px solid #f00' | 符合 w3c 规范 |
|
|
125
|
+
|
|
126
|
+
### 通用属性
|
|
127
|
+
|
|
128
|
+
所有元素都支持的样式:
|
|
129
|
+
|
|
130
|
+
| 属性 | 可选值 / 单位 | 支持情况 |
|
|
131
|
+
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | :------: |
|
|
132
|
+
| flex | `flexGrow flexShrink flexBasis` | ✔️ |
|
|
133
|
+
| flex-grow | Number | ✔️ |
|
|
134
|
+
| flex-shrink | Number | ✔️ |
|
|
135
|
+
| flex-basis | Length | ✔️ |
|
|
136
|
+
| flex-direction | 'row','row-reverse','column','column-reverse' | ✔️ |
|
|
137
|
+
| justify-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
138
|
+
| align-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
139
|
+
| alignitems | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
140
|
+
| align-self | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
141
|
+
| flex-wrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
|
|
142
|
+
| position | 'relative', 'absolute' | ✔️ |
|
|
143
|
+
| left | Length | ✔️ |
|
|
144
|
+
| top | Length | ❌ |
|
|
145
|
+
| right | Length | ❌ |
|
|
146
|
+
| z-zndex | Number | ✔️ |
|
|
147
|
+
| bottom | Length | ✔️ |
|
|
148
|
+
| margin | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
|
|
149
|
+
| margin-top | Length | ✔️ |
|
|
150
|
+
| margin-right | Length | ✔️ |
|
|
151
|
+
| margin-bottom | Length | ✔️ |
|
|
152
|
+
| margin-left | Length | ✔️ |
|
|
153
|
+
| padding | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
|
|
154
|
+
| padding-top | Length | ✔️ |
|
|
155
|
+
| padding-right | Length | ✔️ |
|
|
156
|
+
| padding-bottom | Length | ✔️ |
|
|
157
|
+
| padding-left | Length | ✔️ |
|
|
158
|
+
| width | Length | ✔️ |
|
|
159
|
+
| height | Length | ✔️ |
|
|
160
|
+
| min-height | Length | ✔️ |
|
|
161
|
+
| min-width | Length | ✔️ |
|
|
162
|
+
| max-height | Length | ✔️ |
|
|
163
|
+
| max-eidth | Length | ✔️ |
|
|
164
|
+
| background | | ✔️ |
|
|
165
|
+
| background-color | Color | ✔️ |
|
|
166
|
+
| background-image | "src('xxx')", "linear-gradient(xxx)" 支持图片资源和线性渐变 " | ✔️ |
|
|
167
|
+
| background-size | 'cover', 'contain', Length(x y), Length(x) Length(y) | ✔️ |
|
|
168
|
+
| background-position | center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y) | ✔️ |
|
|
169
|
+
| background-repeat | 'repeat', 'no-repeat', 'repeat-x', 'repeat-y' | ✔️ |
|
|
170
|
+
| border | Border(可设置 4 个值,控制 4 个方向) | ✔️ |
|
|
171
|
+
| border-top | Border | ✔️ |
|
|
172
|
+
| border-left | Border | ✔️ |
|
|
173
|
+
| border-right | Border | ✔️ |
|
|
174
|
+
| border-bottom | Border | ✔️ |
|
|
175
|
+
| border-color | Color(可设置 4 个值,控制 4 个方向) | ✔️ |
|
|
176
|
+
| border-top-color | Color | ✔️ |
|
|
177
|
+
| border-right-color | Color | ✔️ |
|
|
178
|
+
| border-bottom-color | Color | ✔️ |
|
|
179
|
+
| border-left-color | Color | ✔️ |
|
|
180
|
+
| border-radius | Length(可设置 4 个值,控制 4 个方向) | ✔️ |
|
|
181
|
+
| border-top-left-radius | Length | ✔️ |
|
|
182
|
+
| border-top-right-radius | Length | ✔️ |
|
|
183
|
+
| border-bottom-left-radius | Length | ✔️ |
|
|
184
|
+
| border-bottom-right-radius | Length | ✔️ |
|
|
185
|
+
| border-style | 'dotted', 'dashed', 'solid' (4 个值,控制 4 个方向) | ✔️ |
|
|
186
|
+
| border-top-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
187
|
+
| border-right-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
188
|
+
| border-bottom-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
189
|
+
| border-left-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
190
|
+
| opacity | Number | ✔️ |
|
|
191
|
+
| display | 'flex', 'none', 'block' | ✔️ |
|
|
192
|
+
| display | 'inline-block', 'inline-flex', 'inline' | ❌ |
|
|
193
|
+
| overflow | 'hidden', 'visible' | ✔️ |
|
|
194
|
+
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
|
|
195
|
+
| transform-origin | Length Length | ✔️ |
|
|
196
|
+
| content | | ✔️ |
|
|
197
|
+
|
|
198
|
+
⚠️ 注意:
|
|
199
|
+
|
|
200
|
+
- `transform` 不允许连续出现 2 个同类型如:transform: translate(20px 20px) translate3d(10px, 30px, 30px)
|
|
201
|
+
- `display` 不支持**行内**
|
|
202
|
+
- 定位不支持 **bottom** 和 **right**
|
|
203
|
+
|
|
204
|
+
### 文本样式
|
|
205
|
+
|
|
206
|
+
| 属性 | 可选值 / 单位 | 支持情况 |
|
|
207
|
+
| ------------------ | ------------------------------------------------------- | :------: |
|
|
208
|
+
| font-size | Length | ✔️ |
|
|
209
|
+
| font-family | | ✔️ |
|
|
210
|
+
| font-style | 'normal', 'italic' | ✔️ |
|
|
211
|
+
| font-weight | 100~900, 'bold','bolder','light','lighter','normal' | ✔️ |
|
|
212
|
+
| line-height | 'XXpx' (需要指定具体指,不支持 Number) | ✔️ |
|
|
213
|
+
| text-align | 'center', 'left', 'right' | ✔️ |
|
|
214
|
+
| text-decoration | ('none', 'underline', 'line-through', 'overline') Color | ✔️ |
|
|
215
|
+
| text-overflow | 'ellipsis', 'clip' | ✔️ |
|
|
216
|
+
| color | Color | ✔️ |
|
|
217
|
+
| -webkit-line-clamp | Number | ✔️ |
|
|
218
|
+
|
|
219
|
+
⚠️ 注意:
|
|
220
|
+
|
|
221
|
+
- 文本样式 **仅对`<Text></Text>`节点生效**
|
|
222
|
+
- 文本样式 **不支持继承**
|
|
223
|
+
- `line-height`**不支持数值**
|
|
224
|
+
|
|
225
|
+
**以下两种情况是正确的对文本进行样式添加的案例:**
|
|
226
|
+
|
|
227
|
+
1.直接将样式添加在`<Text/>`上
|
|
228
|
+
|
|
229
|
+
```jsx
|
|
230
|
+
// ✅ 允许
|
|
231
|
+
<Text className="txt">hello</Text>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
2.样式添加到`<View/>`下是一个文本内容
|
|
235
|
+
|
|
236
|
+
```jsx
|
|
237
|
+
// ✅ 允许
|
|
238
|
+
<View className="txt">hello</View>
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
**错误案例:**
|
|
242
|
+
|
|
243
|
+
```jsx
|
|
244
|
+
// ❌ hello 父级没有添加文本样式,txt的文本属性无法继承下去
|
|
245
|
+
<View className="txt">
|
|
246
|
+
<Text>hello</Text>
|
|
247
|
+
</View>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
## CSS 选择器
|
|
251
|
+
|
|
252
|
+
### 通用选择器
|
|
253
|
+
|
|
254
|
+
注意点:
|
|
255
|
+
|
|
256
|
+
- 支持**类选择器**,
|
|
257
|
+
- 不支持**ID 选择器、标签选择器、属性选择器**
|
|
258
|
+
|
|
259
|
+
| 选择器 | 示例 | 示例说明 | 支持情况 |
|
|
260
|
+
| ------------------ | ------------------- | ------------------------------------------------------------ | :------: |
|
|
261
|
+
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ |
|
|
262
|
+
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ |
|
|
263
|
+
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ |
|
|
264
|
+
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ |
|
|
265
|
+
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ |
|
|
266
|
+
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ |
|
|
267
|
+
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ |
|
|
268
|
+
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ |
|
|
269
|
+
| \* | \* | 选择所有元素 | ❌ |
|
|
270
|
+
| element | p | 选择所有\<p>元素 | ❌ |
|
|
271
|
+
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ |
|
|
272
|
+
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ |
|
|
273
|
+
| ... | | 其他 | ❌ |
|
|
274
|
+
|
|
275
|
+
### 伪类
|
|
276
|
+
|
|
277
|
+
- 支持**before、after**,
|
|
278
|
+
|
|
279
|
+
| 选择器 | 示例 | 示例说明 | 支持情况 |
|
|
280
|
+
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :------: |
|
|
281
|
+
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ |
|
|
282
|
+
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ |
|
|
283
|
+
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ |
|
|
284
|
+
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ |
|
|
285
|
+
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ |
|
|
286
|
+
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ |
|
|
287
|
+
| :root | :root | 选择文档的根元素 | ❌ |
|
|
288
|
+
| :checked | input:checked | 选择每个选中的输入元素 | ❌ |
|
|
289
|
+
| ... | | 其他 | ❌ |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.BACKGROUND_IMAGE = exports.NUMBER = exports.LENGTH_REGEX_SPLIT = exports.LENGTH_REGEX = void 0;
|
|
4
|
-
exports.LENGTH_REGEX = /^-?\d+(\.\d+)?(px|vw|vh|%)?$/i;
|
|
4
|
+
exports.LENGTH_REGEX = /^-?\d+(\.\d+)?(px|rem|vw|vh|%)?$/i;
|
|
5
5
|
exports.LENGTH_REGEX_SPLIT = /^-?\d+(\.\d+)?(px|vw|vh|%)?(\s+-?\d+(\.\d+)?(px|vw|vh|%)?)*$/i;
|
|
6
6
|
exports.NUMBER = /^-?\d+(\.\d+)?$/;
|
|
7
7
|
exports.BACKGROUND_IMAGE = /(url\(|linear-gradient\()/;
|
package/lib/platform/harmony.js
CHANGED
|
@@ -5,37 +5,37 @@ const config = {
|
|
|
5
5
|
// 禁止的选择器集合
|
|
6
6
|
disAllowedSelectors: {
|
|
7
7
|
'selector-max-id': 0, // 允许的最大id选择器数量
|
|
8
|
-
'selector-max-combinators': 0, // 允许的最大组合选择器数量
|
|
9
8
|
'selector-max-type': 0, // 允许的最大类型选择器数量
|
|
10
9
|
'selector-max-attribute': 0, // 允许的最大属性选择器数量
|
|
11
10
|
'selector-max-universal': 0, // 允许的最大通配符选择器数量
|
|
12
|
-
'selector-pseudo-class-allowed-list': [], // 允许的伪类选择器
|
|
11
|
+
'selector-pseudo-class-allowed-list': ['before', 'after'], // 允许的伪类选择器
|
|
12
|
+
'selector-combinator-allowed-list': ['>', ' '], // 允许的组合选择器
|
|
13
13
|
},
|
|
14
14
|
// 支持的属性列表
|
|
15
15
|
supportedProperties: {
|
|
16
|
-
|
|
16
|
+
margin: [constrant_1.LENGTH_REGEX_SPLIT],
|
|
17
17
|
'margin-top': [constrant_1.LENGTH_REGEX],
|
|
18
18
|
'margin-right': [constrant_1.LENGTH_REGEX],
|
|
19
19
|
'margin-bottom': [constrant_1.LENGTH_REGEX],
|
|
20
20
|
'margin-left': [constrant_1.LENGTH_REGEX],
|
|
21
|
-
|
|
21
|
+
padding: [constrant_1.LENGTH_REGEX_SPLIT],
|
|
22
22
|
'padding-top': [constrant_1.LENGTH_REGEX],
|
|
23
23
|
'padding-right': [constrant_1.LENGTH_REGEX],
|
|
24
24
|
'padding-bottom': [constrant_1.LENGTH_REGEX],
|
|
25
25
|
'padding-left': [constrant_1.LENGTH_REGEX],
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
width: [constrant_1.LENGTH_REGEX],
|
|
27
|
+
height: [constrant_1.LENGTH_REGEX],
|
|
28
28
|
'min-width': [constrant_1.LENGTH_REGEX],
|
|
29
29
|
'min-height': [constrant_1.LENGTH_REGEX],
|
|
30
30
|
'max-width': [constrant_1.LENGTH_REGEX],
|
|
31
31
|
'max-height': [constrant_1.LENGTH_REGEX],
|
|
32
|
-
|
|
32
|
+
background: true,
|
|
33
33
|
'background-color': true,
|
|
34
34
|
'background-image': [constrant_1.BACKGROUND_IMAGE],
|
|
35
35
|
'background-size': ['cover', 'contain', constrant_1.LENGTH_REGEX_SPLIT],
|
|
36
36
|
'background-position': ['center', 'top', 'bottom', 'left', 'right', constrant_1.LENGTH_REGEX_SPLIT],
|
|
37
37
|
'background-repeat': ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'],
|
|
38
|
-
|
|
38
|
+
border: true,
|
|
39
39
|
'border-top': true,
|
|
40
40
|
'border-right': true,
|
|
41
41
|
'border-bottom': true,
|
|
@@ -66,12 +66,12 @@ const config = {
|
|
|
66
66
|
'font-weight': ['normal', 'bold', 'bolder', constrant_1.NUMBER],
|
|
67
67
|
'line-height': [constrant_1.LENGTH_REGEX],
|
|
68
68
|
'text-align': ['center', 'left', 'right'],
|
|
69
|
-
|
|
69
|
+
color: true,
|
|
70
70
|
'text-decoration': ['none', 'underline', 'line-through', 'overline'],
|
|
71
71
|
'text-overflow': ['ellipsis', 'clip'],
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
'flex-direction': ['row', 'column'],
|
|
72
|
+
display: ['flex', 'block', 'none'],
|
|
73
|
+
flex: true,
|
|
74
|
+
'flex-direction': ['row', 'row-reverse', 'column', 'column-reverse'],
|
|
75
75
|
'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
|
|
76
76
|
'align-items': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
|
|
77
77
|
'align-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
|
|
@@ -80,13 +80,13 @@ const config = {
|
|
|
80
80
|
'flex-shrink': [constrant_1.NUMBER],
|
|
81
81
|
'flex-basis': [constrant_1.LENGTH_REGEX, 'auto'],
|
|
82
82
|
'align-self': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
position: ['absolute', 'relative', 'fixed'],
|
|
84
|
+
top: [constrant_1.LENGTH_REGEX],
|
|
85
|
+
left: [constrant_1.LENGTH_REGEX],
|
|
86
86
|
'z-index': [constrant_1.NUMBER],
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
overflow: ['hidden', 'visible', 'auto'],
|
|
88
|
+
opacity: [constrant_1.NUMBER],
|
|
89
|
+
transform: true,
|
|
90
90
|
'transform-origin': true,
|
|
91
91
|
'-webkit-line-clamp': [constrant_1.NUMBER]
|
|
92
92
|
},
|
|
@@ -100,9 +100,9 @@ const config = {
|
|
|
100
100
|
'property-no-vendor-prefix': true, // 禁止属性前缀
|
|
101
101
|
'at-rule-allowed-list': [], // 允许的at规则
|
|
102
102
|
'color-named': ['never'], // 禁止使用命名颜色
|
|
103
|
-
'declaration-no-important':
|
|
104
|
-
'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's'], // 允许的单位
|
|
105
|
-
'function-disallowed-list': ['
|
|
103
|
+
'declaration-no-important': false, // 禁止使用!important
|
|
104
|
+
'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's', 'rem'], // 允许的单位
|
|
105
|
+
'function-disallowed-list': ['min', 'max', 'clamp'], // 禁止的函数
|
|
106
106
|
}
|
|
107
107
|
};
|
|
108
108
|
exports.default = config;
|
|
@@ -39,8 +39,9 @@ const rule = (primary) => {
|
|
|
39
39
|
const validOptions = stylelint_1.utils.validateOptions(result, exports.ruleName, {
|
|
40
40
|
actual: primary
|
|
41
41
|
});
|
|
42
|
-
if (!validOptions)
|
|
42
|
+
if (!validOptions) {
|
|
43
43
|
return;
|
|
44
|
+
}
|
|
44
45
|
const platform = ['harmony', 'rn'];
|
|
45
46
|
root.walkRules(ruleNode => {
|
|
46
47
|
const selector = ruleNode.selector;
|
package/package.json
CHANGED
package/src/config.ts
CHANGED
|
@@ -7,12 +7,10 @@ import miniprogram from './platform/miniprogram'
|
|
|
7
7
|
import rn from './platform/rn'
|
|
8
8
|
import { TaroStylelintConfig } from './platform/type'
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
type PlatformType = 'h5' | 'miniprogram' | 'harmony' | 'rn'
|
|
12
11
|
|
|
13
12
|
// 合并平台规则成并集
|
|
14
13
|
function mergeRule (platforms) {
|
|
15
|
-
|
|
16
14
|
const rules = {}
|
|
17
15
|
|
|
18
16
|
// 合并选择器
|
|
@@ -44,7 +42,7 @@ function mergeRule (platforms) {
|
|
|
44
42
|
properties[name] = { ...config.supportedProperties }
|
|
45
43
|
}
|
|
46
44
|
})
|
|
47
|
-
|
|
45
|
+
|
|
48
46
|
// 只有harmony和rn支持
|
|
49
47
|
if (supportPropertiesCheck) {
|
|
50
48
|
// rules['taro/no-nested-selectors'] = true
|
|
@@ -84,7 +82,7 @@ function mergeRule (platforms) {
|
|
|
84
82
|
return rules
|
|
85
83
|
}
|
|
86
84
|
|
|
87
|
-
const ruleMap = { harmony, rn, miniprogram, h5 }
|
|
85
|
+
const ruleMap = { harmony, rn, miniprogram, h5 }
|
|
88
86
|
|
|
89
87
|
// 根据平台生成规则
|
|
90
88
|
function taroRules(platforms: PlatformType[] = []) {
|
|
@@ -100,7 +98,6 @@ function getPlatformConfigs (platforms: PlatformType[]): TaroStylelintConfig[] {
|
|
|
100
98
|
|
|
101
99
|
// 到处合并配置的方法
|
|
102
100
|
module.exports = function mergeConfig(platforms: PlatformType[], stylelintConfig: stylelint.Config): stylelint.Config {
|
|
103
|
-
|
|
104
101
|
// 注入环境变量
|
|
105
102
|
process.env.__PLATFORMS__ = platforms.join(',')
|
|
106
103
|
|
|
@@ -133,4 +130,4 @@ module.exports = function mergeConfig(platforms: PlatformType[], stylelintConfig
|
|
|
133
130
|
...stylelintConfig.rules,
|
|
134
131
|
},
|
|
135
132
|
}
|
|
136
|
-
}
|
|
133
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const LENGTH_REGEX = /^-?\d+(\.\d+)?(px|vw|vh|%)?$/i
|
|
1
|
+
export const LENGTH_REGEX = /^-?\d+(\.\d+)?(px|rem|vw|vh|%)?$/i
|
|
2
2
|
export const LENGTH_REGEX_SPLIT = /^-?\d+(\.\d+)?(px|vw|vh|%)?(\s+-?\d+(\.\d+)?(px|vw|vh|%)?)*$/i
|
|
3
3
|
export const NUMBER = /^-?\d+(\.\d+)?$/
|
|
4
|
-
export const BACKGROUND_IMAGE = /(url\(|linear-gradient\()/
|
|
4
|
+
export const BACKGROUND_IMAGE = /(url\(|linear-gradient\()/
|
package/src/platform/h5.ts
CHANGED
package/src/platform/harmony.ts
CHANGED
|
@@ -5,37 +5,37 @@ const config: TaroStylelintConfig = {
|
|
|
5
5
|
// 禁止的选择器集合
|
|
6
6
|
disAllowedSelectors: {
|
|
7
7
|
'selector-max-id': 0, // 允许的最大id选择器数量
|
|
8
|
-
'selector-max-combinators': 0, // 允许的最大组合选择器数量
|
|
9
8
|
'selector-max-type': 0, // 允许的最大类型选择器数量
|
|
10
9
|
'selector-max-attribute': 0, // 允许的最大属性选择器数量
|
|
11
10
|
'selector-max-universal': 0, // 允许的最大通配符选择器数量
|
|
12
|
-
'selector-pseudo-class-allowed-list': [], // 允许的伪类选择器
|
|
11
|
+
'selector-pseudo-class-allowed-list': ['before', 'after'], // 允许的伪类选择器
|
|
12
|
+
'selector-combinator-allowed-list': ['>', ' '], // 允许的组合选择器
|
|
13
13
|
},
|
|
14
14
|
// 支持的属性列表
|
|
15
15
|
supportedProperties: {
|
|
16
|
-
|
|
16
|
+
margin: [LENGTH_REGEX_SPLIT],
|
|
17
17
|
'margin-top': [LENGTH_REGEX],
|
|
18
18
|
'margin-right': [LENGTH_REGEX],
|
|
19
19
|
'margin-bottom': [LENGTH_REGEX],
|
|
20
20
|
'margin-left': [LENGTH_REGEX],
|
|
21
|
-
|
|
21
|
+
padding: [LENGTH_REGEX_SPLIT],
|
|
22
22
|
'padding-top': [LENGTH_REGEX],
|
|
23
23
|
'padding-right': [LENGTH_REGEX],
|
|
24
24
|
'padding-bottom': [LENGTH_REGEX],
|
|
25
25
|
'padding-left': [LENGTH_REGEX],
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
width: [LENGTH_REGEX],
|
|
27
|
+
height: [LENGTH_REGEX],
|
|
28
28
|
'min-width': [LENGTH_REGEX],
|
|
29
29
|
'min-height': [LENGTH_REGEX],
|
|
30
30
|
'max-width': [LENGTH_REGEX],
|
|
31
31
|
'max-height': [LENGTH_REGEX],
|
|
32
|
-
|
|
32
|
+
background: true,
|
|
33
33
|
'background-color': true,
|
|
34
34
|
'background-image': [BACKGROUND_IMAGE],
|
|
35
35
|
'background-size': ['cover', 'contain', LENGTH_REGEX_SPLIT],
|
|
36
36
|
'background-position': ['center', 'top', 'bottom', 'left', 'right', LENGTH_REGEX_SPLIT],
|
|
37
37
|
'background-repeat': ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'],
|
|
38
|
-
|
|
38
|
+
border: true,
|
|
39
39
|
'border-top': true,
|
|
40
40
|
'border-right': true,
|
|
41
41
|
'border-bottom': true,
|
|
@@ -66,12 +66,12 @@ const config: TaroStylelintConfig = {
|
|
|
66
66
|
'font-weight': ['normal', 'bold', 'bolder', NUMBER],
|
|
67
67
|
'line-height': [LENGTH_REGEX],
|
|
68
68
|
'text-align': ['center', 'left', 'right'],
|
|
69
|
-
|
|
69
|
+
color: true,
|
|
70
70
|
'text-decoration': ['none', 'underline', 'line-through', 'overline'],
|
|
71
71
|
'text-overflow': ['ellipsis', 'clip'],
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
'flex-direction': ['row', 'column'],
|
|
72
|
+
display: ['flex', 'block', 'none'],
|
|
73
|
+
flex: true,
|
|
74
|
+
'flex-direction': ['row', 'row-reverse', 'column', 'column-reverse'],
|
|
75
75
|
'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
|
|
76
76
|
'align-items': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
|
|
77
77
|
'align-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
|
|
@@ -80,13 +80,13 @@ const config: TaroStylelintConfig = {
|
|
|
80
80
|
'flex-shrink': [NUMBER],
|
|
81
81
|
'flex-basis': [LENGTH_REGEX, 'auto'],
|
|
82
82
|
'align-self': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
position: ['absolute', 'relative', 'fixed'],
|
|
84
|
+
top: [LENGTH_REGEX],
|
|
85
|
+
left: [LENGTH_REGEX],
|
|
86
86
|
'z-index': [NUMBER],
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
overflow: ['hidden', 'visible', 'auto'],
|
|
88
|
+
opacity: [NUMBER],
|
|
89
|
+
transform: true,
|
|
90
90
|
'transform-origin': true,
|
|
91
91
|
'-webkit-line-clamp': [NUMBER]
|
|
92
92
|
},
|
|
@@ -100,10 +100,10 @@ const config: TaroStylelintConfig = {
|
|
|
100
100
|
'property-no-vendor-prefix': true, // 禁止属性前缀
|
|
101
101
|
'at-rule-allowed-list': [], // 允许的at规则
|
|
102
102
|
'color-named': ['never'], // 禁止使用命名颜色
|
|
103
|
-
'declaration-no-important':
|
|
104
|
-
'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's'], // 允许的单位
|
|
105
|
-
'function-disallowed-list': ['
|
|
103
|
+
'declaration-no-important': false, // 禁止使用!important
|
|
104
|
+
'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's', 'rem'], // 允许的单位
|
|
105
|
+
'function-disallowed-list': ['min', 'max', 'clamp'], // 禁止的函数
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
export default config
|
|
109
|
+
export default config
|
package/src/platform/rn.ts
CHANGED
|
@@ -23,9 +23,7 @@ const meta = {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
const rule: Rule = (primary) => {
|
|
26
|
-
|
|
27
26
|
return (root, result) => {
|
|
28
|
-
|
|
29
27
|
const validOptions = Object.keys(primary).every((key) => {
|
|
30
28
|
if (primary[key]) {
|
|
31
29
|
return validateOptions(result, ruleName, {
|
|
@@ -41,7 +39,7 @@ const rule: Rule = (primary) => {
|
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
const { intersection } = findIntersection(primary)
|
|
44
|
-
|
|
42
|
+
|
|
45
43
|
Object.keys(intersection).forEach(key => {
|
|
46
44
|
if (intersection[key] === true) {
|
|
47
45
|
delete intersection[key]
|
|
@@ -70,7 +68,7 @@ const rule: Rule = (primary) => {
|
|
|
70
68
|
if (propPatterns.some((pattern) => {
|
|
71
69
|
return optionsMatches(primary[platform], pattern, value) || primary[platform][pattern] === true
|
|
72
70
|
})) {
|
|
73
|
-
return
|
|
71
|
+
return
|
|
74
72
|
}
|
|
75
73
|
platforms.push(platform)
|
|
76
74
|
}
|
|
@@ -78,7 +76,7 @@ const rule: Rule = (primary) => {
|
|
|
78
76
|
|
|
79
77
|
const index = declarationValueIndex(decl)
|
|
80
78
|
const endIndex = index + decl.value.length
|
|
81
|
-
|
|
79
|
+
|
|
82
80
|
report({
|
|
83
81
|
message: messages.rejected(prop, value, platforms.join(', ')),
|
|
84
82
|
node: decl,
|
|
@@ -20,10 +20,11 @@ const rule: Rule = (primary) => {
|
|
|
20
20
|
const validOptions = utils.validateOptions(result, ruleName, {
|
|
21
21
|
actual: primary
|
|
22
22
|
})
|
|
23
|
-
if (!validOptions)
|
|
23
|
+
if (!validOptions) {
|
|
24
24
|
return
|
|
25
|
+
}
|
|
25
26
|
const platform = ['harmony', 'rn']
|
|
26
|
-
|
|
27
|
+
|
|
27
28
|
root.walkRules(ruleNode => {
|
|
28
29
|
const selector = ruleNode.selector
|
|
29
30
|
if (!/^[.#]?[a-zA-Z0-9_-]+$/.test(selector)) {
|
|
@@ -34,7 +35,6 @@ const rule: Rule = (primary) => {
|
|
|
34
35
|
message: messages.rejected(selector, platform.join(', ')),
|
|
35
36
|
})
|
|
36
37
|
}
|
|
37
|
-
|
|
38
38
|
})
|
|
39
39
|
}
|
|
40
40
|
}
|
|
@@ -12,7 +12,6 @@ import { log, nameSpace, report, taroDocsUrl } from '../../utils'
|
|
|
12
12
|
|
|
13
13
|
import type { Rule } from 'stylelint'
|
|
14
14
|
|
|
15
|
-
|
|
16
15
|
export const ruleName = nameSpace('property-allowed-list')
|
|
17
16
|
|
|
18
17
|
export const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
@@ -25,7 +24,6 @@ const meta = {
|
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
const rule: Rule = (primary) => {
|
|
28
|
-
|
|
29
27
|
return (root, result) => {
|
|
30
28
|
const validOptions = Object.keys(primary).every((key) => {
|
|
31
29
|
if (primary[key]) {
|
package/src/utils/index.ts
CHANGED
|
@@ -47,7 +47,7 @@ export function findIntersection(data) {
|
|
|
47
47
|
if (Array.isArray(commonValues)) {
|
|
48
48
|
if (Array.isArray(currentValues)) {
|
|
49
49
|
commonValues = commonValues.filter(value => currentValues.includes(value))
|
|
50
|
-
} else if (currentValues){
|
|
50
|
+
} else if (currentValues) {
|
|
51
51
|
commonValues = commonValues.filter(value => currentValues === true || currentValues.includes(value))
|
|
52
52
|
}
|
|
53
53
|
} else if (commonValues === true) {
|