@plumeria/eslint-plugin 18.2.10 → 18.2.12

package/README.md

@@ -107,6 +107,12 @@ 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

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

@@ -97,9 +97,24 @@ exports.expandBorderShorthands = {
                 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;
+                let literal = null;
+                let expressions = [];
+                if (prop.value.type === 'Literal' &&
+                    typeof prop.value.value === 'string') {
+                    literal = prop.value.value;
+                }
+                else if (prop.value.type === 'TemplateLiteral') {
+                    const template = prop.value;
+                    expressions = template.expressions.map((expression) => sourceCode.getText(expression));
+                    literal = template.quasis
+                        .map((quasi, index) => index < expressions.length
+                        ? quasi.value.raw +
+                            borderShorthand_1.EXPRESSION_MARKER +
+                            index +
+                            borderShorthand_1.EXPRESSION_MARKER
+                        : quasi.value.raw)
+                        .join('');
+                }
                 const parts = literal === null ? null : (0, borderShorthand_1.splitBorderValue)(literal);
                 if (!parts) {
                     context.report({
@@ -112,9 +127,20 @@ exports.expandBorderShorthands = {
                 const quote = sourceCode.getText(prop.value).trim().startsWith('"')
                     ? '"'
                     : "'";
+                const marker = new RegExp(`${borderShorthand_1.EXPRESSION_MARKER}(\\d+)${borderShorthand_1.EXPRESSION_MARKER}`, 'g');
+                const render = (value) => {
+                    if (!value.includes(borderShorthand_1.EXPRESSION_MARKER)) {
+                        return `${quote}${value}${quote}`;
+                    }
+                    const restored = value.replace(marker, (_, index) => `\${${expressions[Number(index)]}}`);
+                    const alone = /^\$\{([\s\S]*)\}$/.exec(restored);
+                    return alone && !alone[1].includes('${')
+                        ? alone[1]
+                        : `\`${restored}\``;
+                };
                 const indent = ' '.repeat(prop.loc.start.column);
                 const declarations = ['width', 'style', 'color']
-                    .map((part) => `${(0, logicalPhysical_1.toCamelCase)(`${kebab}-${part}`)}: ${quote}${parts[part]}${quote}`)
+                    .map((part) => `${(0, logicalPhysical_1.toCamelCase)(`${kebab}-${part}`)}: ${render(parts[part])}`)
                     .join(`,\n${indent}`);
                 context.report({
                     node: prop.key,

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

@@ -1,4 +1,5 @@
 export declare const BORDER_BUNDLES: string[];
+export declare const EXPRESSION_MARKER = "\0";
 export declare const splitBorderValue: (value: string) => {
     width: string;
     style: string;

package/dist/util/borderShorthand.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitBorderValue = exports.BORDER_BUNDLES = void 0;
+exports.splitBorderValue = exports.EXPRESSION_MARKER = exports.BORDER_BUNDLES = void 0;
 exports.BORDER_BUNDLES = [
     'border',
     'border-block',
@@ -28,7 +28,8 @@ const STYLES = new Set([
 ]);
 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 INITIAL = { width: 'medium', style: 'none', color: 'currentColor' };
+exports.EXPRESSION_MARKER = '\u0000';
 const tokenize = (value) => {
     const tokens = [];
     let depth = 0;
@@ -53,14 +54,22 @@ const tokenize = (value) => {
 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 isExpression = (token) => /\bvar\(/i.test(token) || token.includes(exports.EXPRESSION_MARKER);
 const splitBorderValue = (value) => {
     const tokens = tokenize(value);
     if (!tokens)
         return null;
-    if (tokens.some((token) => /\bvar\(|^inherit$|^initial$|^unset$|^revert/i.test(token)))
+    if (tokens.some((token) => /^inherit$|^initial$|^unset$|^revert/i.test(token)))
         return null;
     const parts = {};
+    let expression = null;
     for (const token of tokens) {
+        if (isExpression(token)) {
+            if (expression !== null)
+                return null;
+            expression = token;
+            continue;
+        }
         const lower = token.toLowerCase();
         if (!parts.style && STYLES.has(lower)) {
             parts.style = token;
@@ -76,6 +85,12 @@ const splitBorderValue = (value) => {
         }
         return null;
     }
+    if (expression !== null) {
+        const open = ['width', 'style', 'color'].filter((part) => !parts[part]);
+        if (open.length !== 1)
+            return null;
+        parts[open[0]] = expression;
+    }
     return {
         width: parts.width ?? INITIAL.width,
         style: parts.style ?? INITIAL.style,

package/dist/util/validData.js

@@ -286,7 +286,7 @@ const validData = {
     textDecorationColor: [],
     caretColor: ['auto'],
     columnRuleColor: [],
-    borderColor: [],
+    borderColor: ['currentColor'],
     captionSide: ['top', 'bottom'],
     clear: [
         'inline-start',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "18.2.10",
+  "version": "18.2.12",
   "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",