biome-plugin-css-prefer-logical-property 0.1.0

package/README.md

@@ -0,0 +1,217 @@
+# biome-plugin-css-prefer-logical-property
+
+Biome plugin that detects physical CSS properties, values, and units and suggests their logical equivalents. Built with [GritQL](https://biomejs.dev/linter/plugins/) for [Biome](https://biomejs.dev) v2.0+.
+
+> **Note:** This plugin is diagnostic-only (detect and warn). Autofix is not yet supported by Biome's plugin system. For autofix support, see [eslint-plugin-css-logical-property-autofix](https://www.npmjs.com/package/eslint-plugin-css-logical-property-autofix).
+
+## Installation
+
+```bash
+npm install -D biome-plugin-css-prefer-logical-property @biomejs/biome
+```
+
+## Usage
+
+Add the plugin rules to your `biome.json`:
+
+```json
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "plugins": [
+    "./node_modules/biome-plugin-css-prefer-logical-property/rules/prefer-logical-properties.grit",
+    "./node_modules/biome-plugin-css-prefer-logical-property/rules/prefer-logical-values.grit",
+    "./node_modules/biome-plugin-css-prefer-logical-property/rules/prefer-logical-units.grit"
+  ]
+}
+```
+
+You can also enable individual rules instead of all three:
+
+```json
+{
+  "plugins": [
+    "./node_modules/biome-plugin-css-prefer-logical-property/rules/prefer-logical-properties.grit"
+  ]
+}
+```
+
+Then run:
+
+```bash
+biome lint "**/*.css"
+```
+
+## Rules
+
+### `prefer-logical-properties.grit`
+
+Detects physical CSS properties and suggests logical alternatives.
+
+```css
+/* Warns */
+.box {
+  width: 100px;        /* Use 'inline-size' */
+  margin-left: 10px;   /* Use 'margin-inline-start' */
+  border-top: 1px solid; /* Use 'border-block-start' */
+  top: 0;              /* Use 'inset-block-start' */
+}
+
+/* OK */
+.box {
+  inline-size: 100px;
+  margin-inline-start: 10px;
+  border-block-start: 1px solid;
+  inset-block-start: 0;
+}
+```
+
+<details>
+<summary>Full property mapping (52 properties)</summary>
+
+| Physical | Logical |
+|---|---|
+| `top` | `inset-block-start` |
+| `right` | `inset-inline-end` |
+| `bottom` | `inset-block-end` |
+| `left` | `inset-inline-start` |
+| `width` | `inline-size` |
+| `height` | `block-size` |
+| `min-width` | `min-inline-size` |
+| `min-height` | `min-block-size` |
+| `max-width` | `max-inline-size` |
+| `max-height` | `max-block-size` |
+| `contain-intrinsic-width` | `contain-intrinsic-inline-size` |
+| `contain-intrinsic-height` | `contain-intrinsic-block-size` |
+| `margin-top` | `margin-block-start` |
+| `margin-right` | `margin-inline-end` |
+| `margin-bottom` | `margin-block-end` |
+| `margin-left` | `margin-inline-start` |
+| `padding-top` | `padding-block-start` |
+| `padding-right` | `padding-inline-end` |
+| `padding-bottom` | `padding-block-end` |
+| `padding-left` | `padding-inline-start` |
+| `border-top` | `border-block-start` |
+| `border-right` | `border-inline-end` |
+| `border-bottom` | `border-block-end` |
+| `border-left` | `border-inline-start` |
+| `border-top-color` | `border-block-start-color` |
+| `border-right-color` | `border-inline-end-color` |
+| `border-bottom-color` | `border-block-end-color` |
+| `border-left-color` | `border-inline-start-color` |
+| `border-top-style` | `border-block-start-style` |
+| `border-right-style` | `border-inline-end-style` |
+| `border-bottom-style` | `border-block-end-style` |
+| `border-left-style` | `border-inline-start-style` |
+| `border-top-width` | `border-block-start-width` |
+| `border-right-width` | `border-inline-end-width` |
+| `border-bottom-width` | `border-block-end-width` |
+| `border-left-width` | `border-inline-start-width` |
+| `border-top-left-radius` | `border-start-start-radius` |
+| `border-top-right-radius` | `border-start-end-radius` |
+| `border-bottom-right-radius` | `border-end-end-radius` |
+| `border-bottom-left-radius` | `border-end-start-radius` |
+| `overflow-x` | `overflow-inline` |
+| `overflow-y` | `overflow-block` |
+| `overscroll-behavior-x` | `overscroll-behavior-inline` |
+| `overscroll-behavior-y` | `overscroll-behavior-block` |
+| `scroll-margin-top` | `scroll-margin-block-start` |
+| `scroll-margin-right` | `scroll-margin-inline-end` |
+| `scroll-margin-bottom` | `scroll-margin-block-end` |
+| `scroll-margin-left` | `scroll-margin-inline-start` |
+| `scroll-padding-top` | `scroll-padding-block-start` |
+| `scroll-padding-right` | `scroll-padding-inline-end` |
+| `scroll-padding-bottom` | `scroll-padding-block-end` |
+| `scroll-padding-left` | `scroll-padding-inline-start` |
+
+</details>
+
+### `prefer-logical-values.grit`
+
+Detects physical CSS values and suggests logical alternatives.
+
+```css
+/* Warns */
+.text { text-align: left; }   /* Use 'start' */
+.float { float: right; }      /* Use 'inline-end' */
+.resize { resize: horizontal; } /* Use 'inline' */
+
+/* OK */
+.text { text-align: start; }
+.float { float: inline-end; }
+.resize { resize: inline; }
+```
+
+<details>
+<summary>Full value mapping (6 properties)</summary>
+
+| Property | Physical value | Logical value |
+|---|---|---|
+| `text-align` | `left` | `start` |
+| `text-align` | `right` | `end` |
+| `float` | `left` | `inline-start` |
+| `float` | `right` | `inline-end` |
+| `clear` | `left` | `inline-start` |
+| `clear` | `right` | `inline-end` |
+| `resize` | `horizontal` | `inline` |
+| `resize` | `vertical` | `block` |
+| `caption-side` | `left` | `inline-start` |
+| `caption-side` | `right` | `inline-end` |
+| `box-orient` | `horizontal` | `inline-axis` |
+| `box-orient` | `vertical` | `block-axis` |
+
+</details>
+
+### `prefer-logical-units.grit`
+
+Detects physical CSS units and suggests logical alternatives.
+
+```css
+/* Warns */
+.box {
+  block-size: 100vh;   /* Use 'vb' */
+  inline-size: 50vw;   /* Use 'vi' */
+}
+
+/* OK */
+.box {
+  block-size: 100vb;
+  inline-size: 50vi;
+}
+```
+
+<details>
+<summary>Full unit mapping (10 units)</summary>
+
+| Physical | Logical | Description |
+|---|---|---|
+| `vw` | `vi` | Viewport inline size |
+| `vh` | `vb` | Viewport block size |
+| `dvw` | `dvi` | Dynamic viewport inline size |
+| `dvh` | `dvb` | Dynamic viewport block size |
+| `svw` | `svi` | Small viewport inline size |
+| `svh` | `svb` | Small viewport block size |
+| `lvw` | `lvi` | Large viewport inline size |
+| `lvh` | `lvb` | Large viewport block size |
+| `cqw` | `cqi` | Container query inline size |
+| `cqh` | `cqb` | Container query block size |
+
+</details>
+
+## Comparison with ESLint plugin
+
+| Feature | This plugin (Biome) | eslint-plugin-css-logical-property-autofix |
+|---|---|---|
+| Detect physical properties | Yes | Yes |
+| Detect physical values | Yes | Yes |
+| Detect physical units | Yes | Yes |
+| Autofix | No (not yet supported by Biome plugins) | **Yes** |
+| Configuration | GritQL `.grit` files | ESLint flat config |
+| Allow-list options | Not available | `allowProperties`, `allowValues`, `allowUnits` |
+
+## Requirements
+
+- Biome >= 2.0.0
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "biome-plugin-css-prefer-logical-property",
+  "version": "0.1.0",
+  "description": "Biome plugin that detects physical CSS properties, values, and units and suggests logical alternatives",
+  "keywords": [
+    "biome",
+    "biome-plugin",
+    "css",
+    "gritql",
+    "i18n",
+    "logical-properties",
+    "ltr",
+    "rtl"
+  ],
+  "homepage": "https://github.com/kkkaoru/eslint-plugin-css-logical-property#readme",
+  "bugs": {
+    "url": "https://github.com/kkkaoru/eslint-plugin-css-logical-property/issues"
+  },
+  "license": "MIT",
+  "author": "kkkaoru",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kkkaoru/eslint-plugin-css-logical-property",
+    "directory": "packages/biome-plugin-css-prefer-logical-property"
+  },
+  "files": [
+    "rules"
+  ],
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.0.0",
+    "@vitest/coverage-v8": "4.1.0"
+  },
+  "peerDependencies": {
+    "@biomejs/biome": ">=2.0.0"
+  }
+}

