stylelint-plugin-logical-css 0.8.0 → 0.9.1

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 (5) hide show
  1. package/README.md +44 -27
  2. package/package.json +1 -1
  3. package/src/utils/logical.js +12 -0
  4. package/src/utils/physical.js +8 -0
  5. package/src/utils/physicalPropertiesMap.js +16 -0
package/README.md CHANGED
@@ -49,7 +49,8 @@ configuration.
49
49
 
50
50
  ### plugin/use-logical-properties-and-values
51
51
 
52
- This rule is responsible for checking both CSS properties and values. When a physical property or value is found, it will be flagged.
52
+ This rule is responsible for checking both CSS properties and values. When a
53
+ physical property or value is found, it will be flagged.
53
54
 
54
55
  ```json
55
56
  {
@@ -57,17 +58,17 @@ This rule is responsible for checking both CSS properties and values. When a phy
57
58
  "plugin/use-logical-properties-and-values": [
58
59
  true,
59
60
  { "severity": "warning" }
60
- ],
61
+ ]
61
62
  }
62
63
  }
63
64
  ```
64
65
 
65
66
  #### Options
66
67
 
67
- | Option | Description |
68
- | --------------- | ----------------------------------------------------------------------------------------------- |
68
+ | Option | Description |
69
+ | ---------------- | ------------------------------------------------------------------------ |
69
70
  | disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
70
- | ignore | Pass an array of physical properties to ignore while linting. |
71
+ | ignore | Pass an array of physical properties to ignore while linting. |
71
72
 
72
73
  ```json
73
74
  {
@@ -79,7 +80,7 @@ This rule is responsible for checking both CSS properties and values. When a phy
79
80
  "disable-auto-fix": true,
80
81
  "ignore": ["overflow-y", "overflow-x"]
81
82
  }
82
- ],
83
+ ]
83
84
  }
84
85
  }
85
86
  ```
@@ -186,28 +187,44 @@ This rule is responsible for checking both CSS properties and values. When a phy
186
187
 
187
188
  ##### Other properties
188
189
 
189
- | Physical Property |  Logical Property |
190
- | ---------------------------------- | ----------------------------------- |
191
- | `(-webkit-)box-orient: vertical` | `(-webkit-)box-orient: block-axis` |
192
- | `(-webkit-)box-orient: horizontal` | `(-webkit-)box-orient: inline-axis` |
193
- | `caption-size: top` | `caption-side: block-start` |
194
- | `caption-size: bottom` | `caption-side: block-end` |
195
- | `caption-size: right` | `caption-side: inline-end` |
196
- | `caption-size: left` | `caption-side: inline-start` |
197
- | `overflow-y` | `overflow-block` |
198
- | `overflow-x` | `overflow-inline` |
199
- | `overscroll-behavior-x` | `overscroll-behavior-inline` |
200
- | `overscroll-behavior-y` | `overscroll-behavior-block` |
201
- | `resize: horizontal` | `resize: inline` |
202
- | `resize: vertical` | `resize: block` |
203
- | `text-align: left` | `text-align: start` |
204
- | `text-align: right` | `text-align: end` |
190
+ | Physical Property |  Logical Property |
191
+ | ---------------------------------------------- | ----------------------------------- |
192
+ | `(-webkit-)box-orient: vertical` | `(-webkit-)box-orient: block-axis` |
193
+ | `(-webkit-)box-orient: horizontal` | `(-webkit-)box-orient: inline-axis` |
194
+ | `caption-size: top` | `caption-side: block-start` |
195
+ | `caption-size: bottom` | `caption-side: block-end` |
196
+ | `caption-size: right` | `caption-side: inline-end` |
197
+ | `caption-size: left` | `caption-side: inline-start` |
198
+ | `overflow-y` | `overflow-block` |
199
+ | `overflow-x` | `overflow-inline` |
200
+ | `overscroll-behavior-x` | `overscroll-behavior-inline` |
201
+ | `overscroll-behavior-y` | `overscroll-behavior-block` |
202
+ | `resize: horizontal` | `resize: inline` |
203
+ | `resize: vertical` | `resize: block` |
204
+ | `scroll-margin-bottom` | `scroll-margin-block-end` |
205
+ | `scroll-margin-bottom` & `scroll-margin-top` | `scroll-margin-block` |
206
+ | `scroll-margin-left` | `scroll-margin-inline-start` |
207
+ | `scroll-margin-left` & `scroll-margin-right` | `scroll-margin-inline` |
208
+ | `scroll-margin-right` | `scroll-margin-inline-end` |
209
+ | `scroll-margin-top` | `scroll-margin-block-start` |
210
+ | `scroll-padding-bottom` | `scroll-padding-block-end` |
211
+ | `scroll-padding-bottom` & `scroll-padding-top` | `scroll-padding-block` |
212
+ | `scroll-padding-left` | `scroll-padding-inline-start` |
213
+ | `scroll-padding-left` & `scroll-padding-right` | `scroll-padding-inline` |
214
+ | `scroll-padding-right` | `scroll-padding-inline-end` |
215
+ | `scroll-padding-top` | `scroll-padding-block-start` |
216
+ | `text-align: left` | `text-align: start` |
217
+ | `text-align: right` | `text-align: end` |
205
218
 
206
219
  ---
207
220
 
208
221
  ### plugin/use-logical-units
209
222
 
