stylelint-plugin-logical-css 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Fedya Petrakov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# Stylelint Plugin Logical CSS
+
+Proper docs to come, but this plugin will expose two rules:
+
+- `use-logical-properties-and-values`
+
+  This rule will enforce the use of logical properties and values
+
+- `use-logical-units`
+
+  This rule will enforce the use of logical viewport units

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "stylelint-plugin-logical-css",
+  "version": "0.0.1",
+  "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
+  "main": "index.js",
+  "files": [
+    "src/**/*.js",
+    "!**/**/*.test.js"
+  ],
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuschick/stylelint-plugin-logical-css.git"
+  },
+  "author": "Daniel Yuschick",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yuschick/stylelint-plugin-logical-css/issues"
+  },
+  "homepage": "https://github.com/yuschick/stylelint-plugin-logical-css#readme",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [
+    "Stylelint",
+    "Plugin",
+    "CSS",
+    "Logical CSS",
+    "Internationalization",
+    "i18n"
+  ],
+  "peerDependencies": {
+    "stylelint": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
+  },
+  "devDependencies": {
+    "jest": "^29.4.3",
+    "jest-cli": "^29.4.3",
+    "jest-preset-stylelint": "^6.1.0",
+    "stylelint": "^15.2.0"
+  }
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+const stylelint = require("stylelint");
+
+const ruleName = "plugin/use-logical-properties-and-values";
+
+const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+  unexpectedProp(physicalProperty, logicalProperty) {
+    return `Unexpected "${physicalProperty}" property. Use "${logicalProperty}".`;
+  },
+  unexpectedValue(property, physicalValue, logicalValue) {
+    return `Unexpected "${physicalValue}" value in "${property}" property. Use "${logicalValue}".`;
+  },
+});
+
+const ruleMeta = {
+  url: "https://github.com/yuschick/stylelint-plugin-logical-css",
+};
+
+module.exports = {
+  ruleName,
+  ruleMessages,
+  ruleMeta,
+};

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

