stylelint-plugin-logical-css 1.2.0 → 1.2.2

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`                    |
@@ -251,7 +251,7 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
 ```json
 {
   "rules": {
-    "plugin/use-logical-properties-and-values": [
+    "plugin/use-logical-units": [
       true,
       {
         "severity": "warning",
@@ -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.2",
   "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
   "main": "src/index.js",
   "type": "module",
@@ -10,7 +10,6 @@
     "!**/**/*.test.js"
   ],
   "scripts": {
-    "prepare": "husky install",
     "jest": "cross-env NODE_OPTIONS=\"--experimental-vm-modules\" jest --runInBand",
     "test": "npm run jest",
     "test:watch": "npm run jest -- --watch"
@@ -36,18 +35,15 @@
     "lint",
     "linter",
     "stylelint",
-    "stylelint-plugin",
+    "stylelint plugin",
     "logical css"
   ],
   "peerDependencies": {
     "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
     "cross-env": "^7.0.3",
     "eslint": "^8.35.0",
-    "husky": "^8.0.3",
     "jest": "^29.4.3",
     "jest-cli": "^29.4.3",
     "jest-light-runner": "^0.6.0",
@@ -56,11 +52,5 @@
     "prettier": "^3.0.3",
     "prettier-eslint": "^16.1.2",
     "stylelint": "^16.1.0"
-  },
-  "lint-staged": {
-    "**/*.js|md|json": [
-      "eslint",
-      "prettier --write"
-    ]
   }
-}
+}

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/logical.js

@@ -44,7 +44,6 @@ export const logicalProperties = Object.freeze({
   containIntrinsicBlockSize: 'contain-intrinsic-block-size',
   containIntrinsicInlineSize: 'contain-intrinsic-inline-size',
   inlineSize: 'inline-size',
-  inset: 'inset',
   insetBlock: 'inset-block',
   insetBlockEnd: 'inset-block-end',
   insetBlockStart: 'inset-block-start',

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,