@plumeria/eslint-plugin 18.2.10 → 18.2.11

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

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