stylelint-plugin-logical-css 0.0.5 → 0.1.0

package/README.md

@@ -1,11 +1,100 @@
 # Stylelint Plugin Logical CSS
 
-Proper docs to come, but this plugin will expose two rules:
+![License](https://img.shields.io/github/license/yuschick/stylelint-plugin-logical-css?style=for-the-badge)
+![NPM Version](https://img.shields.io/npm/v/stylelint-plugin-logical-css?style=for-the-badge)
 
-- `use-logical-properties-and-values`
+Stylelint Plugin Logical CSS aims to enforce the use of logical CSS properties,
+values and units. The plugin provides two rules. But first, let's get set up.
 
-  This rule will enforce the use of logical properties and values
+> [Read more about Logical CSS on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
 
-- `use-logical-units`
+## Getting Started
 
-  This rule will enforce the use of logical viewport units
+> Before getting started with the plugin, you must first have
+> [Stylelint](https://stylelint.io/) version 14.0.0 or greater installed
+
+To get started using the plugin, it must first be installed.
+
+```bash
+npm i stylelint-plugin-logical-css --save-dev
+```
+
+```bash
+yarn add stylelint-plugin-logical-css --dev
+```
+
+With the plugin installed, the rule(s) can now be added to the project's
+Stylelint configuration.
+
+```json
+{
+  "plugins": ["stylelint-plugin-logical-css"],
+  "rules": {
+    "plugin/use-logical-properties-and-values": [
+      true,
+      { "severity": "warning" }
+    ],
+    "plugin/use-logical-units": [true, { "severity": "warning" }]
+  }
+}
+```
+
+## Rules
+
+Let's explore each rule to better understand what it does, and does not, allow.
+
+### `plugin/use-logical-properties-and-values`
+
+> ➟
+> [Learn more about the properties and values supported by this rule](./src/rules/use-logical-properties-and-values)
+
+This rule is responsible for checking both CSS properties and values. When a
+physical property or value is found, it will be flagged.
+
+#### Not Allowed
+
+```css
+.heading {
+  max-width: 90ch; /* Will flag the use of "width" */
+  text-align: left; /* Will flag the use of "left" */
+}
+```
+
+#### Allowed
+
+```css
+.heading {
+  max-inline-size: 90ch;
+  text-align: start;
+}
+```
+
+### `plugin/use-logical-units`
+
+> ➟
+> [Learn more about the properties and values supported by this rule](./src/rules/use-logical-units)
+
+> Read about current
+> [browser support for logical viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic).
+
+This rule is responsible for checking that logical CSS units are used.
+Specifically, viewport units like `vw` and `vh` which stand for viewport width
+and viewport height respectively will not reflect different writing modes and
+directions. Instead, this rule will enforce the logical equivalents, `vi` and
+`vb`.
+
+#### Not Allowed
+
+```css
+body {
+  max-block-size: 100vh; /* Will flag the physical use of viewport "height" */
+}
+```
+
+#### Allowed
+
+```css
+body {
+  max-block-size: 100vb;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
   "main": "src/index.js",
   "files": [
@@ -8,6 +8,7 @@
     "!**/**/*.test.js"
   ],
   "scripts": {
+    "prepare": "husky install",
     "test": "jest"
   },
   "repository": {
@@ -35,9 +36,22 @@
     "stylelint": "^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "eslint": "^8.35.0",
+    "husky": "^8.0.0",
     "jest": "^29.4.3",
     "jest-cli": "^29.4.3",
     "jest-preset-stylelint": "^6.1.0",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
+    "prettier-eslint": "^15.0.1",
     "stylelint": "^15.2.0"
+  },
+  "lint-staged": {
+    "**/*.{js|md}": [
+      "eslint",
+      "prettier --write"
+    ]
   }
 }

package/src/index.js

@@ -1,4 +1,4 @@
-const useLogicalPropertiesAndValues = require("./rules/use-logical-properties-and-values");
-const useLogicalUnits = require("./rules/use-logical-units");
+const useLogicalPropertiesAndValues = require('./rules/use-logical-properties-and-values');
+const useLogicalUnits = require('./rules/use-logical-units');
 
 module.exports = [useLogicalPropertiesAndValues, useLogicalUnits];

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

@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 
-const stylelint = require("stylelint");
+const stylelint = require('stylelint');
 
-const ruleName = "plugin/use-logical-properties-and-values";
+const ruleName = 'plugin/use-logical-properties-and-values';
 
 const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   unexpectedProp(physicalProperty, logicalProperty) {
@@ -14,7 +14,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
 });
 
 const ruleMeta = {
-  url: "https://github.com/yuschick/stylelint-plugin-logical-css",
+  url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
 };
 
 module.exports = {

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

@@ -1,12 +1,12 @@
-"use strict";
+'use strict';
 
-const stylelint = require("stylelint");
+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 { 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) => {
@@ -25,12 +25,12 @@ const ruleFunction = () => {
       const message = propIsPhysical
         ? ruleMessages.unexpectedProp(
             decl.prop,
-            physicalPropertiesMap[decl.prop]
+            physicalPropertiesMap[decl.prop],
           )
         : ruleMessages.unexpectedValue(
             decl.prop,
             decl.value,
-            physicalValuesMap[decl.prop][decl.value]
+            physicalValuesMap[decl.prop][decl.value],
           );
 
       stylelint.utils.report({

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

@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 
-const stylelint = require("stylelint");
+const stylelint = require('stylelint');
 
-const ruleName = "plugin/use-logical-units";
+const ruleName = 'plugin/use-logical-units';
 
 const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   unexpectedUnit(physicalUnit, logicalUnit) {
@@ -11,7 +11,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
 });
 
 const ruleMeta = {
-  url: "https://github.com/yuschick/stylelint-plugin-logical-css",
+  url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
 };
 
 module.exports = {

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

@@ -1,10 +1,10 @@
-"use strict";
+'use strict';
 
-const stylelint = require("stylelint");
+const stylelint = require('stylelint');
 
-const { ruleName, ruleMessages, ruleMeta } = require("./base");
-const { getValueUnit, isPhysicalUnit } = require("../../utils/isPhysicalUnit");
-const { physicalUnitsMap } = require("../../utils/physicalUnitsMap");
+const { ruleName, ruleMessages, ruleMeta } = require('./base');
+const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
+const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
 
 const ruleFunction = () => {
   return (root, result) => {
@@ -22,7 +22,7 @@ const ruleFunction = () => {
       const physicalUnit = getValueUnit(decl.value);
       const message = ruleMessages.unexpectedUnit(
         physicalUnit,
-        physicalUnitsMap[physicalUnit]
+        physicalUnitsMap[physicalUnit],
       );
 
       stylelint.utils.report({

package/src/utils/isPhysicalProperty.js

@@ -1,4 +1,4 @@
-const { physicalPropertiesMap } = require("./physicalPropertiesMap");
+const { physicalPropertiesMap } = require('./physicalPropertiesMap');
 
 function isPhysicalProperty(property) {
   const physicalProperties = Object.keys(physicalPropertiesMap);

package/src/utils/isPhysicalUnit.js

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

package/src/utils/isPhysicalValue.js

@@ -1,4 +1,4 @@
-const { physicalAxis, physicalValues } = require("./physical");
+const { physicalAxis, physicalValues } = require('./physical');
 
 function isPhysicalValue(value) {
   const values = [

package/src/utils/logical.js

@@ -1,92 +1,94 @@
 const logicalAxis = Object.freeze({
-  block: "block",
-  inline: "inline",
+  block: 'block',
+  inline: 'inline',
 });
 
 const logicalInlinePoints = Object.freeze({
-  end: "end",
-  start: "start",
+  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",
+  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',
+  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',
+  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",
+  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",
+  blockEnd: 'block-end',
+  blockStart: 'block-start',
+  inlineEnd: 'inline-end',
+  inlineStart: 'inline-start',
 });
 
 module.exports = {

package/src/utils/physical.js

@@ -1,76 +1,78 @@
 const physicalAxis = Object.freeze({
-  horizontal: "horizontal",
-  vertical: "vertical",
-  x: "x",
-  y: "y",
+  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",
+  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',
+  containIntrinsicHeight: 'contain-intrinsic-height',
+  containIntrinsicWidth: 'contain-intrinsic-width',
+  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",
+  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",
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  top: 'top',
 });
 
 module.exports = {

package/src/utils/physicalPropertiesMap.js

@@ -1,5 +1,5 @@
-const { logicalProperties } = require("./logical");
-const { physicalProperties } = require("./physical");
+const { logicalProperties } = require('./logical');
+const { physicalProperties } = require('./physical');
 
 const physicalPropertiesMap = Object.freeze({
   [physicalProperties.borderBottom]: logicalProperties.borderBlockEnd,
@@ -30,6 +30,10 @@ const physicalPropertiesMap = Object.freeze({
   [physicalProperties.borderTopStyle]: logicalProperties.borderBlockStartStyle,
   [physicalProperties.borderTopWidth]: logicalProperties.borderBlockStartWidth,
   [physicalProperties.bottom]: logicalProperties.insetBlockEnd,
+  [physicalProperties.containIntrinsicHeight]:
+    logicalProperties.containIntrinsicBlockSize,
+  [physicalProperties.containIntrinsicWidth]:
+    logicalProperties.containIntrinsicInlineSize,
   [physicalProperties.height]: logicalProperties.blockSize,
   [physicalProperties.left]: logicalProperties.insetInlineStart,
   [physicalProperties.marginBottom]: logicalProperties.marginBlockEnd,

package/src/utils/physicalUnitsMap.js

@@ -1,5 +1,5 @@
-const { logicalUnits } = require("./logical");
-const { physicalUnits } = require("./physical");
+const { logicalUnits } = require('./logical');
+const { physicalUnits } = require('./physical');
 
 const physicalUnitsMap = Object.freeze({
   [physicalUnits.dvh]: logicalUnits.dvb,

package/src/utils/physicalValuesMap.js

@@ -2,12 +2,12 @@ const {
   logicalAxis,
   logicalInlinePoints,
   logicalValues,
-} = require("./logical");
+} = require('./logical');
 const {
   physicalAxis,
   physicalProperties,
   physicalValues,
-} = require("./physical");
+} = require('./physical');
 
 const physicalValuesMap = Object.freeze({
   [physicalProperties.captionSide]: {