@plumeria/eslint-plugin 18.2.8 → 18.2.10

package/README.md

@@ -107,6 +107,48 @@ 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.
+
+### expand-border-shorthands
+
+Expands a border shorthand that bundles a width, a style and a color —
+`border`, `borderBlock`, `borderInline`, and the eight edge forms — into the
+three declarations it stands for. Those bundles are the only properties left
+that cross an axis shorthand without either containing the other, so expanding
+them turns the last unrankable pairs into ordinary shorthand-to-longhand ones.
+
+Fixable. A value it cannot split, such as `var(--edge)` or `inherit`, is
+reported without a fix: leaving it silent would let the expanded declarations
+elsewhere outrank it. Not part of `recommended`.
+
+```js
+borderTop: '1px solid red'
+// becomes
+borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: 'red'
+```
+
+A shorthand resets what it omits, so `borderBlock: 'solid'` expands with
+`medium` and `currentcolor` written out.
+
+### 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

@@ -1,11 +1,14 @@
 "use strict";
 const props_require_import_1 = require("./rules/props-require-import");
+const expand_border_shorthands_1 = require("./rules/expand-border-shorthands");
 const no_combinator_1 = require("./rules/no-combinator");
 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");
@@ -15,12 +18,15 @@ const validate_values_1 = require("./rules/validate-values");
 const validate_pseudos_1 = require("./rules/validate-pseudos");
 const rules = {
     'props-require-import': props_require_import_1.propsRequireImport,
+    'expand-border-shorthands': expand_border_shorthands_1.expandBorderShorthands,
     'no-combinator': no_combinator_1.noCombinator,
     'no-destructure': no_destructure_1.noDestructure,
     '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/expand-border-shorthands.d.ts

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

package/dist/rules/expand-border-shorthands.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expandBorderShorthands = void 0;
+const borderShorthand_1 = require("../util/borderShorthand");
+const logicalPhysical_1 = require("../util/logicalPhysical");
+const BUNDLES = new Set(borderShorthand_1.BORDER_BUNDLES);
+exports.expandBorderShorthands = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Expand a border shorthand that bundles width, style and color into the three declarations it sets',
+        },
+        fixable: 'code',
+        messages: {
+            expand: "'{{ name }}' sets a width, a style and a color at once. It crosses the axis shorthands without either containing the other, so write the three declarations it stands for.",
+            opaque: "'{{ name }}' sets a width, a style and a color at once, and this value cannot be split. Write the three declarations yourself, or the ones this rule expands elsewhere will outrank it.",
+        },
+        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 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;
+                }
+                const kebab = (0, logicalPhysical_1.toKebabCase)(name);
+                if (!BUNDLES.has(kebab))
+                    return;
+                const literal = prop.value.type === 'Literal' && typeof prop.value.value === 'string'
+                    ? prop.value.value
+                    : null;
+                const parts = literal === null ? null : (0, borderShorthand_1.splitBorderValue)(literal);
+                if (!parts) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'opaque',
+                        data: { name },
+                    });
+                    return;
+                }
+                const quote = sourceCode.getText(prop.value).trim().startsWith('"')
+                    ? '"'
+                    : "'";
+                const indent = ' '.repeat(prop.loc.start.column);
+                const declarations = ['width', 'style', 'color']
+                    .map((part) => `${(0, logicalPhysical_1.toCamelCase)(`${kebab}-${part}`)}: ${quote}${parts[part]}${quote}`)
+                    .join(`,\n${indent}`);
+                context.report({
+                    node: prop.key,
+                    messageId: 'expand',
+                    data: { name },
+                    fix: (fixer) => fixer.replaceText(prop, declarations),
+                });
+            });
+        }
+    },
+};

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/borderShorthand.d.ts

@@ -0,0 +1,6 @@
+export declare const BORDER_BUNDLES: string[];
+export declare const splitBorderValue: (value: string) => {
+    width: string;
+    style: string;
+    color: string;
+} | null;

package/dist/util/borderShorthand.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitBorderValue = exports.BORDER_BUNDLES = void 0;
+exports.BORDER_BUNDLES = [
+    'border',
+    'border-block',
+    'border-inline',
+    'border-top',
+    'border-bottom',
+    'border-left',
+    'border-right',
+    'border-block-start',
+    'border-block-end',
+    'border-inline-start',
+    'border-inline-end',
+];
+const STYLES = new Set([
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+]);
+const WIDTH_KEYWORDS = new Set(['thin', 'medium', 'thick']);
+const LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)([a-z%]+)?$/i;
+const INITIAL = { width: 'medium', style: 'none', color: 'currentcolor' };
+const tokenize = (value) => {
+    const tokens = [];
+    let depth = 0;
+    let current = '';
+    for (const character of value.trim()) {
+        if (character === '(')
+            depth++;
+        if (character === ')')
+            depth--;
+        if (depth === 0 && /\s/.test(character)) {
+            if (current)
+                tokens.push(current);
+            current = '';
+            continue;
+        }
+        current += character;
+    }
+    if (current)
+        tokens.push(current);
+    return depth === 0 && tokens.length > 0 && tokens.length <= 3 ? tokens : null;
+};
+const isWidth = (token) => WIDTH_KEYWORDS.has(token) || LENGTH.test(token) || /^calc\(/i.test(token);
+const isColor = (token) => /^(#|rgb|hsl|hwb|lab|lch|oklab|oklch|color\(|light-dark\()/i.test(token) ||
+    /^[a-z-]+$/i.test(token);
+const splitBorderValue = (value) => {
+    const tokens = tokenize(value);
+    if (!tokens)
+        return null;
+    if (tokens.some((token) => /\bvar\(|^inherit$|^initial$|^unset$|^revert/i.test(token)))
+        return null;
+    const parts = {};
+    for (const token of tokens) {
+        const lower = token.toLowerCase();
+        if (!parts.style && STYLES.has(lower)) {
+            parts.style = token;
+            continue;
+        }
+        if (!parts.width && isWidth(lower)) {
+            parts.width = token;
+            continue;
+        }
+        if (!parts.color && isColor(token)) {
+            parts.color = token;
+            continue;
+        }
+        return null;
+    }
+    return {
+        width: parts.width ?? INITIAL.width,
+        style: parts.style ?? INITIAL.style,
+        color: parts.color ?? INITIAL.color,
+    };
+};
+exports.splitBorderValue = splitBorderValue;

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.10",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",