stylelint-plugin-logical-css 0.7.0 → 0.8.0
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
CHANGED
|
@@ -42,31 +42,44 @@ configuration.
|
|
|
42
42
|
|
|
43
43
|
## Rules
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
- [plugin/use-logical-properties-and-values](#pluginuse-logical-properties-and-values)
|
|
46
|
+
- [plugin/use-logical-units](#pluginuse-logical-units)
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
---
|
|
48
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
|
|
53
|
-
physical property or value is found, it will be flagged.
|
|
52
|
+
This rule is responsible for checking both CSS properties and values. When a physical property or value is found, it will be flagged.
|
|
54
53
|
|
|
55
|
-
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"rules": {
|
|
57
|
+
"plugin/use-logical-properties-and-values": [
|
|
58
|
+
true,
|
|
59
|
+
{ "severity": "warning" }
|
|
60
|
+
],
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
56
64
|
|
|
57
|
-
|
|
65
|
+
#### Options
|
|
58
66
|
|
|
59
67
|
| Option | Description |
|
|
60
68
|
| --------------- | ----------------------------------------------------------------------------------------------- |
|
|
61
|
-
|
|
|
69
|
+
| 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. |
|
|
62
71
|
|
|
63
72
|
```json
|
|
64
73
|
{
|
|
65
74
|
"rules": {
|
|
66
75
|
"plugin/use-logical-properties-and-values": [
|
|
67
76
|
true,
|
|
68
|
-
{
|
|
69
|
-
|
|
77
|
+
{
|
|
78
|
+
"severity": "warning",
|
|
79
|
+
"disable-auto-fix": true,
|
|
80
|
+
"ignore": ["overflow-y", "overflow-x"]
|
|
81
|
+
}
|
|
82
|
+
],
|
|
70
83
|
}
|
|
71
84
|
}
|
|
72
85
|
```
|
|
@@ -91,33 +104,137 @@ The use-logical-properties-and-values rule accepts the following options:
|
|
|
91
104
|
}
|
|
92
105
|
```
|
|
93
106
|
|
|
107
|
+
#### Supported Properties and Values
|
|
108
|
+
|
|
109
|
+
##### Properties for sizing
|
|
110
|
+
|
|
111
|
+
| Physical Property | Logical Property |
|
|
112
|
+
| ----------------- | ----------------- |
|
|
113
|
+
| `height` | `block-size` |
|
|
114
|
+
| `width` | `inline-size` |
|
|
115
|
+
| `max-height` | `max-block-size` |
|
|
116
|
+
| `max-width` | `max-inline-size` |
|
|
117
|
+
| `min-height` | `min-block-size` |
|
|
118
|
+
| `min-width` | `min-inline-size` |
|
|
119
|
+
|
|
120
|
+
##### Properties for margins, borders, and padding
|
|
121
|
+
|
|
122
|
+
| Physical Property | Logical Property |
|
|
123
|
+
| ------------------------------------------ | --------------------------- |
|
|
124
|
+
| `border-top` & `border-bottom` | `border-block` |
|
|
125
|
+
| `border-top-color` & `border-bottom-color` | `border-block-color` |
|
|
126
|
+
| `border-top-style` & `border-bottom-style` | `border-block-style` |
|
|
127
|
+
| `border-top-width` & `border-bottom-width` | `border-block-width` |
|
|
128
|
+
| `border-left` & `border-right` | `border-inline` |
|
|
129
|
+
| `border-left-color` & `border-right-color` | `border-inline-color` |
|
|
130
|
+
| `border-left-style` & `border-right-style` | `border-inline-style` |
|
|
131
|
+
| `border-left-width` & `border-right-width` | `border-inline-width` |
|
|
132
|
+
| `border-bottom` | `border-block-end` |
|
|
133
|
+
| `border-bottom-color` | `border-block-end-color` |
|
|
134
|
+
| `border-bottom-style` | `border-block-end-style` |
|
|
135
|
+
| `border-bottom-width` | `border-block-end-width` |
|
|
136
|
+
| `border-top` | `border-block-start` |
|
|
137
|
+
| `border-top-color` | `border-block-start-color` |
|
|
138
|
+
| `border-top-style` | `border-block-start-style` |
|
|
139
|
+
| `border-top-width` | `border-block-start-width` |
|
|
140
|
+
| `border-right` | `border-inline-end` |
|
|
141
|
+
| `border-right-color` | `border-inline-end-color` |
|
|
142
|
+
| `border-right-style` | `border-inline-end-style` |
|
|
143
|
+
| `border-right-width` | `border-inline-end-width` |
|
|
144
|
+
| `border-left` | `border-inline-start` |
|
|
145
|
+
| `border-left-color` | `border-inline-start-color` |
|
|
146
|
+
| `border-left-style` | `border-inline-start-style` |
|
|
147
|
+
| `border-left-width` | `border-inline-start-width` |
|
|
148
|
+
| `border-bottom-left-radius` | `border-end-start-radius` |
|
|
149
|
+
| `border-bottom-right-radius` | `border-end-end-radius` |
|
|
150
|
+
| `border-top-left-radius` | `border-start-start-radius` |
|
|
151
|
+
| `border-top-right-radius` | `border-start-end-radius` |
|
|
152
|
+
| `margin-top` & `margin-bottom` | `margin-block` |
|
|
153
|
+
| `margin-top` | `margin-block-start` |
|
|
154
|
+
| `margin-bottom` | `margin-block-end` |
|
|
155
|
+
| `margin-left` & `margin-right` | `margin-inline` |
|
|
156
|
+
| `margin-left` | `margin-inline-start` |
|
|
157
|
+
| `margin-right` | `margin-inline-end` |
|
|
158
|
+
| `padding-top` & `padding-bottom` | `padding-block` |
|
|
159
|
+
| `padding-top` | `padding-block-start` |
|
|
160
|
+
| `padding-bottom` | `padding-block-end` |
|
|
161
|
+
| `padding-left` & `padding-right` | `padding-inline` |
|
|
162
|
+
| `padding-left` | `padding-inline-start` |
|
|
163
|
+
| `padding-right` | `padding-inline-end` |
|
|
164
|
+
|
|
165
|
+
##### Properties for floating and positioning
|
|
166
|
+
|
|
167
|
+
| Physical Property | Logical Property |
|
|
168
|
+
| ----------------- | --------------------- |
|
|
169
|
+
| `clear: left` | `clear: inline-start` |
|
|
170
|
+
| `clear: right` | `clear: inline-end` |
|
|
171
|
+
| `float: left` | `float: inline-start` |
|
|
172
|
+
| `float: right` | `float: inline-end` |
|
|
173
|
+
| `top` & `bottom` | `inset-block` |
|
|
174
|
+
| `top` | `inset-block-start` |
|
|
175
|
+
| `bottom` | `inset-block-end` |
|
|
176
|
+
| `left` & `right` | `inset-inline` |
|
|
177
|
+
| `left` | `inset-inline-start` |
|
|
178
|
+
| `right` | `inset-inline-end` |
|
|
179
|
+
|
|
180
|
+
##### Properties for size containment
|
|
181
|
+
|
|
182
|
+
| Physical Property | Logical Property |
|
|
183
|
+
| -------------------------- | ------------------------------- |
|
|
184
|
+
| `contain-intrinsic-height` | `contain-intrinsic-block-size` |
|
|
185
|
+
| `contain-intrinsic-width` | `contain-intrinsic-inline-size` |
|
|
186
|
+
|
|
187
|
+
##### Other properties
|
|
188
|
+
|
|
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` |
|
|
205
|
+
|
|
94
206
|
---
|
|
95
207
|
|
|
96
|
-
###
|
|
208
|
+
### plugin/use-logical-units
|
|
97
209
|
|
|
98
|
-
|
|
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`.
|
|
99
211
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
212
|
+
```json
|
|
213
|
+
{
|
|
214
|
+
"rules": {
|
|
215
|
+
"plugin/use-logical-units": [true, { "severity": "warning" }]
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
```
|
|
105
219
|
|
|
106
220
|
#### Options
|
|
107
221
|
|
|
108
|
-
The use-logical-units rule accepts the following options:
|
|
109
|
-
|
|
110
222
|
| Option | Description |
|
|
111
223
|
| --------------- | ----------------------------------------------------------------------------------------------- |
|
|
112
|
-
|
|
|
224
|
+
| 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. |
|
|
113
226
|
|
|
114
227
|
```json
|
|
115
228
|
{
|
|
116
229
|
"rules": {
|
|
117
|
-
"plugin/use-logical-
|
|
230
|
+
"plugin/use-logical-properties-and-values": [
|
|
118
231
|
true,
|
|
119
|
-
{
|
|
120
|
-
|
|
232
|
+
{
|
|
233
|
+
"severity": "warning",
|
|
234
|
+
"disable-auto-fix": true,
|
|
235
|
+
"ignore": ["dvh", "dvw"]
|
|
236
|
+
}
|
|
237
|
+
],
|
|
121
238
|
}
|
|
122
239
|
}
|
|
123
240
|
```
|
|
@@ -140,8 +257,18 @@ body {
|
|
|
140
257
|
}
|
|
141
258
|
```
|
|
142
259
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
260
|
+
#### Supported Units
|
|
261
|
+
|
|
262
|
+
> Read about current
|
|
263
|
+
> [browser support for logical viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic).
|
|
264
|
+
|
|
265
|
+
| Physical Unit | Logical Unit |
|
|
266
|
+
| ------------- | ------------- |
|
|
267
|
+
| dvh | dvb |
|
|
268
|
+
| dvw | dvi |
|
|
269
|
+
| lvh | lvb |
|
|
270
|
+
| lvw | lvi |
|
|
271
|
+
| svh | svb |
|
|
272
|
+
| svw | svi |
|
|
273
|
+
| vh | vb |
|
|
274
|
+
| vw | vi |
|
package/package.json
CHANGED
|
@@ -20,7 +20,10 @@ const ruleFunction = (_, options, context) => {
|
|
|
20
20
|
|
|
21
21
|
root.walkDecls((decl) => {
|
|
22
22
|
let rootProp = decl.prop;
|
|
23
|
-
if (
|
|
23
|
+
if (
|
|
24
|
+
Array.isArray(options?.ignore) &&
|
|
25
|
+
options?.ignore.includes(rootProp)
|
|
26
|
+
) {
|
|
24
27
|
return;
|
|
25
28
|
}
|
|
26
29
|
|
|
@@ -47,7 +50,7 @@ const ruleFunction = (_, options, context) => {
|
|
|
47
50
|
physicalValuesMap[rootProp][decl.value],
|
|
48
51
|
);
|
|
49
52
|
|
|
50
|
-
if (context.fix && options?.['
|
|
53
|
+
if (context.fix && !options?.['disable-auto-fix']) {
|
|
51
54
|
if (propIsPhysical) {
|
|
52
55
|
decl.prop = physicalPropertiesMap[rootProp];
|
|
53
56
|
}
|
|
@@ -60,9 +63,6 @@ const ruleFunction = (_, options, context) => {
|
|
|
60
63
|
}
|
|
61
64
|
|
|
62
65
|
stylelint.utils.report({
|
|
63
|
-
column: decl.source.start.column,
|
|
64
|
-
endColumn: rootProp.length,
|
|
65
|
-
line: decl.source.start.line,
|
|
66
66
|
message,
|
|
67
67
|
node: decl,
|
|
68
68
|
result,
|
|
@@ -20,12 +20,20 @@ const ruleFunction = (_, options, context) => {
|
|
|
20
20
|
if (!unitIsPhysical) return;
|
|
21
21
|
|
|
22
22
|
const physicalUnit = getValueUnit(decl.value);
|
|
23
|
+
|
|
24
|
+
if (
|
|
25
|
+
Array.isArray(options?.ignore) &&
|
|
26
|
+
options?.ignore.includes(physicalUnit)
|
|
27
|
+
) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
|
|
23
31
|
const message = ruleMessages.unexpectedUnit(
|
|
24
32
|
physicalUnit,
|
|
25
33
|
physicalUnitsMap[physicalUnit],
|
|
26
34
|
);
|
|
27
35
|
|
|
28
|
-
if (context.fix && options?.['
|
|
36
|
+
if (context.fix && !options?.['disable-auto-fix']) {
|
|
29
37
|
decl.value = decl.value.replace(
|
|
30
38
|
physicalUnit,
|
|
31
39
|
physicalUnitsMap[physicalUnit],
|