@plumeria/eslint-plugin 18.2.9 → 18.2.11

package/README.md

@@ -107,11 +107,38 @@ physical name, and two shorthands that cross without either containing the
 other. A shorthand and its longhand are ranked by specificity and never
 reported.
 
+It also reports two conditions in one style where one provably matches a subset
+of the other — `(min-width: 900px)` inside `(min-width: 600px)`, or two queries
+naming the same container — and the narrower one is written first. The optimizer
+places the narrower one last whatever the source says, so the declarations read
+the wrong way round. The swap is offered as a suggestion rather than a fix.
+
 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

package/dist/index.js

@@ -1,5 +1,6 @@
 "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");
@@ -17,6 +18,7 @@ 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,

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-order-dependent-overlap.js

@@ -58,7 +58,9 @@ exports.noOrderDependentOverlap = {
         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.",
+            condition: "'{{ narrow }}' matches only where '{{ broad }}' also matches, so it is the more specific of the two, and both set '{{ property }}'. Written first, it reads as though the broader one wins, which is the opposite of what the stylesheet does.",
             keep: "Keep '{{ keep }}'",
+            swap: "Write '{{ narrow }}' after '{{ broad }}'",
         },
         schema: [],
     },
@@ -120,6 +122,33 @@ exports.noOrderDependentOverlap = {
                 }
             },
         };
+        function keyNameOf(prop) {
+            if (!prop.computed) {
+                return prop.key.type === 'Identifier'
+                    ? prop.key.name
+                    : String(prop.key.value);
+            }
+            return prop.key.type === 'Literal' && typeof prop.key.value === 'string'
+                ? prop.key.value
+                : '';
+        }
+        function declaredNames(node) {
+            const names = new Set();
+            node.properties.forEach((prop) => {
+                if (prop.type !== 'Property' || prop.value.type === 'ObjectExpression')
+                    return;
+                const name = keyNameOf(prop);
+                if (name && !name.startsWith('--'))
+                    names.add(name);
+            });
+            return names;
+        }
+        function swapProperties(fixer, first, second) {
+            return [
+                fixer.replaceText(first, sourceCode.getText(second)),
+                fixer.replaceText(second, sourceCode.getText(first)),
+            ];
+        }
         function removeProperty(fixer, prop) {
             const after = sourceCode.getTokenAfter(prop);
             if (after && after.value === ',') {
@@ -132,24 +161,24 @@ exports.noOrderDependentOverlap = {
         }
         function checkStyleObject(node) {
             const declarations = [];
+            const conditions = [];
             node.properties.forEach((prop) => {
                 if (prop.type !== 'Property')
                     return;
                 if (prop.value.type === 'ObjectExpression') {
+                    const condition = keyNameOf(prop);
+                    if (condition.startsWith('@media') ||
+                        condition.startsWith('@container')) {
+                        conditions.push({
+                            prop,
+                            name: condition,
+                            sets: declaredNames(prop.value),
+                        });
+                    }
                     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 name = keyNameOf(prop);
                 if (!name ||
                     name.startsWith(':') ||
                     name.startsWith('[') ||
@@ -159,6 +188,33 @@ exports.noOrderDependentOverlap = {
                 }
                 declarations.push({ prop, name, kebab: (0, logicalPhysical_1.toKebabCase)(name) });
             });
+            for (let i = 0; i < conditions.length; i++) {
+                for (let j = i + 1; j < conditions.length; j++) {
+                    const first = conditions[i];
+                    const second = conditions[j];
+                    if (!(0, zss_engine_1.impliesCondition)(first.name, second.name))
+                        continue;
+                    const shared = [...first.sets].filter((name) => second.sets.has(name));
+                    if (shared.length === 0)
+                        continue;
+                    context.report({
+                        node: first.prop.key,
+                        messageId: 'condition',
+                        data: {
+                            narrow: first.name,
+                            broad: second.name,
+                            property: shared[0],
+                        },
+                        suggest: [
+                            {
+                                messageId: 'swap',
+                                data: { narrow: first.name, broad: second.name },
+                                fix: (fixer) => swapProperties(fixer, first.prop, second.prop),
+                            },
+                        ],
+                    });
+                }
+            }
             for (let i = 0; i < declarations.length; i++) {
                 for (let j = i + 1; j < declarations.length; j++) {
                     const first = declarations[i];

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

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