package/rules/prefer-logical-properties.grit

@@ -0,0 +1,396 @@
+language css;
+
+// Detect physical CSS properties that should use logical equivalents
+or {
+  // Inset
+  `top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'inset-block-start' instead of 'top'.",
+      severity = "warning"
+    )
+  },
+  `right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'inset-inline-end' instead of 'right'.",
+      severity = "warning"
+    )
+  },
+  `bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'inset-block-end' instead of 'bottom'.",
+      severity = "warning"
+    )
+  },
+  `left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'inset-inline-start' instead of 'left'.",
+      severity = "warning"
+    )
+  },
+
+  // Size
+  `width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'inline-size' instead of 'width'.",
+      severity = "warning"
+    )
+  },
+  `height: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'block-size' instead of 'height'.",
+      severity = "warning"
+    )
+  },
+  `min-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'min-inline-size' instead of 'min-width'.",
+      severity = "warning"
+    )
+  },
+  `min-height: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'min-block-size' instead of 'min-height'.",
+      severity = "warning"
+    )
+  },
+  `max-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'max-inline-size' instead of 'max-width'.",
+      severity = "warning"
+    )
+  },
+  `max-height: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'max-block-size' instead of 'max-height'.",
+      severity = "warning"
+    )
+  },
+
+  // Contain intrinsic size
+  `contain-intrinsic-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'contain-intrinsic-inline-size' instead of 'contain-intrinsic-width'.",
+      severity = "warning"
+    )
+  },
+  `contain-intrinsic-height: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'contain-intrinsic-block-size' instead of 'contain-intrinsic-height'.",
+      severity = "warning"
+    )
+  },
+
+  // Margin
+  `margin-top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'margin-block-start' instead of 'margin-top'.",
+      severity = "warning"
+    )
+  },
+  `margin-right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'margin-inline-end' instead of 'margin-right'.",
+      severity = "warning"
+    )
+  },
+  `margin-bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'margin-block-end' instead of 'margin-bottom'.",
+      severity = "warning"
+    )
+  },
+  `margin-left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'margin-inline-start' instead of 'margin-left'.",
+      severity = "warning"
+    )
+  },
+
+  // Padding
+  `padding-top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'padding-block-start' instead of 'padding-top'.",
+      severity = "warning"
+    )
+  },
+  `padding-right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'padding-inline-end' instead of 'padding-right'.",
+      severity = "warning"
+    )
+  },
+  `padding-bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'padding-block-end' instead of 'padding-bottom'.",
+      severity = "warning"
+    )
+  },
+  `padding-left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'padding-inline-start' instead of 'padding-left'.",
+      severity = "warning"
+    )
+  },
+
+  // Border shorthand
+  `border-top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-start' instead of 'border-top'.",
+      severity = "warning"
+    )
+  },
+  `border-right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-end' instead of 'border-right'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-end' instead of 'border-bottom'.",
+      severity = "warning"
+    )
+  },
+  `border-left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-start' instead of 'border-left'.",
+      severity = "warning"
+    )
+  },
+
+  // Border color
+  `border-top-color: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-start-color' instead of 'border-top-color'.",
+      severity = "warning"
+    )
+  },
+  `border-right-color: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-end-color' instead of 'border-right-color'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom-color: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-end-color' instead of 'border-bottom-color'.",
+      severity = "warning"
+    )
+  },
+  `border-left-color: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-start-color' instead of 'border-left-color'.",
+      severity = "warning"
+    )
+  },
+
+  // Border style
+  `border-top-style: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-start-style' instead of 'border-top-style'.",
+      severity = "warning"
+    )
+  },
+  `border-right-style: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-end-style' instead of 'border-right-style'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom-style: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-end-style' instead of 'border-bottom-style'.",
+      severity = "warning"
+    )
+  },
+  `border-left-style: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-start-style' instead of 'border-left-style'.",
+      severity = "warning"
+    )
+  },
+
+  // Border width
+  `border-top-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-start-width' instead of 'border-top-width'.",
+      severity = "warning"
+    )
+  },
+  `border-right-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-end-width' instead of 'border-right-width'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-block-end-width' instead of 'border-bottom-width'.",
+      severity = "warning"
+    )
+  },
+  `border-left-width: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-inline-start-width' instead of 'border-left-width'.",
+      severity = "warning"
+    )
+  },
+
+  // Border radius
+  `border-top-left-radius: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-start-start-radius' instead of 'border-top-left-radius'.",
+      severity = "warning"
+    )
+  },
+  `border-top-right-radius: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-start-end-radius' instead of 'border-top-right-radius'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom-right-radius: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-end-end-radius' instead of 'border-bottom-right-radius'.",
+      severity = "warning"
+    )
+  },
+  `border-bottom-left-radius: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'border-end-start-radius' instead of 'border-bottom-left-radius'.",
+      severity = "warning"
+    )
+  },
+
+  // Overflow
+  `overflow-x: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'overflow-inline' instead of 'overflow-x'.",
+      severity = "warning"
+    )
+  },
+  `overflow-y: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'overflow-block' instead of 'overflow-y'.",
+      severity = "warning"
+    )
+  },
+
+  // Overscroll behavior
+  `overscroll-behavior-x: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'overscroll-behavior-inline' instead of 'overscroll-behavior-x'.",
+      severity = "warning"
+    )
+  },
+  `overscroll-behavior-y: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'overscroll-behavior-block' instead of 'overscroll-behavior-y'.",
+      severity = "warning"
+    )
+  },
+
+  // Scroll margin
+  `scroll-margin-top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-margin-block-start' instead of 'scroll-margin-top'.",
+      severity = "warning"
+    )
+  },
+  `scroll-margin-right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-margin-inline-end' instead of 'scroll-margin-right'.",
+      severity = "warning"
+    )
+  },
+  `scroll-margin-bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-margin-block-end' instead of 'scroll-margin-bottom'.",
+      severity = "warning"
+    )
+  },
+  `scroll-margin-left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-margin-inline-start' instead of 'scroll-margin-left'.",
+      severity = "warning"
+    )
+  },
+
+  // Scroll padding
+  `scroll-padding-top: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-padding-block-start' instead of 'scroll-padding-top'.",
+      severity = "warning"
+    )
+  },
+  `scroll-padding-right: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-padding-inline-end' instead of 'scroll-padding-right'.",
+      severity = "warning"
+    )
+  },
+  `scroll-padding-bottom: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-padding-block-end' instead of 'scroll-padding-bottom'.",
+      severity = "warning"
+    )
+  },
+  `scroll-padding-left: $val` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical property 'scroll-padding-inline-start' instead of 'scroll-padding-left'.",
+      severity = "warning"
+    )
+  }
+}