210
- This rule is responsible for checking that logical CSS units are used. Specifically, viewport units like `vw` and `vh` which stand for viewport width and viewport height respectively will not reflect different writing modes and directions. Instead, this rule will enforce the logical equivalents, `vi` and `vb`.
223
+ This rule is responsible for checking that logical CSS units are used.
224
+ Specifically, viewport units like `vw` and `vh` which stand for viewport width
225
+ and viewport height respectively will not reflect different writing modes and
226
+ directions. Instead, this rule will enforce the logical equivalents, `vi` and
227
+ `vb`.
211
228
 
212
229
  ```json
213
230
  {
@@ -219,10 +236,10 @@ This rule is responsible for checking that logical CSS units are used. Specifica
219
236
 
220
237
  #### Options
221
238
 
222
- | Option | Description |
223
- | --------------- | ----------------------------------------------------------------------------------------------- |
239
+ | Option | Description |
240
+ | ---------------- | ------------------------------------------------------------------------ |
224
241
  | disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
225
- | ignore | Pass an array of physical units to ignore while linting. |
242
+ | ignore | Pass an array of physical units to ignore while linting. |
226
243
 
227
244
  ```json
228
245
  {
@@ -234,7 +251,7 @@ This rule is responsible for checking that logical CSS units are used. Specifica
234
251
  "disable-auto-fix": true,
235
252
  "ignore": ["dvh", "dvw"]
236
253
  }
237
- ],
254
+ ]
238
255
  }
239
256
  }
240
257
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stylelint-plugin-logical-css",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
5
5
  "main": "src/index.js",
6
6
  "files": [
package/src/utils/logical.js CHANGED
@@ -71,6 +71,18 @@ const logicalProperties = Object.freeze({
71
71
  paddingInline: 'padding-inline',
72
72
  paddingInlineEnd: 'padding-inline-end',
73
73
  paddingInlineStart: 'padding-inline-start',
74
+ scrollMarginBlock: 'scroll-margin-block',
75
+ scrollMarginBlockEnd: 'scroll-margin-block-end',
76
+ scrollMarginBlockStart: 'scroll-margin-block-start',
77
+ scrollMarginInline: 'scroll-margin-inline',
78
+ scrollMarginInlineEnd: 'scroll-margin-inline-end',
79
+ scrollMarginInlineStart: 'scroll-margin-inline-start',
80
+ scrollPaddingBlock: 'scroll-padding-block',
81
+ scrollPaddingBlockEnd: 'scroll-padding-block-end',
82
+ scrollPaddingBlockStart: 'scroll-padding-block-start',
83
+ scrollPaddingInline: 'scroll-padding-inline',
84
+ scrollPaddingInlineEnd: 'scroll-padding-inline-end',
85
+ scrollPaddingInlineStart: 'scroll-padding-inline-start',
74
86
  });
75
87
 
76
88
  const logicalUnits = Object.freeze({
package/src/utils/physical.js CHANGED
@@ -53,6 +53,14 @@ const physicalProperties = Object.freeze({
53
53
  paddingTop: 'padding-top',
54
54
  resize: 'resize',
55
55
  right: 'right',
56
+ scrollMarginBottom: 'scroll-margin-bottom',
57
+ scrollMarginLeft: 'scroll-margin-left',
58
+ scrollMarginRight: 'scroll-margin-right',
59
+ scrollMarginTop: 'scroll-margin-top',
60
+ scrollPaddingBottom: 'scroll-padding-bottom',
61
+ scrollPaddingLeft: 'scroll-padding-left',
62
+ scrollPaddingRight: 'scroll-padding-right',
63
+ scrollPaddingTop: 'scroll-padding-top',
56
64
  textAlign: 'text-align',
57
65
  top: 'top',
58
66
  width: 'width',
package/src/utils/physicalPropertiesMap.js CHANGED
@@ -54,6 +54,22 @@ const physicalPropertiesMap = Object.freeze({
54
54
  [physicalProperties.paddingLeft]: logicalProperties.paddingInlineStart,
55
55
  [physicalProperties.paddingRight]: logicalProperties.paddingInlineEnd,
56
56
  [physicalProperties.paddingTop]: logicalProperties.paddingBlockStart,
57
+ [physicalProperties.scrollMarginBottom]:
58
+ logicalProperties.scrollMarginBlockEnd,
59
+ [physicalProperties.scrollMarginLeft]:
60
+ logicalProperties.scrollMarginInlineStart,
61
+ [physicalProperties.scrollMarginRight]:
62
+ logicalProperties.scrollMarginInlineEnd,
63
+ [physicalProperties.scrollMarginTop]:
64
+ logicalProperties.scrollMarginBlockStart,
65
+ [physicalProperties.scrollPaddingBottom]:
66
+ logicalProperties.scrollPaddingBlockEnd,
67
+ [physicalProperties.scrollPaddingLeft]:
68
+ logicalProperties.scrollPaddingInlineStart,
69
+ [physicalProperties.scrollPaddingRight]:
70
+ logicalProperties.scrollPaddingInlineEnd,
71
+ [physicalProperties.scrollPaddingTop]:
72
+ logicalProperties.scrollPaddingBlockStart,
57
73
  [physicalProperties.right]: logicalProperties.insetInlineEnd,
58
74
  [physicalProperties.top]: logicalProperties.insetBlockStart,
59
75
  [physicalProperties.width]: logicalProperties.inlineSize,