stylelint-plugin-logical-css 0.9.1 → 0.10.0

package/README.md

@@ -191,10 +191,10 @@ physical property or value is found, it will be flagged.
 | ---------------------------------------------- | ----------------------------------- |
 | `(-webkit-)box-orient: vertical`               | `(-webkit-)box-orient: block-axis`  |
 | `(-webkit-)box-orient: horizontal`             | `(-webkit-)box-orient: inline-axis` |
-| `caption-size: top`                            | `caption-side: block-start`         |
-| `caption-size: bottom`                         | `caption-side: block-end`           |
-| `caption-size: right`                          | `caption-side: inline-end`          |
-| `caption-size: left`                           | `caption-side: inline-start`        |
+| `caption-side: top`                            | `caption-side: block-start`         |
+| `caption-side: bottom`                         | `caption-side: block-end`           |
+| `caption-side: right`                          | `caption-side: inline-end`          |
+| `caption-side: left`                           | `caption-side: inline-start`        |
 | `overflow-y`                                   | `overflow-block`                    |
 | `overflow-x`                                   | `overflow-inline`                   |
 | `overscroll-behavior-x`                        | `overscroll-behavior-inline`        |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
   "main": "src/index.js",
   "files": [

package/src/rules/use-logical-properties-and-values/base.js

@@ -11,6 +11,9 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   unexpectedValue(property, physicalValue, logicalValue) {
     return `Unexpected "${physicalValue}" value in "${property}" property. Use "${logicalValue}".`;
   },
+  unexpectedTransitionValue(physicalValue, logicalValue) {
+    return `Unexpected "${physicalValue}" value in "transition" property. Use "${logicalValue}".`;
+  },
 });
 
 const ruleMeta = {

package/src/rules/use-logical-properties-and-values/index.js

@@ -31,24 +31,46 @@ const ruleFunction = (_, options, context) => {
         (prefix) => (rootProp = rootProp.replace(prefix, '')),
       );
 
-      const isValidProp = Object.values(physicalProperties).includes(rootProp);
+      const isValidProp = [
+        ...Object.values(physicalProperties),
+        'transition',
+      ].includes(rootProp);
       if (!isValidProp) return;
 
+      const isTransitionProperty = rootProp === 'transition';
+      const physicalTransitionValue =
+        isTransitionProperty &&
+        Object.values(physicalProperties).find((property) =>
+          decl.value.includes(property) ? property : null,
+        );
       const propIsPhysical = isPhysicalProperty(decl.prop);
       const valueIsPhysical = isPhysicalValue(decl.value);
 
-      if (!propIsPhysical && !valueIsPhysical) return;
-
-      const message = propIsPhysical
-        ? ruleMessages.unexpectedProp(
-            decl.prop,
-            physicalPropertiesMap[rootProp],
-          )
-        : ruleMessages.unexpectedValue(
-            decl.prop,
-            decl.value,
-            physicalValuesMap[rootProp][decl.value],
-          );
+      if (!propIsPhysical && !valueIsPhysical && !physicalTransitionValue)
+        return;
+
+      let message;
+
+      if (propIsPhysical) {
+        message = ruleMessages.unexpectedProp(
+          decl.prop,
+          physicalPropertiesMap[rootProp],
+        );
+      }
+      if (valueIsPhysical) {
+        message = ruleMessages.unexpectedValue(
+          decl.prop,
+          decl.value,
+          physicalValuesMap[rootProp][decl.value],
+        );
+      }
+
+      if (physicalTransitionValue) {
+        message = ruleMessages.unexpectedTransitionValue(
+          physicalTransitionValue,
+          physicalPropertiesMap[physicalTransitionValue],
+        );
+      }
 
       if (context.fix && !options?.['disable-auto-fix']) {
         if (propIsPhysical) {
@@ -59,6 +81,13 @@ const ruleFunction = (_, options, context) => {
           decl.value = physicalValuesMap[rootProp][decl.value];
         }
 
+        if (physicalTransitionValue) {
+          decl.value = decl.value.replace(
+            physicalTransitionValue,
+            physicalPropertiesMap[physicalTransitionValue],
+          );
+        }
+
         return;
       }