package/rules/prefer-logical-units.grit

@@ -0,0 +1,85 @@
+language css;
+
+// Detect physical CSS units that should use logical equivalents
+// Longer unit patterns must come before shorter ones to prevent false matches
+or {
+  // Dynamic viewport units
+  r"[0-9]+\.?[0-9]*dvw" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'dvi' instead of 'dvw'.",
+      severity = "warning"
+    )
+  },
+  r"[0-9]+\.?[0-9]*dvh" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'dvb' instead of 'dvh'.",
+      severity = "warning"
+    )
+  },
+
+  // Small viewport units
+  r"[0-9]+\.?[0-9]*svw" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'svi' instead of 'svw'.",
+      severity = "warning"
+    )
+  },
+  r"[0-9]+\.?[0-9]*svh" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'svb' instead of 'svh'.",
+      severity = "warning"
+    )
+  },
+
+  // Large viewport units
+  r"[0-9]+\.?[0-9]*lvw" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'lvi' instead of 'lvw'.",
+      severity = "warning"
+    )
+  },
+  r"[0-9]+\.?[0-9]*lvh" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'lvb' instead of 'lvh'.",
+      severity = "warning"
+    )
+  },
+
+  // Container query units
+  r"[0-9]+\.?[0-9]*cqw" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'cqi' instead of 'cqw'.",
+      severity = "warning"
+    )
+  },
+  r"[0-9]+\.?[0-9]*cqh" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'cqb' instead of 'cqh'.",
+      severity = "warning"
+    )
+  },
+
+  // Standard viewport units (must come after longer prefixed units)
+  r"[0-9]+\.?[0-9]*vw" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'vi' instead of 'vw'.",
+      severity = "warning"
+    )
+  },
+  r"[0-9]+\.?[0-9]*vh" as $val where {
+    register_diagnostic(
+      span = $val,
+      message = "Use logical unit 'vb' instead of 'vh'.",
+      severity = "warning"
+    )
+  }
+}