@@ -0,0 +1,50 @@
+"use strict";
+
+const stylelint = require("stylelint");
+
+const { ruleName, ruleMessages, ruleMeta } = require("./base");
+const { isPhysicalProperty } = require("../../utils/isPhysicalProperty");
+const { isPhysicalValue } = require("../../utils/isPhysicalValue");
+const { physicalPropertiesMap } = require("../../utils/physicalPropertiesMap");
+const { physicalValuesMap } = require("../../utils/physicalValuesMap");
+
+const ruleFunction = () => {
+  return (root, result) => {
+    const validOptions = stylelint.utils.validateOptions(result, ruleName);
+
+    if (!validOptions) {
+      return;
+    }
+
+    root.walkDecls((decl) => {
+      const propIsPhysical = isPhysicalProperty(decl.prop);
+      const valueIsPhysical = isPhysicalValue(decl.value);
+
+      if (!propIsPhysical && !valueIsPhysical) return;
+
+      const message = propIsPhysical
+        ? ruleMessages.unexpectedProp(
+            decl.prop,
+            physicalPropertiesMap[decl.prop]
+          )
+        : ruleMessages.unexpectedValue(
+            decl.prop,
+            decl.value,
+            physicalValuesMap[decl.prop][decl.value]
+          );
+
+      stylelint.utils.report({
+        message,
+        node: decl,
+        result,
+        ruleName,
+      });
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = ruleMessages;
+ruleFunction.meta = ruleMeta;
+
+module.exports = stylelint.createPlugin(ruleName, ruleFunction);

package/src/rules/use-logical-units/base.js

@@ -0,0 +1,21 @@
+"use strict";
+
+const stylelint = require("stylelint");
+
+const ruleName = "plugin/use-logical-units";
+
+const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+  unexpectedUnit(physicalUnit, logicalUnit) {
+    return `Unexpected "${physicalUnit}" unit. Use "${logicalUnit}".`;
+  },
+});
+
+const ruleMeta = {
+  url: "https://github.com/yuschick/stylelint-plugin-logical-css",
+};
+
+module.exports = {
+  ruleName,
+  ruleMessages,
+  ruleMeta,
+};

package/src/rules/use-logical-units/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+const stylelint = require("stylelint");
+
+const { ruleName, ruleMessages, ruleMeta } = require("./base");
+const { getValueUnit, isPhysicalUnit } = require("../../utils/isPhysicalUnit");
+const { physicalUnitsMap } = require("../../utils/physicalUnitsMap");
+
+const ruleFunction = () => {
+  return (root, result) => {
+    const validOptions = stylelint.utils.validateOptions(result, ruleName);
+
+    if (!validOptions) {
+      return;
+    }
+
+    root.walkDecls((decl) => {
+      const unitIsPhysical = isPhysicalUnit(decl.value);
+
+      if (!unitIsPhysical) return;
+
+      const physicalUnit = getValueUnit(decl.value);
+      const message = ruleMessages.unexpectedUnit(
+        physicalUnit,
+        physicalUnitsMap[physicalUnit]
+      );
+
+      stylelint.utils.report({
+        message,
+        node: decl,
+        result,
+        ruleName,
+      });
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = ruleMessages;
+ruleFunction.meta = ruleMeta;
+
+module.exports = stylelint.createPlugin(ruleName, ruleFunction);

package/src/utils/isPhysicalProperty.js

@@ -0,0 +1,13 @@
+const { physicalPropertiesMap } = require("./physicalPropertiesMap");
+
+function isPhysicalProperty(property) {
+  const physicalProperties = Object.keys(physicalPropertiesMap);
+
+  const propIsPhysical = physicalProperties.includes(property);
+
+  return propIsPhysical;
+}
+
+module.exports = {
+  isPhysicalProperty,
+};

package/src/utils/isPhysicalUnit.js

@@ -0,0 +1,30 @@
+const { physicalUnits } = require("./physical");
+
+const expression = /(\d+\s?)(dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
+
+function getValueUnit(value) {
+  const match = value.match(expression);
+
+  if (!match) return false;
+
+  const matchedUnit = match.find((item) =>
+    Object.values(physicalUnits).includes(item)
+  );
+
+  return matchedUnit;
+}
+
+function isPhysicalUnit(value) {
+  const unit = getValueUnit(value);
+
+  if (!unit) return false;
+
+  const unitIsPhysical = Object.values(physicalUnits).includes(unit);
+
+  return unitIsPhysical;
+}
+
+module.exports = {
+  getValueUnit,
+  isPhysicalUnit,
+};

package/src/utils/isPhysicalValue.js

@@ -0,0 +1,16 @@
+const { physicalAxis, physicalValues } = require("./physical");
+
+function isPhysicalValue(value) {
+  const values = [
+    ...Object.values(physicalValues),
+    ...Object.values(physicalAxis),
+  ];
+
+  const valueIsPhysical = values.some((direction) => value.includes(direction));
+
+  return valueIsPhysical;
+}
+
+module.exports = {
+  isPhysicalValue,
+};

package/src/utils/logical.js

@@ -0,0 +1,98 @@
+const logicalAxis = Object.freeze({
+  block: "block",
+  inline: "inline",
+});
+
+const logicalInlinePoints = Object.freeze({
+  end: "end",
+  start: "start",
+});
+
+const logicalProperties = Object.freeze({
+  blockSize: "block-size",
+  borderBlock: "border-block",
+  borderBlockColor: "border-block-color",
+  borderBlockEnd: "border-block-end",
+  borderBlockEndColor: "border-block-end-color",
+  borderBlockEndStyle: "border-block-end-style",
+  borderBlockEndWidth: "border-block-end-width",
+  borderBlockStart: "border-block-start",
+  borderBlockStartColor: "border-block-start-color",
+  borderBlockStartStyle: "border-block-start-style",
+  borderBlockStartWidth: "border-block-start-width",
+  borderBlockStyle: "border-block-style",
+  borderBlockWidth: "border-block-width",
+  borderColor: "border-color",
+  borderEndEndRadius: "border-end-end-radius",
+  borderEndStartRadius: "border-end-start-radius",
+  borderInline: "border-inline",
+  borderInlineColor: "border-inline-color",
+  borderInlineEnd: "border-inline-end",
+  borderInlineEndColor: "border-inline-end-color",
+  borderInlineEndStyle: "border-inline-end-style",
+  borderInlineEndWidth: "border-inline-end-width",
+  borderInlineStart: "border-inline-start",
+  borderInlineStartColor: "border-inline-start-color",
+  borderInlineStartStyle: "border-inline-start-style",
+  borderInlineStartWidth: "border-inline-start-width",
+  borderInlineStyle: "border-inline-style",
+  borderInlineWidth: "border-inline-width",
+  borderStartEndRadius: "border-start-end-radius",
+  borderStartStartRadius: "border-start-start-radius",
+  borderStyle: "border-style",
+  borderWidth: "border-width",
+  inlineSize: "inline-size",
+  inset: "inset",
+  insetBlock: "inset-block",
+  insetBlockEnd: "inset-block-end",
+  insetBlockStart: "inset-block-start",
+  insetInline: "inset-inline",
+  insetInlineEnd: "inset-inline-end",
+  insetInlineStart: "inset-inline-start",
+  marginBlock: "margin-block",
+  marginBlockEnd: "margin-block-end",
+  marginBlockStart: "margin-block-start",
+  marginInline: "margin-inline",
+  marginInlineEnd: "margin-inline-end",
+  marginInlineStart: "margin-inline-start",
+  maxBlockSize: "max-block-size",
+  maxInlineSize: "max-inline-size",
+  minBlockSize: "min-block-size",
+  minInlineSize: "min-inline-size",
+  overflowBlock: "overflow-block",
+  overflowInline: "overflow-inline",
+  overscrollBehaviorBlock: "overscroll-behavior-block",
+  overscrollBehaviorInline: "overscroll-behavior-inline",
+  paddingBlock: "padding-block",
+  paddingBlockEnd: "padding-block-end",
+  paddingBlockStart: "padding-block-start",
+  paddingInline: "padding-inline",
+  paddingInlineEnd: "padding-inline-end",
+  paddingInlineStart: "padding-inline-start",
+});
+
+const logicalUnits = Object.freeze({
+  dvb: "dvb",
+  dvi: "dvi",
+  lvb: "lvb",
+  lvi: "lvi",
+  svb: "svb",
+  svi: "svi",
+  vb: "vb",
+  vi: "vi",
+});
+
+const logicalValues = Object.freeze({
+  blockEnd: "block-end",
+  blockStart: "block-start",
+  inlineEnd: "inline-end",
+  inlineStart: "inline-start",
+});
+
+module.exports = {
+  logicalAxis,
+  logicalInlinePoints,
+  logicalProperties,
+  logicalUnits,
+  logicalValues,
+};

package/src/utils/physical.js

@@ -0,0 +1,81 @@
+const physicalAxis = Object.freeze({
+  horizontal: "horizontal",
+  vertical: "vertical",
+  x: "x",
+  y: "y",
+});
+
+const physicalProperties = Object.freeze({
+  borderBottom: "border-bottom",
+  borderBottomColor: "border-bottom-color",
+  borderBottomLeftRadius: "border-bottom-left-radius",
+  borderBottomRightRadius: "border-bottom-right-radius",
+  borderBottomStyle: "border-bottom-style",
+  borderBottomWidth: "border-bottom-width",
+  borderLeft: "border-left",
+  borderLeftColor: "border-left-color",
+  borderLeftStyle: "border-left-style",
+  borderLeftWidth: "border-left-width",
+  borderRight: "border-right",
+  borderRightColor: "border-right-color",
+  borderRightStyle: "border-right-style",
+  borderRightWidth: "border-right-width",
+  borderTop: "border-top",
+  borderTopColor: "border-top-color",
+  borderTopLeftRadius: "border-top-left-radius",
+  borderTopRightRadius: "border-top-right-radius",
+  borderTopStyle: "border-top-style",
+  borderTopWidth: "border-top-width",
+  bottom: "bottom",
+  captionSide: "caption-side",
+  clear: "clear",
+  float: "float",
+  height: "height",
+  left: "left",
+  marginBottom: "margin-bottom",
+  marginLeft: "margin-left",
+  marginRight: "margin-right",
+  marginTop: "margin-top",
+  maxHeight: "max-height",
+  maxWidth: "max-width",
+  minHeight: "min-height",
+  minWidth: "min-width",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
+  overscrollBehaviorX: "overscroll-behavior-x",
+  overscrollBehaviorY: "overscroll-behavior-y",
+  paddingBottom: "padding-bottom",
+  paddingLeft: "padding-left",
+  paddingRight: "padding-right",
+  paddingTop: "padding-top",
+  resize: "resize",
+  right: "right",
+  textAlign: "text-align",
+  top: "top",
+  width: "width",
+});
+
+const physicalUnits = Object.freeze({
+  dvh: "dvh",
+  dvw: "dvw",
+  lvh: "lvh",
+  lvw: "lvw",
+  svh: "svh",
+  svw: "svw",
+  vh: "vh",
+  vw: "vw",
+});
+
+const physicalValues = Object.freeze({
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+  top: "top",
+});
+
+module.exports = {
+  physicalAxis,
+  physicalProperties,
+  physicalUnits,
+  physicalValues,
+};

package/src/utils/physicalPropertiesMap.js

@@ -0,0 +1,60 @@
+const { logicalProperties } = require("./logical");
+const { physicalProperties } = require("./physical");
+
+const physicalPropertiesMap = Object.freeze({
+  [physicalProperties.borderBottom]: logicalProperties.borderBlockEnd,
+  [physicalProperties.borderBottomColor]: logicalProperties.borderBlockEndColor,
+  [physicalProperties.borderBottomLeftRadius]:
+    logicalProperties.borderEndStartRadius,
+  [physicalProperties.borderBottomRightRadius]:
+    logicalProperties.borderEndEndRadius,
+  [physicalProperties.borderBottomStyle]: logicalProperties.borderBlockEndStyle,
+  [physicalProperties.borderBottomWidth]: logicalProperties.borderBlockEndWidth,
+  [physicalProperties.borderLeft]: logicalProperties.borderInlineStart,
+  [physicalProperties.borderLeftColor]:
+    logicalProperties.borderInlineStartColor,
+  [physicalProperties.borderLeftStyle]:
+    logicalProperties.borderInlineStartStyle,
+  [physicalProperties.borderLeftWidth]:
+    logicalProperties.borderInlineStartWidth,
+  [physicalProperties.borderRight]: logicalProperties.borderInlineEnd,
+  [physicalProperties.borderRightColor]: logicalProperties.borderInlineEndColor,
+  [physicalProperties.borderRightStyle]: logicalProperties.borderInlineEndStyle,
+  [physicalProperties.borderRightWidth]: logicalProperties.borderInlineEndWidth,
+  [physicalProperties.borderTop]: logicalProperties.borderBlockStart,
+  [physicalProperties.borderTopColor]: logicalProperties.borderBlockStartColor,
+  [physicalProperties.borderTopLeftRadius]:
+    logicalProperties.borderStartStartRadius,
+  [physicalProperties.borderTopRightRadius]:
+    logicalProperties.borderStartEndRadius,
+  [physicalProperties.borderTopStyle]: logicalProperties.borderBlockStartStyle,
+  [physicalProperties.borderTopWidth]: logicalProperties.borderBlockStartWidth,
+  [physicalProperties.bottom]: logicalProperties.insetBlockEnd,
+  [physicalProperties.height]: logicalProperties.blockSize,
+  [physicalProperties.left]: logicalProperties.insetInlineStart,
+  [physicalProperties.marginBottom]: logicalProperties.marginBlockEnd,
+  [physicalProperties.marginLeft]: logicalProperties.marginInlineStart,
+  [physicalProperties.marginRight]: logicalProperties.marginInlineEnd,
+  [physicalProperties.marginTop]: logicalProperties.marginBlockStart,
+  [physicalProperties.maxHeight]: logicalProperties.maxBlockSize,
+  [physicalProperties.maxWidth]: logicalProperties.maxInlineSize,
+  [physicalProperties.minHeight]: logicalProperties.minBlockSize,
+  [physicalProperties.minWidth]: logicalProperties.minInlineSize,
+  [physicalProperties.overflowX]: logicalProperties.overflowInline,
+  [physicalProperties.overflowY]: logicalProperties.overflowBlock,
+  [physicalProperties.overscrollBehaviorX]:
+    logicalProperties.overscrollBehaviorInline,
+  [physicalProperties.overscrollBehaviorY]:
+    logicalProperties.overscrollBehaviorBlock,
+  [physicalProperties.paddingBottom]: logicalProperties.paddingBlockEnd,
+  [physicalProperties.paddingLeft]: logicalProperties.paddingInlineStart,
+  [physicalProperties.paddingRight]: logicalProperties.paddingInlineEnd,
+  [physicalProperties.paddingTop]: logicalProperties.paddingBlockStart,
+  [physicalProperties.right]: logicalProperties.insetInlineEnd,
+  [physicalProperties.top]: logicalProperties.insetBlockStart,
+  [physicalProperties.width]: logicalProperties.inlineSize,
+});
+
+module.exports = {
+  physicalPropertiesMap,
+};

package/src/utils/physicalUnitsMap.js

@@ -0,0 +1,17 @@
+const { logicalUnits } = require("./logical");
+const { physicalUnits } = require("./physical");
+
+const physicalUnitsMap = Object.freeze({
+  [physicalUnits.dvh]: logicalUnits.dvb,
+  [physicalUnits.dvw]: logicalUnits.dvi,
+  [physicalUnits.lvh]: logicalUnits.lvb,
+  [physicalUnits.lvw]: logicalUnits.lvi,
+  [physicalUnits.svh]: logicalUnits.svb,
+  [physicalUnits.svw]: logicalUnits.svi,
+  [physicalUnits.vh]: logicalUnits.vb,
+  [physicalUnits.vw]: logicalUnits.vi,
+});
+
+module.exports = {
+  physicalUnitsMap,
+};

package/src/utils/physicalValuesMap.js

@@ -0,0 +1,39 @@
+const {
+  logicalAxis,
+  logicalInlinePoints,
+  logicalValues,
+} = require("./logical");
+const {
+  physicalAxis,
+  physicalProperties,
+  physicalValues,
+} = require("./physical");
+
+const physicalValuesMap = Object.freeze({
+  [physicalProperties.captionSide]: {
+    [physicalValues.bottom]: logicalValues.blockEnd,
+    [physicalValues.left]: logicalValues.inlineStart,
+    [physicalValues.right]: logicalValues.inlineEnd,
+    [physicalValues.top]: logicalValues.blockStart,
+  },
+  [physicalProperties.clear]: {
+    [physicalValues.left]: logicalValues.inlineStart,
+    [physicalValues.right]: logicalValues.inlineEnd,
+  },
+  [physicalProperties.float]: {
+    [physicalValues.left]: logicalValues.inlineStart,
+    [physicalValues.right]: logicalValues.inlineEnd,
+  },
+  [physicalProperties.resize]: {
+    [physicalAxis.horizontal]: logicalAxis.inline,
+    [physicalAxis.vertical]: logicalAxis.block,
+  },
+  [physicalProperties.textAlign]: {
+    [physicalValues.left]: logicalInlinePoints.start,
+    [physicalValues.right]: logicalInlinePoints.end,
+  },
+});
+
+module.exports = {
+  physicalValuesMap,
+};