stylelint-plugin-logical-css 1.2.0 → 1.2.1

package/README.md

@@ -95,7 +95,9 @@ physical property or value is found, it will be flagged.
   max-width: 90ch; /* Will flag the use of "width" */
   text-align: left; /* Will flag the use of "left" */
   opacity: 1;
-  transition: opacity 1s ease, max-width 1s ease; /* Will flag the use of 'max-width' */
+  transition:
+    opacity 1s ease,
+    max-width 1s ease; /* Will flag the use of 'max-width' */
 }
 ```
 
@@ -196,8 +198,6 @@ 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-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`                    |
@@ -272,7 +272,11 @@ body {
 }
 
 .container {
-  inline-size: clamp(10vw, 100%, 50vw); /* Will flag the physical use of viewport "width" */
+  inline-size: clamp(
+    10vw,
+    100%,
+    50vw
+  ); /* Will flag the physical use of viewport "width" */
 }
 ```
 

package/package.json

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

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

@@ -35,6 +35,10 @@ const ruleFunction = (_, options, context) => {
       ].includes(rootProp);
       if (!isValidProp) return;
 
+      const isCaptionSideProperty = rootProp === 'caption-side';
+      const isBlockAxisCaptionSideValue =
+        isCaptionSideProperty && ['top', 'bottom'].includes(decl.value);
+
       const isTransitionProperty = rootProp === 'transition';
       const physicalTransitionProperties =
         isTransitionProperty &&
@@ -49,9 +53,10 @@ const ruleFunction = (_, options, context) => {
       const valueIsPhysical = isPhysicalValue(decl.value);
 
       if (
-        !propIsPhysical &&
-        !valueIsPhysical &&
-        !physicalTransitionProperties.length
+        (!propIsPhysical &&
+          !valueIsPhysical &&
+          !physicalTransitionProperties.length) ||
+        isBlockAxisCaptionSideValue
       ) {
         return;
       }
@@ -64,6 +69,7 @@ const ruleFunction = (_, options, context) => {
           physicalPropertiesMap[rootProp],
         );
       }
+
       if (valueIsPhysical) {
         message = ruleMessages.unexpectedValue(
           decl.prop,
@@ -71,6 +77,7 @@ const ruleFunction = (_, options, context) => {
           physicalValuesMap[rootProp][decl.value],
         );
       }
+
       if (physicalTransitionProperties.length) {
         const propertyToFlag = physicalTransitionProperties[0].trim();
         message = ruleMessages.unexpectedTransitionValue(

package/src/utils/physicalValuesMap.js

@@ -11,10 +11,8 @@ export const physicalValuesMap = Object.freeze({
     [physicalAxis.vertical]: `${logicalAxis.block}-axis`,
   },
   [physicalProperties.captionSide]: {
-    [physicalValues.bottom]: logicalValues.blockEnd,
     [physicalValues.left]: logicalValues.inlineStart,
     [physicalValues.right]: logicalValues.inlineEnd,
-    [physicalValues.top]: logicalValues.blockStart,
   },
   [physicalProperties.clear]: {
     [physicalValues.left]: logicalValues.inlineStart,