package/rules/prefer-logical-values.grit

@@ -0,0 +1,100 @@
+language css;
+
+// Detect physical CSS values that should use logical equivalents
+or {
+  // text-align: left/right
+  `text-align: left` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'start' instead of 'left' for 'text-align'.",
+      severity = "warning"
+    )
+  },
+  `text-align: right` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'end' instead of 'right' for 'text-align'.",
+      severity = "warning"
+    )
+  },
+
+  // float: left/right
+  `float: left` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-start' instead of 'left' for 'float'.",
+      severity = "warning"
+    )
+  },
+  `float: right` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-end' instead of 'right' for 'float'.",
+      severity = "warning"
+    )
+  },
+
+  // clear: left/right
+  `clear: left` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-start' instead of 'left' for 'clear'.",
+      severity = "warning"
+    )
+  },
+  `clear: right` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-end' instead of 'right' for 'clear'.",
+      severity = "warning"
+    )
+  },
+
+  // resize: horizontal/vertical
+  `resize: horizontal` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline' instead of 'horizontal' for 'resize'.",
+      severity = "warning"
+    )
+  },
+  `resize: vertical` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'block' instead of 'vertical' for 'resize'.",
+      severity = "warning"
+    )
+  },
+
+  // caption-side: left/right
+  `caption-side: left` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-start' instead of 'left' for 'caption-side'.",
+      severity = "warning"
+    )
+  },
+  `caption-side: right` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-end' instead of 'right' for 'caption-side'.",
+      severity = "warning"
+    )
+  },
+
+  // box-orient: horizontal/vertical
+  `box-orient: horizontal` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'inline-axis' instead of 'horizontal' for 'box-orient'.",
+      severity = "warning"
+    )
+  },
+  `box-orient: vertical` as $decl where {
+    register_diagnostic(
+      span = $decl,
+      message = "Use logical value 'block-axis' instead of 'vertical' for 'box-orient'.",
+      severity = "warning"
+    )
+  }
+}