@plumeria/eslint-plugin 18.2.7 → 18.2.9

package/README.md

@@ -14,6 +14,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/no-inner-call`: **error**
 - `@plumeria/no-invalid-selector`: **error**
 - `@plumeria/no-mixed-styling-props`: **error**
+- `@plumeria/no-order-dependent-overlap`: **warn**
 - `@plumeria/no-unknown-css-properties`: **error**
 - `@plumeria/no-unused-keys`: **warn**
 - `@plumeria/sort-properties`: **warn**
@@ -98,6 +99,35 @@ Disallow mixing the styling prop with `className` or `style`. `classStyle` can h
 
 Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 
+### no-order-dependent-overlap
+
+Warns when two properties in one style overlap but neither outranks the other,
+so the one written last wins. It covers one property under its logical and its
+physical name, and two shorthands that cross without either containing the
+other. A shorthand and its longhand are ranked by specificity and never
+reported.
+
+A pair of spellings is one property in a horizontal writing mode and two
+properties in a vertical one, which is per element and cannot be read from the
+source. The rule reads them as one property; disable the line where an element
+is known to be vertical.
+
+### no-physical-properties / no-logical-properties
+
+Disallow one of the two names a property can carry, so a project writes edges
+under one spelling only. `no-physical-properties` reports `paddingLeft` and
+suggests `paddingInlineStart`; `no-logical-properties` reports the reverse.
+Accepts `{ sizes }`, which adds `width`, `height`, their `min`/`max` forms,
+`overflow-x` and `overflow-y` to the properties covered. It is `false` by
+default: a size is one property under either spelling, while an edge is what a
+direction reverses.
+
+Neither is part of `recommended`, and turning both on is contradictory. Reach
+for one when you want the pairs `no-order-dependent-overlap` reports to be
+impossible to write: a property that appears under one spelling only can never
+meet its other spelling on an element. A shorthand with no single counterpart,
+such as `borderBlockWidth`, is outside either rule and stays reported.
+
 ### no-unknown-css-properties
 
 Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.

package/dist/index.js

@@ -5,7 +5,10 @@ const no_destructure_1 = require("./rules/no-destructure");
 const no_inline_object_1 = require("./rules/no-inline-object");
 const no_inner_call_1 = require("./rules/no-inner-call");
 const no_invalid_selector_1 = require("./rules/no-invalid-selector");
+const no_logical_properties_1 = require("./rules/no-logical-properties");
 const no_mixed_styling_props_1 = require("./rules/no-mixed-styling-props");
+const no_physical_properties_1 = require("./rules/no-physical-properties");
+const no_order_dependent_overlap_1 = require("./rules/no-order-dependent-overlap");
 const no_unknown_css_properties_1 = require("./rules/no-unknown-css-properties");
 const no_unused_keys_1 = require("./rules/no-unused-keys");
 const sort_properties_1 = require("./rules/sort-properties");
@@ -19,7 +22,10 @@ const rules = {
     'no-inline-object': no_inline_object_1.noInlineObject,
     'no-inner-call': no_inner_call_1.noInnerCall,
     'no-invalid-selector': no_invalid_selector_1.noInvalidSelector,
+    'no-logical-properties': no_logical_properties_1.noLogicalProperties,
     'no-mixed-styling-props': no_mixed_styling_props_1.noMixedStylingProps,
+    'no-physical-properties': no_physical_properties_1.noPhysicalProperties,
+    'no-order-dependent-overlap': no_order_dependent_overlap_1.noOrderDependentOverlap,
     'no-unknown-css-properties': no_unknown_css_properties_1.noUnknownCssProperties,
     'no-unused-keys': no_unused_keys_1.noUnusedKeys,
     'sort-properties': sort_properties_1.sortProperties,
@@ -42,6 +48,7 @@ const configs = {
             '@plumeria/no-inner-call': 'error',
             '@plumeria/no-invalid-selector': 'error',
             '@plumeria/no-mixed-styling-props': 'error',
+            '@plumeria/no-order-dependent-overlap': 'warn',
             '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/sort-properties': 'warn',

package/dist/rules/no-logical-properties.d.ts

@@ -0,0 +1 @@
+export declare const noLogicalProperties: import("eslint").Rule.RuleModule;

package/dist/rules/no-logical-properties.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noLogicalProperties = void 0;
+const spellingRule_1 = require("../util/spellingRule");
+exports.noLogicalProperties = (0, spellingRule_1.createSpellingRule)('logical');

package/dist/rules/no-order-dependent-overlap.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from 'eslint';
+export declare const noOrderDependentOverlap: Rule.RuleModule;

package/dist/rules/no-order-dependent-overlap.js

@@ -0,0 +1,192 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noOrderDependentOverlap = void 0;
+const zss_engine_1 = require("zss-engine");
+const logicalPhysical_1 = require("../util/logicalPhysical");
+const DIRECT_SHORTHANDS = {};
+for (const [shorthand, longhands] of Object.entries(zss_engine_1.DIRECT_LONGHANDS)) {
+    for (const longhand of longhands) {
+        if (!DIRECT_SHORTHANDS[longhand])
+            DIRECT_SHORTHANDS[longhand] = [];
+        DIRECT_SHORTHANDS[longhand].push(shorthand);
+    }
+}
+const depths = new Map();
+const depthOf = (property) => {
+    const cached = depths.get(property);
+    if (cached !== undefined)
+        return cached;
+    depths.set(property, 0);
+    let depth = 0;
+    for (const shorthand of DIRECT_SHORTHANDS[property] || []) {
+        depth = Math.max(depth, depthOf(shorthand) + 1);
+    }
+    depths.set(property, depth);
+    return depth;
+};
+const coverages = new Map();
+const coverageOf = (property) => {
+    const cached = coverages.get(property);
+    if (cached)
+        return cached;
+    const longhands = zss_engine_1.DIRECT_LONGHANDS[property];
+    const coverage = longhands
+        ? new Set(longhands.flatMap((longhand) => [...coverageOf(longhand)]))
+        : new Set([(0, logicalPhysical_1.canonicalProperty)(property)]);
+    coverages.set(property, coverage);
+    return coverage;
+};
+const overlapOf = (first, second) => {
+    if ((0, logicalPhysical_1.canonicalProperty)(first) === (0, logicalPhysical_1.canonicalProperty)(second))
+        return 'alias';
+    const left = coverageOf(first);
+    const right = coverageOf(second);
+    if (![...left].some((leaf) => right.has(leaf)))
+        return null;
+    const contains = (a, b) => [...b].every((leaf) => a.has(leaf));
+    if (contains(left, right) || contains(right, left))
+        return null;
+    return depthOf(first) === depthOf(second) ? 'crossing' : null;
+};
+exports.noOrderDependentOverlap = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow two properties that overlap without either one outranking the other',
+        },
+        hasSuggestions: true,
+        messages: {
+            alias: "'{{ first }}' and '{{ second }}' are the same property under two names, so neither outranks the other. The one written last wins.",
+            crossing: "'{{ first }}' and '{{ second }}' overlap, but neither property outranks the other. The result depends on the order they are written.",
+            keep: "Keep '{{ keep }}'",
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        const sourceCode = context.sourceCode;
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value === '@plumeria/core') {
+                    node.specifiers.forEach((specifier) => {
+                        if (specifier.type === 'ImportNamespaceSpecifier' ||
+                            specifier.type === 'ImportDefaultSpecifier') {
+                            plumeriaAliases[specifier.local.name] = 'NAMESPACE';
+                        }
+                        else {
+                            const spec = specifier;
+                            const importedName = spec.imported.type === 'Identifier'
+                                ? spec.imported.name
+                                : String(spec.imported.value);
+                            plumeriaAliases[specifier.local.name] = importedName;
+                        }
+                    });
+                }
+            },
+            CallExpression(node) {
+                let isCssProperties = false;
+                if (node.callee.type === 'MemberExpression') {
+                    if (node.callee.object.type === 'Identifier' &&
+                        plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
+                        const propertyName = node.callee.property.type === 'Identifier'
+                            ? node.callee.property.name
+                            : null;
+                        if (propertyName === 'create' ||
+                            propertyName === 'keyframes' ||
+                            propertyName === 'viewTransition') {
+                            isCssProperties = true;
+                        }
+                    }
+                }
+                else if (node.callee.type === 'Identifier') {
+                    const aliasName = plumeriaAliases[node.callee.name];
+                    if (aliasName === 'create' ||
+                        aliasName === 'keyframes' ||
+                        aliasName === 'viewTransition') {
+                        isCssProperties = true;
+                    }
+                }
+                if (isCssProperties) {
+                    node.arguments.forEach((arg) => {
+                        if (arg.type === 'ObjectExpression') {
+                            arg.properties.forEach((prop) => {
+                                if (prop.type === 'Property' &&
+                                    prop.value.type === 'ObjectExpression') {
+                                    checkStyleObject(prop.value);
+                                }
+                            });
+                        }
+                    });
+                }
+            },
+        };
+        function removeProperty(fixer, prop) {
+            const after = sourceCode.getTokenAfter(prop);
+            if (after && after.value === ',') {
+                const next = sourceCode.getTokenAfter(after);
+                const end = next && next.value !== '}' ? next.range[0] : after.range[1];
+                return fixer.removeRange([prop.range[0], end]);
+            }
+            const before = sourceCode.getTokenBefore(prop);
+            return fixer.removeRange([before.range[0], prop.range[1]]);
+        }
+        function checkStyleObject(node) {
+            const declarations = [];
+            node.properties.forEach((prop) => {
+                if (prop.type !== 'Property')
+                    return;
+                if (prop.value.type === 'ObjectExpression') {
+                    checkStyleObject(prop.value);
+                    return;
+                }
+                let name = '';
+                if (!prop.computed) {
+                    name =
+                        prop.key.type === 'Identifier'
+                            ? prop.key.name
+                            : String(prop.key.value);
+                }
+                else if (prop.key.type === 'Literal' &&
+                    typeof prop.key.value === 'string') {
+                    name = prop.key.value;
+                }
+                if (!name ||
+                    name.startsWith(':') ||
+                    name.startsWith('[') ||
+                    name.startsWith('@') ||
+                    name.startsWith('--')) {
+                    return;
+                }
+                declarations.push({ prop, name, kebab: (0, logicalPhysical_1.toKebabCase)(name) });
+            });
+            for (let i = 0; i < declarations.length; i++) {
+                for (let j = i + 1; j < declarations.length; j++) {
+                    const first = declarations[i];
+                    const second = declarations[j];
+                    const overlap = overlapOf(first.kebab, second.kebab);
+                    if (!overlap)
+                        continue;
+                    context.report({
+                        node: second.prop.key,
+                        messageId: overlap,
+                        data: { first: first.name, second: second.name },
+                        suggest: overlap === 'alias'
+                            ? [
+                                {
+                                    messageId: 'keep',
+                                    data: { keep: second.name },
+                                    fix: (fixer) => removeProperty(fixer, first.prop),
+                                },
+                                {
+                                    messageId: 'keep',
+                                    data: { keep: first.name },
+                                    fix: (fixer) => removeProperty(fixer, second.prop),
+                                },
+                            ]
+                            : null,
+                    });
+                }
+            }
+        }
+    },
+};

package/dist/rules/no-physical-properties.d.ts

@@ -0,0 +1 @@
+export declare const noPhysicalProperties: import("eslint").Rule.RuleModule;

package/dist/rules/no-physical-properties.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noPhysicalProperties = void 0;
+const spellingRule_1 = require("../util/spellingRule");
+exports.noPhysicalProperties = (0, spellingRule_1.createSpellingRule)('physical');

package/dist/util/logicalPhysical.d.ts

@@ -0,0 +1,9 @@
+export declare const LOGICAL_PHYSICAL_EDGES: [string, string][];
+export declare const LOGICAL_PHYSICAL_AXES: [string, string][];
+export declare const LOGICAL_PHYSICAL_PAIRS: [string, string][];
+export type PropertySpelling = 'logical' | 'physical';
+export declare const canonicalProperty: (property: string) => string;
+export declare const counterpartOf: (property: string) => string | undefined;
+export declare const spellingOf: (property: string, includeAxes: boolean) => PropertySpelling | undefined;
+export declare const toKebabCase: (name: string) => string;
+export declare const toCamelCase: (name: string) => string;

package/dist/util/logicalPhysical.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCamelCase = exports.toKebabCase = exports.spellingOf = exports.counterpartOf = exports.canonicalProperty = exports.LOGICAL_PHYSICAL_PAIRS = exports.LOGICAL_PHYSICAL_AXES = exports.LOGICAL_PHYSICAL_EDGES = void 0;
+exports.LOGICAL_PHYSICAL_EDGES = [
+    ['margin-block-start', 'margin-top'],
+    ['margin-block-end', 'margin-bottom'],
+    ['margin-inline-start', 'margin-left'],
+    ['margin-inline-end', 'margin-right'],
+    ['padding-block-start', 'padding-top'],
+    ['padding-block-end', 'padding-bottom'],
+    ['padding-inline-start', 'padding-left'],
+    ['padding-inline-end', 'padding-right'],
+    ['scroll-margin-block-start', 'scroll-margin-top'],
+    ['scroll-margin-block-end', 'scroll-margin-bottom'],
+    ['scroll-margin-inline-start', 'scroll-margin-left'],
+    ['scroll-margin-inline-end', 'scroll-margin-right'],
+    ['scroll-padding-block-start', 'scroll-padding-top'],
+    ['scroll-padding-block-end', 'scroll-padding-bottom'],
+    ['scroll-padding-inline-start', 'scroll-padding-left'],
+    ['scroll-padding-inline-end', 'scroll-padding-right'],
+    ['inset-block-start', 'top'],
+    ['inset-block-end', 'bottom'],
+    ['inset-inline-start', 'left'],
+    ['inset-inline-end', 'right'],
+    ['border-block-start', 'border-top'],
+    ['border-block-end', 'border-bottom'],
+    ['border-inline-start', 'border-left'],
+    ['border-inline-end', 'border-right'],
+    ['border-block-start-width', 'border-top-width'],
+    ['border-block-start-style', 'border-top-style'],
+    ['border-block-start-color', 'border-top-color'],
+    ['border-block-end-width', 'border-bottom-width'],
+    ['border-block-end-style', 'border-bottom-style'],
+    ['border-block-end-color', 'border-bottom-color'],
+    ['border-inline-start-width', 'border-left-width'],
+    ['border-inline-start-style', 'border-left-style'],
+    ['border-inline-start-color', 'border-left-color'],
+    ['border-inline-end-width', 'border-right-width'],
+    ['border-inline-end-style', 'border-right-style'],
+    ['border-inline-end-color', 'border-right-color'],
+    ['border-start-start-radius', 'border-top-left-radius'],
+    ['border-start-end-radius', 'border-top-right-radius'],
+    ['border-end-start-radius', 'border-bottom-left-radius'],
+    ['border-end-end-radius', 'border-bottom-right-radius'],
+    ['corner-start-start-shape', 'corner-top-left-shape'],
+    ['corner-start-end-shape', 'corner-top-right-shape'],
+    ['corner-end-start-shape', 'corner-bottom-left-shape'],
+    ['corner-end-end-shape', 'corner-bottom-right-shape'],
+];
+exports.LOGICAL_PHYSICAL_AXES = [
+    ['block-size', 'height'],
+    ['inline-size', 'width'],
+    ['min-block-size', 'min-height'],
+    ['min-inline-size', 'min-width'],
+    ['max-block-size', 'max-height'],
+    ['max-inline-size', 'max-width'],
+    ['overflow-block', 'overflow-y'],
+    ['overflow-inline', 'overflow-x'],
+    ['overscroll-behavior-block', 'overscroll-behavior-y'],
+    ['overscroll-behavior-inline', 'overscroll-behavior-x'],
+    ['contain-intrinsic-block-size', 'contain-intrinsic-height'],
+    ['contain-intrinsic-inline-size', 'contain-intrinsic-width'],
+];
+exports.LOGICAL_PHYSICAL_PAIRS = [
+    ...exports.LOGICAL_PHYSICAL_EDGES,
+    ...exports.LOGICAL_PHYSICAL_AXES,
+];
+const PHYSICAL_OF_LOGICAL = new Map(exports.LOGICAL_PHYSICAL_PAIRS);
+const LOGICAL_OF_PHYSICAL = new Map(exports.LOGICAL_PHYSICAL_PAIRS.map(([logical, physical]) => [physical, logical]));
+const canonicalProperty = (property) => PHYSICAL_OF_LOGICAL.get(property) ?? property;
+exports.canonicalProperty = canonicalProperty;
+const counterpartOf = (property) => PHYSICAL_OF_LOGICAL.get(property) ?? LOGICAL_OF_PHYSICAL.get(property);
+exports.counterpartOf = counterpartOf;
+const spellingOf = (property, includeAxes) => {
+    const table = includeAxes ? exports.LOGICAL_PHYSICAL_PAIRS : exports.LOGICAL_PHYSICAL_EDGES;
+    for (const [logical, physical] of table) {
+        if (property === logical)
+            return 'logical';
+        if (property === physical)
+            return 'physical';
+    }
+    return undefined;
+};
+exports.spellingOf = spellingOf;
+const kebabCache = new Map();
+const toKebabCase = (name) => {
+    const cached = kebabCache.get(name);
+    if (cached !== undefined)
+        return cached;
+    const kebab = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+    kebabCache.set(name, kebab);
+    return kebab;
+};
+exports.toKebabCase = toKebabCase;
+const toCamelCase = (name) => name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+exports.toCamelCase = toCamelCase;

package/dist/util/spellingRule.d.ts

@@ -0,0 +1,3 @@
+import type { PropertySpelling } from './logicalPhysical';
+import type { Rule } from 'eslint';
+export declare const createSpellingRule: (reject: PropertySpelling) => Rule.RuleModule;

package/dist/util/spellingRule.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSpellingRule = void 0;
+const logicalPhysical_1 = require("./logicalPhysical");
+const DESCRIPTIONS = {
+    physical: 'Disallow the physical name of a property that also has a logical name',
+    logical: 'Disallow the logical name of a property that also has a physical name',
+};
+const MESSAGES = {
+    physical: "'{{ name }}' is the physical name of this property. Write it as '{{ counterpart }}', which follows the writing mode.",
+    logical: "'{{ name }}' is the logical name of this property. This project is written in physical properties; use '{{ counterpart }}'.",
+};
+const createSpellingRule = (reject) => ({
+    meta: {
+        type: 'suggestion',
+        docs: { description: DESCRIPTIONS[reject] },
+        hasSuggestions: true,
+        messages: {
+            rejected: MESSAGES[reject],
+            rename: "Rename to '{{ counterpart }}'",
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    sizes: { type: 'boolean' },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const includeAxes = context.options[0]?.sizes ?? false;
+        const plumeriaAliases = {};
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value === '@plumeria/core') {
+                    node.specifiers.forEach((specifier) => {
+                        if (specifier.type === 'ImportNamespaceSpecifier' ||
+                            specifier.type === 'ImportDefaultSpecifier') {
+                            plumeriaAliases[specifier.local.name] = 'NAMESPACE';
+                        }
+                        else {
+                            const spec = specifier;
+                            const importedName = spec.imported.type === 'Identifier'
+                                ? spec.imported.name
+                                : String(spec.imported.value);
+                            plumeriaAliases[specifier.local.name] = importedName;
+                        }
+                    });
+                }
+            },
+            CallExpression(node) {
+                let isCssProperties = false;
+                if (node.callee.type === 'MemberExpression') {
+                    if (node.callee.object.type === 'Identifier' &&
+                        plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
+                        const propertyName = node.callee.property.type === 'Identifier'
+                            ? node.callee.property.name
+                            : null;
+                        if (propertyName === 'create' ||
+                            propertyName === 'keyframes' ||
+                            propertyName === 'viewTransition') {
+                            isCssProperties = true;
+                        }
+                    }
+                }
+                else if (node.callee.type === 'Identifier') {
+                    const aliasName = plumeriaAliases[node.callee.name];
+                    if (aliasName === 'create' ||
+                        aliasName === 'keyframes' ||
+                        aliasName === 'viewTransition') {
+                        isCssProperties = true;
+                    }
+                }
+                if (isCssProperties) {
+                    node.arguments.forEach((arg) => {
+                        if (arg.type === 'ObjectExpression') {
+                            arg.properties.forEach((prop) => {
+                                if (prop.type === 'Property' &&
+                                    prop.value.type === 'ObjectExpression') {
+                                    checkStyleObject(prop.value);
+                                }
+                            });
+                        }
+                    });
+                }
+            },
+        };
+        function checkStyleObject(node) {
+            node.properties.forEach((prop) => {
+                if (prop.type !== 'Property')
+                    return;
+                if (prop.value.type === 'ObjectExpression') {
+                    checkStyleObject(prop.value);
+                    return;
+                }
+                let name = '';
+                if (!prop.computed) {
+                    name =
+                        prop.key.type === 'Identifier'
+                            ? prop.key.name
+                            : String(prop.key.value);
+                }
+                else if (prop.key.type === 'Literal' &&
+                    typeof prop.key.value === 'string') {
+                    name = prop.key.value;
+                }
+                if (!name)
+                    return;
+                const kebab = (0, logicalPhysical_1.toKebabCase)(name);
+                if ((0, logicalPhysical_1.spellingOf)(kebab, includeAxes) !== reject)
+                    return;
+                report(prop, name, (0, logicalPhysical_1.toCamelCase)((0, logicalPhysical_1.counterpartOf)(kebab)));
+            });
+        }
+        function report(prop, name, counterpart) {
+            context.report({
+                node: prop.key,
+                messageId: 'rejected',
+                data: { name, counterpart },
+                suggest: [
+                    {
+                        messageId: 'rename',
+                        data: { counterpart },
+                        fix: (fixer) => fixer.replaceText(prop.key, counterpart),
+                    },
+                ],
+            });
+        }
+    },
+});
+exports.createSpellingRule = createSpellingRule;

package/oxlint.json

@@ -16,6 +16,7 @@
     "@plumeria/no-inner-call": "error",
     "@plumeria/no-invalid-selector": "error",
     "@plumeria/no-mixed-styling-props": "error",
+    "@plumeria/no-order-dependent-overlap": "warn",
     "@plumeria/no-unknown-css-properties": "error",
     "@plumeria/no-unused-keys": "warn",
     "@plumeria/sort-properties": "warn",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "18.2.7",
+  "version": "18.2.9",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -53,7 +53,8 @@
   },
   "dependencies": {
     "@typescript-eslint/utils": "^8.60.0",
-    "known-css-properties": "^0.37.0"
+    "known-css-properties": "^0.37.0",
+    "zss-engine": "2.4.3"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",