stylelint-plugin-logical-css 0.7.1 → 0.9.0

package/README.md

@@ -42,30 +42,44 @@ configuration.
 
 ## Rules
 
-Let's explore each rule to better understand what it does, and does not, allow.
+- [plugin/use-logical-properties-and-values](#pluginuse-logical-properties-and-values)
+- [plugin/use-logical-units](#pluginuse-logical-units)
 
-### `plugin/use-logical-properties-and-values`
+---
 
-**👉 [Learn more about this rule](./src/rules/use-logical-properties-and-values)
-👈**
+### plugin/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.
 
-#### Options
+```json
+{
+  "rules": {
+    "plugin/use-logical-properties-and-values": [
+      true,
+      { "severity": "warning" }
+    ]
+  }
+}
+```
 
-The use-logical-properties-and-values rule accepts the following options:
+#### Options
 
-| Option          | Description                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------- |
-| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+| Option           | Description                                                              |
+| ---------------- | ------------------------------------------------------------------------ |
+| disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
+| ignore           | Pass an array of physical properties to ignore while linting.            |
 
 ```json
 {
   "rules": {
     "plugin/use-logical-properties-and-values": [
       true,
-      { "severity": "warning", "enable-auto-fix": true }
+      {
+        "severity": "warning",
+        "disable-auto-fix": true,
+        "ignore": ["overflow-y", "overflow-x"]
+      }
     ]
   }
 }
@@ -91,11 +105,120 @@ The use-logical-properties-and-values rule accepts the following options:
 }
 ```
 
----
+#### Supported Properties and Values
+
+##### Properties for sizing
+
+| Physical Property |  Logical Property |
+| ----------------- | ----------------- |
+| `height`          | `block-size`      |
+| `width`           | `inline-size`     |
+| `max-height`      | `max-block-size`  |
+| `max-width`       | `max-inline-size` |
+| `min-height`      | `min-block-size`  |
+| `min-width`       | `min-inline-size` |
+
+##### Properties for margins, borders, and padding
+
+| Physical Property                          |  Logical Property           |
+| ------------------------------------------ | --------------------------- |
+| `border-top` & `border-bottom`             | `border-block`              |
+| `border-top-color` & `border-bottom-color` | `border-block-color`        |
+| `border-top-style` & `border-bottom-style` | `border-block-style`        |
+| `border-top-width` & `border-bottom-width` | `border-block-width`        |
+| `border-left` & `border-right`             | `border-inline`             |
+| `border-left-color` & `border-right-color` | `border-inline-color`       |
+| `border-left-style` & `border-right-style` | `border-inline-style`       |
+| `border-left-width` & `border-right-width` | `border-inline-width`       |
+| `border-bottom`                            | `border-block-end`          |
+| `border-bottom-color`                      | `border-block-end-color`    |
+| `border-bottom-style`                      | `border-block-end-style`    |
+| `border-bottom-width`                      | `border-block-end-width`    |
+| `border-top`                               | `border-block-start`        |
+| `border-top-color`                         | `border-block-start-color`  |
+| `border-top-style`                         | `border-block-start-style`  |
+| `border-top-width`                         | `border-block-start-width`  |
+| `border-right`                             | `border-inline-end`         |
+| `border-right-color`                       | `border-inline-end-color`   |
+| `border-right-style`                       | `border-inline-end-style`   |
+| `border-right-width`                       | `border-inline-end-width`   |
+| `border-left`                              | `border-inline-start`       |
+| `border-left-color`                        | `border-inline-start-color` |
+| `border-left-style`                        | `border-inline-start-style` |
+| `border-left-width`                        | `border-inline-start-width` |
+| `border-bottom-left-radius`                | `border-end-start-radius`   |
+| `border-bottom-right-radius`               | `border-end-end-radius`     |
+| `border-top-left-radius`                   | `border-start-start-radius` |
+| `border-top-right-radius`                  | `border-start-end-radius`   |
+| `margin-top` & `margin-bottom`             | `margin-block`              |
+| `margin-top`                               | `margin-block-start`        |
+| `margin-bottom`                            | `margin-block-end`          |
+| `margin-left` & `margin-right`             | `margin-inline`             |
+| `margin-left`                              | `margin-inline-start`       |
+| `margin-right`                             | `margin-inline-end`         |
+| `padding-top` & `padding-bottom`           | `padding-block`             |
+| `padding-top`                              | `padding-block-start`       |
+| `padding-bottom`                           | `padding-block-end`         |
+| `padding-left` & `padding-right`           | `padding-inline`            |
+| `padding-left`                             | `padding-inline-start`      |
+| `padding-right`                            | `padding-inline-end`        |
+
+##### Properties for floating and positioning
+
+| Physical Property |  Logical Property     |
+| ----------------- | --------------------- |
+| `clear: left`     | `clear: inline-start` |
+| `clear: right`    | `clear: inline-end`   |
+| `float: left`     | `float: inline-start` |
+| `float: right`    | `float: inline-end`   |
+| `top` & `bottom`  | `inset-block`         |
+| `top`             | `inset-block-start`   |
+| `bottom`          | `inset-block-end`     |
+| `left` & `right`  | `inset-inline`        |
+| `left`            | `inset-inline-start`  |
+| `right`           | `inset-inline-end`    |
+
+##### Properties for size containment
+
+| Physical Property          |  Logical Property               |
+| -------------------------- | ------------------------------- |
+| `contain-intrinsic-height` | `contain-intrinsic-block-size`  |
+| `contain-intrinsic-width`  | `contain-intrinsic-inline-size` |
+
+##### Other properties
+
+| Physical Property                              |  Logical Property                   |
+| ---------------------------------------------- | ----------------------------------- |
+| `(-webkit-)box-orient: vertical`               | `(-webkit-)box-orient: block-axis`  |
+| `(-webkit-)box-orient: horizontal`             | `(-webkit-)box-orient: inline-axis` |
+| `caption-size: top`                            | `caption-side: block-start`         |
+| `caption-size: bottom`                         | `caption-side: block-end`           |
+| `caption-size: right`                          | `caption-side: inline-end`          |
+| `caption-size: left`                           | `caption-side: inline-start`        |
+| `overflow-y`                                   | `overflow-block`                    |
+| `overflow-x`                                   | `overflow-inline`                   |
+| `overscroll-behavior-x`                        | `overscroll-behavior-inline`        |
+| `overscroll-behavior-y`                        | `overscroll-behavior-block`         |
+| `resize: horizontal`                           | `resize: inline`                    |
+| `resize: vertical`                             | `resize: block`                     |
+| 'scroll-margin-bottom`                         | `scroll-margin-block-end`           |
+| 'scroll-margin-bottom` & 'scroll-margin-top`   | `scroll-margin-block`               |
+| 'scroll-margin-left`                           | `scroll-margin-inline-start`        |
+| 'scroll-margin-left` & 'scroll-margin-right`   | `scroll-margin-inline`              |
+| 'scroll-margin-right`                          | `scroll-margin-inline-end`          |
+| 'scroll-margin-top`                            | `scroll-margin-block-start`         |
+| 'scroll-padding-bottom`                        | `scroll-padding-block-end`          |
+| 'scroll-padding-bottom` & 'scroll-padding-top` | `scroll-padding-block`              |
+| 'scroll-padding-left`                          | `scroll-padding-inline-start`       |
+| 'scroll-padding-left` & 'scroll-padding-right` | `scroll-padding-inline`             |
+| 'scroll-padding-right`                         | `scroll-padding-inline-end`         |
+| 'scroll-padding-top`                           | `scroll-padding-block-start`        |
+| `text-align: left`                             | `text-align: start`                 |
+| `text-align: right`                            | `text-align: end`                   |
 
-### `plugin/use-logical-units`
+---
 
-**👉 [Learn more about this rule](./src/rules/use-logical-units) 👈**
+### plugin/use-logical-units
 
 This rule is responsible for checking that logical CSS units are used.
 Specifically, viewport units like `vw` and `vh` which stand for viewport width
@@ -103,20 +226,31 @@ and viewport height respectively will not reflect different writing modes and
 directions. Instead, this rule will enforce the logical equivalents, `vi` and
 `vb`.
 
-#### Options
+```json
+{
+  "rules": {
+    "plugin/use-logical-units": [true, { "severity": "warning" }]
+  }
+}
+```
 
-The use-logical-units rule accepts the following options:
+#### Options
 
-| Option          | Description                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------- |
-| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+| Option           | Description                                                              |
+| ---------------- | ------------------------------------------------------------------------ |
+| disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
+| ignore           | Pass an array of physical units to ignore while linting.                 |
 
 ```json
 {
   "rules": {
-    "plugin/use-logical-units": [
+    "plugin/use-logical-properties-and-values": [
       true,
-      { "severity": "warning", "enable-auto-fix": true }
+      {
+        "severity": "warning",
+        "disable-auto-fix": true,
+        "ignore": ["dvh", "dvw"]
+      }
     ]
   }
 }
@@ -140,8 +274,18 @@ body {
 }
 ```
 
-## TODO
-
-What can be expected in the future.
-
-- Support disabling individual property checks
+#### Supported Units
+
+> Read about current
+> [browser support for logical viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic).
+
+| Physical Unit |  Logical Unit |
+| ------------- | ------------- |
+| dvh           | dvb           |
+| dvw           | dvi           |
+| lvh           | lvb           |
+| lvw           | lvi           |
+| svh           | svb           |
+| svw           | svi           |
+| vh            | vb            |
+| vw            | vi            |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.7.1",
+  "version": "0.9.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

@@ -20,7 +20,10 @@ const ruleFunction = (_, options, context) => {
 
     root.walkDecls((decl) => {
       let rootProp = decl.prop;
-      if (options?.[rootProp] === false || options?.[rootProp] === 'off') {
+      if (
+        Array.isArray(options?.ignore) &&
+        options?.ignore.includes(rootProp)
+      ) {
         return;
       }
 
@@ -47,7 +50,7 @@ const ruleFunction = (_, options, context) => {
             physicalValuesMap[rootProp][decl.value],
           );
 
-      if (context.fix && options?.['enable-auto-fix']) {
+      if (context.fix && !options?.['disable-auto-fix']) {
         if (propIsPhysical) {
           decl.prop = physicalPropertiesMap[rootProp];
         }

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

@@ -20,12 +20,20 @@ const ruleFunction = (_, options, context) => {
       if (!unitIsPhysical) return;
 
       const physicalUnit = getValueUnit(decl.value);
+
+      if (
+        Array.isArray(options?.ignore) &&
+        options?.ignore.includes(physicalUnit)
+      ) {
+        return;
+      }
+
       const message = ruleMessages.unexpectedUnit(
         physicalUnit,
         physicalUnitsMap[physicalUnit],
       );
 
-      if (context.fix && options?.['enable-auto-fix']) {
+      if (context.fix && !options?.['disable-auto-fix']) {
         decl.value = decl.value.replace(
           physicalUnit,
           physicalUnitsMap[physicalUnit],

package/src/utils/logical.js

@@ -71,6 +71,18 @@ const logicalProperties = Object.freeze({
   paddingInline: 'padding-inline',
   paddingInlineEnd: 'padding-inline-end',
   paddingInlineStart: 'padding-inline-start',
+  scrollMarginBlock: 'scroll-margin-block',
+  scrollMarginBlockEnd: 'scroll-margin-block-end',
+  scrollMarginBlockStart: 'scroll-margin-block-start',
+  scrollMarginInline: 'scroll-margin-inline',
+  scrollMarginInlineEnd: 'scroll-margin-inline-end',
+  scrollMarginInlineStart: 'scroll-margin-inline-start',
+  scrollPaddingBlock: 'scroll-padding-block',
+  scrollPaddingBlockEnd: 'scroll-padding-block-end',
+  scrollPaddingBlockStart: 'scroll-padding-block-start',
+  scrollPaddingInline: 'scroll-padding-inline',
+  scrollPaddingInlineEnd: 'scroll-padding-inline-end',
+  scrollPaddingInlineStart: 'scroll-padding-inline-start',
 });
 
 const logicalUnits = Object.freeze({

package/src/utils/physical.js

@@ -53,6 +53,14 @@ const physicalProperties = Object.freeze({
   paddingTop: 'padding-top',
   resize: 'resize',
   right: 'right',
+  scrollMarginBottom: 'scroll-margin-bottom',
+  scrollMarginLeft: 'scroll-margin-left',
+  scrollMarginRight: 'scroll-margin-right',
+  scrollMarginTop: 'scroll-margin-top',
+  scrollPaddingBottom: 'scroll-padding-bottom',
+  scrollPaddingLeft: 'scroll-padding-left',
+  scrollPaddingRight: 'scroll-padding-right',
+  scrollPaddingTop: 'scroll-padding-top',
   textAlign: 'text-align',
   top: 'top',
   width: 'width',

package/src/utils/physicalPropertiesMap.js

@@ -54,6 +54,22 @@ const physicalPropertiesMap = Object.freeze({
   [physicalProperties.paddingLeft]: logicalProperties.paddingInlineStart,
   [physicalProperties.paddingRight]: logicalProperties.paddingInlineEnd,
   [physicalProperties.paddingTop]: logicalProperties.paddingBlockStart,
+  [physicalProperties.scrollMarginBottom]:
+    logicalProperties.scrollMarginBlockEnd,
+  [physicalProperties.scrollMarginLeft]:
+    logicalProperties.scrollMarginInlineStart,
+  [physicalProperties.scrollMarginRight]:
+    logicalProperties.scrollMarginInlineEnd,
+  [physicalProperties.scrollMarginTop]:
+    logicalProperties.scrollMarginBlockStart,
+  [physicalProperties.scrollPaddingBottom]:
+    logicalProperties.scrollPaddingBlockEnd,
+  [physicalProperties.scrollPaddingLeft]:
+    logicalProperties.scrollPaddingInlineStart,
+  [physicalProperties.scrollPaddingRight]:
+    logicalProperties.scrollPaddingInlineEnd,
+  [physicalProperties.scrollPaddingTop]:
+    logicalProperties.scrollPaddingBlockStart,
   [physicalProperties.right]: logicalProperties.insetInlineEnd,
   [physicalProperties.top]: logicalProperties.insetBlockStart,
   [physicalProperties.width]: logicalProperties.inlineSize,