@plumeria/eslint-plugin 18.2.7 → 18.2.8

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,14 @@ 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.
+
 ### no-unknown-css-properties
 
 Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.

package/dist/index.js

@@ -6,6 +6,7 @@ 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_mixed_styling_props_1 = require("./rules/no-mixed-styling-props");
+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");
@@ -20,6 +21,7 @@ const rules = {
     'no-inner-call': no_inner_call_1.noInnerCall,
     'no-invalid-selector': no_invalid_selector_1.noInvalidSelector,
     'no-mixed-styling-props': no_mixed_styling_props_1.noMixedStylingProps,
+    '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 +44,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-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,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noOrderDependentOverlap = void 0;
+const zss_engine_1 = require("zss-engine");
+const BOX_FAMILIES = ['margin', 'padding', 'scroll-margin', 'scroll-padding'];
+const LOGICAL_PHYSICAL_EDGES = [
+    ['block-start', 'top'],
+    ['block-end', 'bottom'],
+    ['inline-start', 'left'],
+    ['inline-end', 'right'],
+];
+const BORDER_VALUES = ['width', 'style', 'color'];
+const CORNERS = [
+    ['start-start', 'top-left'],
+    ['start-end', 'top-right'],
+    ['end-start', 'bottom-left'],
+    ['end-end', 'bottom-right'],
+];
+const SIZES = ['', 'min-', 'max-'];
+const LOGICAL_PHYSICAL_PAIRS = [
+    ...BOX_FAMILIES.flatMap((family) => LOGICAL_PHYSICAL_EDGES.map(([logical, physical]) => [
+        `${family}-${logical}`,
+        `${family}-${physical}`,
+    ])),
+    ...LOGICAL_PHYSICAL_EDGES.map(([logical, physical]) => [
+        `inset-${logical}`,
+        physical,
+    ]),
+    ...LOGICAL_PHYSICAL_EDGES.flatMap(([logical, physical]) => [
+        [`border-${logical}`, `border-${physical}`],
+        ...BORDER_VALUES.map((value) => [
+            `border-${logical}-${value}`,
+            `border-${physical}-${value}`,
+        ]),
+    ]),
+    ...CORNERS.flatMap(([logical, physical]) => [
+        [`border-${logical}-radius`, `border-${physical}-radius`],
+        [`corner-${logical}-shape`, `corner-${physical}-shape`],
+    ]),
+    ...SIZES.flatMap((size) => [
+        [`${size}block-size`, `${size}height`],
+        [`${size}inline-size`, `${size}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'],
+];
+const alias = new Map(LOGICAL_PHYSICAL_PAIRS);
+const canonical = (property) => alias.get(property) ?? property;
+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([canonical(property)]);
+    coverages.set(property, coverage);
+    return coverage;
+};
+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;
+};
+const overlapOf = (first, second) => {
+    if (canonical(first) === canonical(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: 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/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.8",
   "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",