stylelint-taro 4.0.0-beta.21 → 4.0.0-beta.22

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.
Files changed (6) hide show
  1. package/README.md +175 -0
  2. package/lib/platform/constrant.js +1 -1
  3. package/lib/platform/harmony.js +7 -7
  4. package/package.json +1 -1
  5. package/src/platform/constrant.ts +1 -1
  6. package/src/platform/harmony.ts +7 -7
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
+ | ... | | 其他 | ❌ |
package/lib/platform/constrant.js CHANGED
@@ -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,11 +5,11 @@ 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: {
@@ -69,9 +69,9 @@ const config = {
69
69
  'color': true,
70
70
  'text-decoration': ['none', 'underline', 'line-through', 'overline'],
71
71
  'text-overflow': ['ellipsis', 'clip'],
72
- 'display': ['flex', 'block'],
72
+ 'display': ['flex', 'block', 'none'],
73
73
  'flex': true,
74
- 'flex-direction': ['row', 'column'],
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'],
@@ -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': true, // 禁止使用!important
104
- 'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's'], // 允许的单位
105
- 'function-disallowed-list': ['calc', 'min', 'max', 'clamp'], // 禁止的函数
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stylelint-taro",
3
- "version": "4.0.0-beta.21",
3
+ "version": "4.0.0-beta.22",
4
4
  "description": "Taro stylelint 规则集合",
5
5
  "main": "lib/index.js",
6
6
  "files": [
package/src/platform/constrant.ts CHANGED
@@ -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
4
  export const BACKGROUND_IMAGE = /(url\(|linear-gradient\()/
package/src/platform/harmony.ts CHANGED
@@ -5,11 +5,11 @@ 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: {
@@ -69,9 +69,9 @@ const config: TaroStylelintConfig = {
69
69
  'color': true,
70
70
  'text-decoration': ['none', 'underline', 'line-through', 'overline'],
71
71
  'text-overflow': ['ellipsis', 'clip'],
72
- 'display': ['flex', 'block'],
72
+ 'display': ['flex', 'block', 'none'],
73
73
  'flex': true,
74
- 'flex-direction': ['row', 'column'],
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'],
@@ -100,9 +100,9 @@ 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': true, // 禁止使用!important
104
- 'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's'], // 允许的单位
105
- 'function-disallowed-list': ['calc', 'min', 'max', 'clamp'], // 禁止的函数
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