stylelint-plugin-logical-css 0.9.1 → 0.11.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.11.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,55 @@ 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 physicalTransitionProperties =
+        isTransitionProperty &&
+        Object.values(physicalProperties)
+          .flatMap((property) => {
+            const exp = new RegExp(`(^|[^\\w-])${property}([^\\w-]|$)`);
+            return decl.value.match(exp);
+          })
+          .filter((p) => p && p.trim());
+
       const propIsPhysical = isPhysicalProperty(decl.prop);
       const valueIsPhysical = isPhysicalValue(decl.value);
 
-      if (!propIsPhysical && !valueIsPhysical) return;
+      if (
+        !propIsPhysical &&
+        !valueIsPhysical &&
+        !physicalTransitionProperties.length
+      ) {
+        return;
+      }
+
+      let message;
 
-      const message = propIsPhysical
-        ? ruleMessages.unexpectedProp(
-            decl.prop,
-            physicalPropertiesMap[rootProp],
-          )
-        : ruleMessages.unexpectedValue(
-            decl.prop,
-            decl.value,
-            physicalValuesMap[rootProp][decl.value],
-          );
+      if (propIsPhysical) {
+        message = ruleMessages.unexpectedProp(
+          decl.prop,
+          physicalPropertiesMap[rootProp],
+        );
+      }
+      if (valueIsPhysical) {
+        message = ruleMessages.unexpectedValue(
+          decl.prop,
+          decl.value,
+          physicalValuesMap[rootProp][decl.value],
+        );
+      }
+      if (physicalTransitionProperties.length) {
+        const propertyToFlag = physicalTransitionProperties[0].trim();
+        message = ruleMessages.unexpectedTransitionValue(
+          propertyToFlag,
+          physicalPropertiesMap[propertyToFlag],
+        );
+      }
 
       if (context.fix && !options?.['disable-auto-fix']) {
         if (propIsPhysical) {
@@ -59,6 +90,18 @@ const ruleFunction = (_, options, context) => {
           decl.value = physicalValuesMap[rootProp][decl.value];
         }
 
+        if (physicalTransitionProperties.length) {
+          let newValue = decl.value;
+          physicalTransitionProperties.forEach((property) => {
+            newValue = newValue.replace(
+              property.trim(),
+              physicalPropertiesMap[property.trim()],
+            );
+          });
+
+          decl.value = newValue;
+        }
+
         return;
       }