@plumeria/eslint-plugin 18.2.9 → 18.2.10

package/README.md

@@ -112,6 +112,27 @@ 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/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.10",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",