@plumeria/eslint-plugin 18.2.8 → 18.2.9

package/README.md

@@ -107,6 +107,27 @@ 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,9 @@ 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");
@@ -20,7 +22,9 @@ 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,

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.js

@@ -2,54 +2,7 @@
 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 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) {
@@ -79,21 +32,12 @@ const coverageOf = (property) => {
     const longhands = zss_engine_1.DIRECT_LONGHANDS[property];
     const coverage = longhands
         ? new Set(longhands.flatMap((longhand) => [...coverageOf(longhand)]))
-        : new Set([canonical(property)]);
+        : new Set([(0, logicalPhysical_1.canonicalProperty)(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))
+    if ((0, logicalPhysical_1.canonicalProperty)(first) === (0, logicalPhysical_1.canonicalProperty)(second))
         return 'alias';
     const left = coverageOf(first);
     const right = coverageOf(second);
@@ -213,7 +157,7 @@ exports.noOrderDependentOverlap = {
                     name.startsWith('--')) {
                     return;
                 }
-                declarations.push({ prop, name, kebab: toKebabCase(name) });
+                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++) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "18.2.8",
+  "version": "18.2.9",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",