stylelint-plugin-logical-css 1.0.0 → 1.1.0

package/README.md

@@ -270,6 +270,10 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
 body {
   max-block-size: 100vh; /* Will flag the physical use of viewport "height" */
 }
+
+.container {
+  inline-size: clamp(10vw, 100%, 50vw); /* Will flag the physical use of viewport "width" */
+}
 ```
 
 ##### Allowed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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-units/index.js

@@ -19,22 +19,24 @@ const ruleFunction = (_, options, context) => {
 
       const physicalUnit = getValueUnit(decl.value);
 
-      if (
-        Array.isArray(options?.ignore) &&
-        options?.ignore.includes(physicalUnit)
-      ) {
+      const ignore = physicalUnit.some(
+        (unit) =>
+          Array.isArray(options?.ignore) && options?.ignore.includes(unit),
+      );
+
+      if (ignore) {
         return;
       }
 
       const message = ruleMessages.unexpectedUnit(
         physicalUnit,
-        physicalUnitsMap[physicalUnit],
+        physicalUnit.map((unit) => physicalUnitsMap[unit]),
       );
 
       if (context.fix) {
-        decl.value = decl.value.replace(
-          physicalUnit,
-          physicalUnitsMap[physicalUnit],
+        physicalUnit.forEach(
+          (unit) =>
+            (decl.value = decl.value.replace(unit, physicalUnitsMap[unit])),
         );
 
         return;

package/src/utils/isPhysicalUnit.js

@@ -1,25 +1,29 @@
 import { physicalUnits } from './physical.js';
 
-const expression = /(\d+\s?)(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
+const expression = /\b\d+(\.\d+)?\s*(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw)\b/g;
 
 export function getValueUnit(value) {
   const match = value.match(expression);
 
   if (!match) return false;
 
-  const matchedUnit = match.find((item) =>
-    Object.values(physicalUnits).includes(item),
+  const matches = Array.isArray(match) ? match : [match];
+
+  const matchedUnit = matches.map(
+    (match) => physicalUnits[match.replace(/[0-9]/g, '')],
   );
 
   return matchedUnit;
 }
 
 export function isPhysicalUnit(value) {
-  const unit = getValueUnit(value);
+  const units = getValueUnit(value);
 
-  if (!unit) return false;
+  if (!units) return false;
 
-  const unitIsPhysical = Object.values(physicalUnits).includes(unit);
+  const unitIsPhysical = Object.values(physicalUnits).some((unit) =>
+    units.find((match) => match.includes(unit)),
+  );
 
   return unitIsPhysical;
 }