stylelint-plugin-logical-css 0.9.0 → 0.10.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.
Files changed (4) hide show
  1. package/README.md +16 -16
  2. package/package.json +1 -1
  3. package/src/rules/use-logical-properties-and-values/base.js +3 -0
  4. package/src/rules/use-logical-properties-and-values/index.js +42 -13
package/README.md CHANGED
@@ -191,28 +191,28 @@ physical property or value is found, it will be flagged.
191
191
  | ---------------------------------------------- | ----------------------------------- |
192
192
  | `(-webkit-)box-orient: vertical` | `(-webkit-)box-orient: block-axis` |
193
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` |
194
+ | `caption-side: top` | `caption-side: block-start` |
195
+ | `caption-side: bottom` | `caption-side: block-end` |
196
+ | `caption-side: right` | `caption-side: inline-end` |
197
+ | `caption-side: left` | `caption-side: inline-start` |
198
198
  | `overflow-y` | `overflow-block` |
199
199
  | `overflow-x` | `overflow-inline` |
200
200
  | `overscroll-behavior-x` | `overscroll-behavior-inline` |
201
201
  | `overscroll-behavior-y` | `overscroll-behavior-block` |
202
202
  | `resize: horizontal` | `resize: inline` |
203
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` |
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
216
  | `text-align: left` | `text-align: start` |
217
217
  | `text-align: right` | `text-align: end` |
218
218
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stylelint-plugin-logical-css",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
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/rules/use-logical-properties-and-values/base.js CHANGED
@@ -11,6 +11,9 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
11
11
  unexpectedValue(property, physicalValue, logicalValue) {
12
12
  return `Unexpected "${physicalValue}" value in "${property}" property. Use "${logicalValue}".`;
13
13
  },
14
+ unexpectedTransitionValue(physicalValue, logicalValue) {
15
+ return `Unexpected "${physicalValue}" value in "transition" property. Use "${logicalValue}".`;
16
+ },
14
17
  });
15
18
 
16
19
  const ruleMeta = {
package/src/rules/use-logical-properties-and-values/index.js CHANGED
@@ -31,24 +31,46 @@ const ruleFunction = (_, options, context) => {
31
31
  (prefix) => (rootProp = rootProp.replace(prefix, '')),
32
32
  );
33
33
 
34
- const isValidProp = Object.values(physicalProperties).includes(rootProp);
34
+ const isValidProp = [
35
+ ...Object.values(physicalProperties),
36
+ 'transition',
37
+ ].includes(rootProp);
35
38
  if (!isValidProp) return;
36
39
 
40
+ const isTransitionProperty = rootProp === 'transition';
41
+ const physicalTransitionValue =
42
+ isTransitionProperty &&
43
+ Object.values(physicalProperties).find((property) =>
44
+ decl.value.includes(property) ? property : null,
45
+ );
37
46
  const propIsPhysical = isPhysicalProperty(decl.prop);
38
47
  const valueIsPhysical = isPhysicalValue(decl.value);
39
48
 
40
- if (!propIsPhysical && !valueIsPhysical) return;
41
-
42
- const message = propIsPhysical
43
- ? ruleMessages.unexpectedProp(
44
- decl.prop,
45
- physicalPropertiesMap[rootProp],
46
- )
47
- : ruleMessages.unexpectedValue(
48
- decl.prop,
49
- decl.value,
50
- physicalValuesMap[rootProp][decl.value],
51
- );
49
+ if (!propIsPhysical && !valueIsPhysical && !physicalTransitionValue)
50
+ return;
51
+
52
+ let message;
53
+
54
+ if (propIsPhysical) {
55
+ message = ruleMessages.unexpectedProp(
56
+ decl.prop,
57
+ physicalPropertiesMap[rootProp],
58
+ );
59
+ }
60
+ if (valueIsPhysical) {
61
+ message = ruleMessages.unexpectedValue(
62
+ decl.prop,
63
+ decl.value,
64
+ physicalValuesMap[rootProp][decl.value],
65
+ );
66
+ }
67
+
68
+ if (physicalTransitionValue) {
69
+ message = ruleMessages.unexpectedTransitionValue(
70
+ physicalTransitionValue,
71
+ physicalPropertiesMap[physicalTransitionValue],
72
+ );
73
+ }
52
74
 
53
75
  if (context.fix && !options?.['disable-auto-fix']) {
54
76
  if (propIsPhysical) {
@@ -59,6 +81,13 @@ const ruleFunction = (_, options, context) => {
59
81
  decl.value = physicalValuesMap[rootProp][decl.value];
60
82
  }
61
83
 
84
+ if (physicalTransitionValue) {
85
+ decl.value = decl.value.replace(
86
+ physicalTransitionValue,
87
+ physicalPropertiesMap[physicalTransitionValue],
88
+ );
89
+ }
90
+
62
91
  return;
63
92
  }
64
93