stylelint-plugin-logical-css 0.1.0 → 0.2.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
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
# Stylelint Plugin Logical CSS
|
|
1
|
+
# 🚀 Stylelint Plugin Logical CSS
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
|
|
5
6
|
|
|
6
7
|
Stylelint Plugin Logical CSS aims to enforce the use of logical CSS properties,
|
|
7
8
|
values and units. The plugin provides two rules. But first, let's get set up.
|
|
@@ -51,7 +52,28 @@ Let's explore each rule to better understand what it does, and does not, allow.
|
|
|
51
52
|
This rule is responsible for checking both CSS properties and values. When a
|
|
52
53
|
physical property or value is found, it will be flagged.
|
|
53
54
|
|
|
54
|
-
####
|
|
55
|
+
#### Options
|
|
56
|
+
|
|
57
|
+
The `use-logical-properties-and-values` rule accepts the following options:
|
|
58
|
+
|
|
59
|
+
| Option | Type | Default | Description |
|
|
60
|
+
| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------- |
|
|
61
|
+
| `enable-auto-fix` | boolean | false | Use this flag in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
|
|
62
|
+
|
|
63
|
+
```json
|
|
64
|
+
{
|
|
65
|
+
"rules": {
|
|
66
|
+
"plugin/use-logical-properties-and-values": [
|
|
67
|
+
true,
|
|
68
|
+
{ "severity": "warning", "enable-auto-fix": true }
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### Usage
|
|
75
|
+
|
|
76
|
+
##### Not Allowed
|
|
55
77
|
|
|
56
78
|
```css
|
|
57
79
|
.heading {
|
|
@@ -60,7 +82,7 @@ physical property or value is found, it will be flagged.
|
|
|
60
82
|
}
|
|
61
83
|
```
|
|
62
84
|
|
|
63
|
-
|
|
85
|
+
##### Allowed
|
|
64
86
|
|
|
65
87
|
```css
|
|
66
88
|
.heading {
|
|
@@ -83,7 +105,28 @@ and viewport height respectively will not reflect different writing modes and
|
|
|
83
105
|
directions. Instead, this rule will enforce the logical equivalents, `vi` and
|
|
84
106
|
`vb`.
|
|
85
107
|
|
|
86
|
-
####
|
|
108
|
+
#### Options
|
|
109
|
+
|
|
110
|
+
The `use-logical-units` rule accepts the following options:
|
|
111
|
+
|
|
112
|
+
| Option | Type | Default | Description |
|
|
113
|
+
| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------- |
|
|
114
|
+
| `enable-auto-fix` | boolean | false | Use this flag in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
|
|
115
|
+
|
|
116
|
+
```json
|
|
117
|
+
{
|
|
118
|
+
"rules": {
|
|
119
|
+
"plugin/use-logical-units": [
|
|
120
|
+
true,
|
|
121
|
+
{ "severity": "warning", "enable-auto-fix": true }
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
#### Usage
|
|
128
|
+
|
|
129
|
+
##### Not Allowed
|
|
87
130
|
|
|
88
131
|
```css
|
|
89
132
|
body {
|
|
@@ -91,7 +134,7 @@ body {
|
|
|
91
134
|
}
|
|
92
135
|
```
|
|
93
136
|
|
|
94
|
-
|
|
137
|
+
##### Allowed
|
|
95
138
|
|
|
96
139
|
```css
|
|
97
140
|
body {
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@ const { isPhysicalValue } = require('../../utils/isPhysicalValue');
|
|
|
8
8
|
const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
|
|
9
9
|
const { physicalValuesMap } = require('../../utils/physicalValuesMap');
|
|
10
10
|
|
|
11
|
-
const ruleFunction = () => {
|
|
11
|
+
const ruleFunction = (_, options, context) => {
|
|
12
12
|
return (root, result) => {
|
|
13
13
|
const validOptions = stylelint.utils.validateOptions(result, ruleName);
|
|
14
14
|
|
|
@@ -33,6 +33,18 @@ const ruleFunction = () => {
|
|
|
33
33
|
physicalValuesMap[decl.prop][decl.value],
|
|
34
34
|
);
|
|
35
35
|
|
|
36
|
+
if (context.fix && options?.['enable-auto-fix']) {
|
|
37
|
+
if (propIsPhysical) {
|
|
38
|
+
decl.prop = physicalPropertiesMap[decl.prop];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (valueIsPhysical) {
|
|
42
|
+
decl.value = physicalValuesMap[decl.value];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
|
|
36
48
|
stylelint.utils.report({
|
|
37
49
|
message,
|
|
38
50
|
node: decl,
|
|
@@ -6,7 +6,7 @@ const { ruleName, ruleMessages, ruleMeta } = require('./base');
|
|
|
6
6
|
const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
|
|
7
7
|
const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
|
|
8
8
|
|
|
9
|
-
const ruleFunction = () => {
|
|
9
|
+
const ruleFunction = (_, options, context) => {
|
|
10
10
|
return (root, result) => {
|
|
11
11
|
const validOptions = stylelint.utils.validateOptions(result, ruleName);
|
|
12
12
|
|
|
@@ -25,6 +25,15 @@ const ruleFunction = () => {
|
|
|
25
25
|
physicalUnitsMap[physicalUnit],
|
|
26
26
|
);
|
|
27
27
|
|
|
28
|
+
if (context.fix && options?.['enable-auto-fix']) {
|
|
29
|
+
decl.value = decl.value.replace(
|
|
30
|
+
physicalUnit,
|
|
31
|
+
physicalUnitsMap[physicalUnit],
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
28
37
|
stylelint.utils.report({
|
|
29
38
|
message,
|
|
30
39
|
node: decl,
|