stylelint-plugin-logical-css 0.4.1 → 0.6.0

package/README.md

@@ -139,3 +139,10 @@ body {
   max-block-size: 100vb;
 }
 ```
+
+## TODO
+
+What can be expected in the future.
+
+[] Refactor to TypeScript
+[] Support disabling individual property checks

package/package.json

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

@@ -3,11 +3,12 @@
 const stylelint = require('stylelint');
 
 const { ruleName, ruleMessages, ruleMeta } = require('./base');
+const { vendorPrefixes } = require('../../utils/vendorPrefixes');
+const { physicalProperties } = require('../../utils/physical');
 const { isPhysicalProperty } = require('../../utils/isPhysicalProperty');
 const { isPhysicalValue } = require('../../utils/isPhysicalValue');
 const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
 const { physicalValuesMap } = require('../../utils/physicalValuesMap');
-const { propsToSkip } = require('../../utils/propsToSkip');
 
 const ruleFunction = (_, options, context) => {
   return (root, result) => {
@@ -18,7 +19,13 @@ const ruleFunction = (_, options, context) => {
     }
 
     root.walkDecls((decl) => {
-      if (propsToSkip.includes(decl.prop)) return;
+      let rootProp = decl.prop;
+      vendorPrefixes.forEach(
+        (prefix) => (rootProp = rootProp.replace(prefix, '')),
+      );
+
+      const isValidProp = Object.values(physicalProperties).includes(rootProp);
+      if (!isValidProp) return;
 
       const propIsPhysical = isPhysicalProperty(decl.prop);
       const valueIsPhysical = isPhysicalValue(decl.value);
@@ -28,21 +35,21 @@ const ruleFunction = (_, options, context) => {
       const message = propIsPhysical
         ? ruleMessages.unexpectedProp(
             decl.prop,
-            physicalPropertiesMap[decl.prop],
+            physicalPropertiesMap[rootProp],
           )
         : ruleMessages.unexpectedValue(
             decl.prop,
             decl.value,
-            physicalValuesMap[decl.prop][decl.value],
+            physicalValuesMap[rootProp][decl.value],
           );
 
       if (context.fix && options?.['enable-auto-fix']) {
         if (propIsPhysical) {
-          decl.prop = physicalPropertiesMap[decl.prop];
+          decl.prop = physicalPropertiesMap[rootProp];
         }
 
         if (valueIsPhysical) {
-          decl.value = physicalValuesMap[decl.value];
+          decl.value = physicalValuesMap[rootProp][decl.value];
         }
 
         return;

package/src/utils/physical.js

@@ -6,7 +6,6 @@ const physicalAxis = Object.freeze({
 });
 
 const physicalProperties = Object.freeze({
-  webkitBoxOrient: '-webkit-box-orient',
   borderBottom: 'border-bottom',
   borderBottomColor: 'border-bottom-color',
   borderBottomLeftRadius: 'border-bottom-left-radius',
@@ -27,6 +26,7 @@ const physicalProperties = Object.freeze({
   borderTopRightRadius: 'border-top-right-radius',
   borderTopStyle: 'border-top-style',
   borderTopWidth: 'border-top-width',
+  boxOrient: 'box-orient',
   bottom: 'bottom',
   captionSide: 'caption-side',
   clear: 'clear',

package/src/utils/physicalValuesMap.js

@@ -10,7 +10,7 @@ const {
 } = require('./physical');
 
 const physicalValuesMap = Object.freeze({
-  [physicalProperties.webkitBoxOrient]: {
+  [physicalProperties.boxOrient]: {
     [physicalAxis.horizontal]: `${logicalAxis.inline}-axis`,
     [physicalAxis.vertical]: `${logicalAxis.block}-axis`,
   },

package/src/utils/vendorPrefixes.js

@@ -0,0 +1,3 @@
+const vendorPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
+
+module.exports = { vendorPrefixes };

package/src/utils/propsToSkip.js

@@ -1,21 +0,0 @@
-/*
-    The properties included in this array can contain physical values like left and bottom.
-    However, logical values for the4se properties are not yet supported. So for the time being,
-    we skip linting them entirely.
-*/
-const propsToSkip = [
-  'background',
-  'background-position',
-  'background-position-x',
-  'background-position-y',
-  'grid-area',
-  'grid-template-areas',
-  '-webkit-mask-position',
-  'mask-position',
-  'transform-origin',
-  'vertical-align',
-];
-
-module.exports = {
-  propsToSkip,
-};