@plumeria/eslint-plugin 18.2.14 → 18.2.16

package/README.md

@@ -64,7 +64,10 @@ A single rule can override that if you need it to:
 The name must match whatever the loader or unplugin was given. If they disagree,
 the lint rules report against a prop the compiler never transforms.
 
-## Rules
+## Recommended rules
+
+The following rules are enabled by `plumeria.configs.recommended` with the
+severity shown in [Recommended configuration](#recommended-configuration).
 
 ### props-require-import
 
@@ -118,6 +121,50 @@ 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.
 
+### no-unknown-css-properties
+
+Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.
+
+### no-unused-keys
+
+Warns when object keys are defined but not used, mainly in component files.
+
+### sort-properties
+
+Automatically sorts CSS properties in the recommended order for consistency and maintainability.
+
+### format-properties
+
+Automatically format for consistency and maintainability.
+
+- Formats a line into a multi-line.
+- Formats by filling in blank lines.
+
+### validate-values
+
+Validates CSS property values for correctness. Only standard CSS properties are checked; properties with string literal keys (e.g., computed or dynamic property names) are not validated.
+
+### validate-pseudos
+
+Validates CSS pseudo-classes and pseudo-elements inside `css.create()`. It checks for typos and structural correctness and supports validation of computed keys when TypeScript is available.
+
+## Optional rules
+
+These rules are not enabled by `plumeria.configs.recommended`. Enable only the
+policy or transformation that fits the project:
+
+```js
+export default [
+  plumeria.configs.recommended,
+  {
+    rules: {
+      '@plumeria/no-physical-properties': 'warn',
+      '@plumeria/expand-border-shorthands': 'warn',
+    },
+  },
+];
+```
+
 ### expand-border-shorthands
 
 Expands a border shorthand that bundles a width, a style and a color —
@@ -128,7 +175,7 @@ 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`.
+elsewhere outrank it.
 
 ```js
 borderTop: '1px solid red'
@@ -149,38 +196,11 @@ Accepts `{ sizes }`, which adds `width`, `height`, their `min`/`max` forms,
 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`.
-
-### no-unused-keys
-
-Warns when object keys are defined but not used, mainly in component files.
-
-### sort-properties
-
-Automatically sorts CSS properties in the recommended order for consistency and maintainability.
-
-### format-properties
-
-Automatically format for consistency and maintainability.
-
-- Formats a line into a multi-line.
-- Formats by filling in blank lines.
-
-### validate-values
-
-Validates CSS property values for correctness. Only standard CSS properties are checked; properties with string literal keys (e.g., computed or dynamic property names) are not validated.
-
-### validate-pseudos
-
-Validates CSS pseudo-classes and pseudo-elements inside `css.create()`. It checks for typos and structural correctness and supports validation of computed keys when TypeScript is available.
+Turning both rules 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.
 
 ## CLI (plumerialint)
 

package/dist/rules/no-order-dependent-overlap.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.noOrderDependentOverlap = void 0;
 const zss_engine_1 = require("zss-engine");
 const logicalPhysical_1 = require("../util/logicalPhysical");
+const selector_1 = require("../util/selector");
 const styleObject_1 = require("../util/styleObject");
 const DIRECT_SHORTHANDS = {};
 for (const [shorthand, longhands] of Object.entries(zss_engine_1.DIRECT_LONGHANDS)) {
@@ -60,6 +61,7 @@ exports.noOrderDependentOverlap = {
             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.",
+            state: "'{{ first }}' and '{{ second }}' can match at the same time and both set '{{ property }}', but neither outranks the other, so the result depends on the order they are written. Declare '{{ compound }}' if the intersection has a value of its own, or split them into separate styles and compose them in the order that should win.",
             keep: "Keep '{{ keep }}'",
             swap: "Write '{{ narrow }}' after '{{ broad }}'",
         },
@@ -134,17 +136,31 @@ exports.noOrderDependentOverlap = {
                 ? prop.key.value
                 : '';
         }
-        function declaredNames(node) {
+        function declaredNames(node, withCustomProperties = false) {
             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);
+                if (!name)
+                    return;
+                if (name.startsWith('--')) {
+                    if (withCustomProperties)
+                        names.add(name);
+                    return;
+                }
+                names.add(name);
             });
             return names;
         }
+        function overlapsProperty(first, second) {
+            if (first.startsWith('--') || second.startsWith('--')) {
+                return first === second;
+            }
+            return ((0, logicalPhysical_1.canonicalProperty)((0, logicalPhysical_1.toKebabCase)(first)) ===
+                (0, logicalPhysical_1.canonicalProperty)((0, logicalPhysical_1.toKebabCase)(second)) ||
+                overlapOf((0, logicalPhysical_1.toKebabCase)(first), (0, logicalPhysical_1.toKebabCase)(second)) === 'crossing');
+        }
         function swapProperties(fixer, first, second) {
             return [
                 fixer.replaceText(first, sourceCode.getText(second)),
@@ -164,6 +180,7 @@ exports.noOrderDependentOverlap = {
         function checkStyleObject(node) {
             const declarations = [];
             const conditions = [];
+            const states = [];
             node.properties.forEach((prop) => {
                 if (prop.type !== 'Property')
                     return;
@@ -177,6 +194,13 @@ exports.noOrderDependentOverlap = {
                             sets: declaredNames(prop.value),
                         });
                     }
+                    else if ((0, selector_1.isStateSelector)(condition)) {
+                        states.push({
+                            prop,
+                            name: condition,
+                            sets: declaredNames(prop.value, true),
+                        });
+                    }
                     checkStyleObject(prop.value);
                     return;
                 }
@@ -217,6 +241,40 @@ exports.noOrderDependentOverlap = {
                     });
                 }
             }
+            for (let i = 0; i < states.length; i++) {
+                for (let j = i + 1; j < states.length; j++) {
+                    const first = states[i];
+                    const second = states[j];
+                    if ((0, zss_engine_1.getPseudoElement)(first.name) !== (0, zss_engine_1.getPseudoElement)(second.name)) {
+                        continue;
+                    }
+                    if ((0, zss_engine_1.getSpecificity)(first.name).join() !==
+                        (0, zss_engine_1.getSpecificity)(second.name).join()) {
+                        continue;
+                    }
+                    if ((0, selector_1.areExclusive)(first.name, second.name))
+                        continue;
+                    const shared = [...first.sets].find((name) => [...second.sets].some((other) => overlapsProperty(name, other)));
+                    if (!shared)
+                        continue;
+                    if (states.some((state) => state !== first &&
+                        state !== second &&
+                        (0, selector_1.covers)(state.name, first.name, second.name) &&
+                        [...state.sets].some((name) => overlapsProperty(name, shared)))) {
+                        continue;
+                    }
+                    context.report({
+                        node: second.prop.key,
+                        messageId: 'state',
+                        data: {
+                            first: first.name,
+                            second: second.name,
+                            property: shared,
+                            compound: (0, selector_1.compoundOf)(first.name, second.name),
+                        },
+                    });
+                }
+            }
             for (let i = 0; i < declarations.length; i++) {
                 for (let j = i + 1; j < declarations.length; j++) {
                     const first = declarations[i];

package/dist/util/selector.d.ts

@@ -0,0 +1,11 @@
+interface Token {
+    text: string;
+    isPseudoElement: boolean;
+}
+export declare function tokenize(selector: string): Token[];
+export declare function isStateSelector(selector: string): boolean;
+export declare function areExclusive(first: string, second: string): boolean;
+export declare function statesOf(selector: string): string[];
+export declare function compoundOf(first: string, second: string): string;
+export declare function covers(compound: string, first: string, second: string): boolean;
+export {};

package/dist/util/selector.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tokenize = tokenize;
+exports.isStateSelector = isStateSelector;
+exports.areExclusive = areExclusive;
+exports.statesOf = statesOf;
+exports.compoundOf = compoundOf;
+exports.covers = covers;
+const zss_engine_1 = require("zss-engine");
+const LEGACY_PSEUDO_ELEMENTS = new Set([
+    'before',
+    'after',
+    'first-line',
+    'first-letter',
+]);
+const EXCLUSIVE_PAIRS = [
+    [':link', ':visited'],
+    [':enabled', ':disabled'],
+    [':read-only', ':read-write'],
+    [':valid', ':invalid'],
+    [':in-range', ':out-of-range'],
+    [':required', ':optional'],
+].map((pair) => pair.slice().sort().join('\0'));
+const isNameChar = (char) => /[\w-]/.test(char);
+const skipName = (selector, from) => {
+    let index = from;
+    while (index < selector.length) {
+        if (selector[index] === '\\') {
+            index += 2;
+            continue;
+        }
+        if (!isNameChar(selector[index]))
+            break;
+        index += 1;
+    }
+    return index;
+};
+const findClose = (selector, open) => {
+    let depth = 0;
+    for (let index = open; index < selector.length; index++) {
+        const char = selector[index];
+        if (char === '\\') {
+            index += 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            index += 1;
+            while (index < selector.length && selector[index] !== char) {
+                if (selector[index] === '\\')
+                    index += 1;
+                index += 1;
+            }
+            continue;
+        }
+        if (char === '(')
+            depth += 1;
+        else if (char === ')') {
+            depth -= 1;
+            if (depth === 0)
+                return index;
+        }
+    }
+    return selector.length;
+};
+const skipBracket = (selector, open) => {
+    for (let index = open + 1; index < selector.length; index++) {
+        const char = selector[index];
+        if (char === '\\') {
+            index += 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            index += 1;
+            while (index < selector.length && selector[index] !== char) {
+                if (selector[index] === '\\')
+                    index += 1;
+                index += 1;
+            }
+            continue;
+        }
+        if (char === ']')
+            return index + 1;
+    }
+    return selector.length;
+};
+function tokenize(selector) {
+    const tokens = [];
+    let index = 0;
+    while (index < selector.length) {
+        const char = selector[index];
+        const start = index;
+        if (char === '#' || char === '.') {
+            index = skipName(selector, index + 1);
+            tokens.push({
+                text: selector.slice(start, index),
+                isPseudoElement: false,
+            });
+            continue;
+        }
+        if (char === '[') {
+            index = skipBracket(selector, index);
+            tokens.push({
+                text: selector.slice(start, index),
+                isPseudoElement: false,
+            });
+            continue;
+        }
+        if (char === ':') {
+            const doubleColon = selector[index + 1] === ':';
+            const nameStart = index + (doubleColon ? 2 : 1);
+            const nameEnd = skipName(selector, nameStart);
+            const name = selector.slice(nameStart, nameEnd).toLowerCase();
+            index = nameEnd;
+            let inner = '';
+            if (selector[index] === '(') {
+                const close = findClose(selector, index);
+                inner = selector.slice(index + 1, close);
+                index = close + 1;
+            }
+            const text = selector.slice(start, index);
+            const argument = inner ? `(${inner})` : '';
+            if (doubleColon || LEGACY_PSEUDO_ELEMENTS.has(name)) {
+                tokens.push({
+                    text: `::${name}${argument}`,
+                    isPseudoElement: true,
+                });
+                continue;
+            }
+            tokens.push({ text, isPseudoElement: false });
+            continue;
+        }
+        if (isNameChar(char) || char === '\\') {
+            index = skipName(selector, index);
+            tokens.push({
+                text: selector.slice(start, index),
+                isPseudoElement: false,
+            });
+            continue;
+        }
+        index += 1;
+    }
+    return tokens;
+}
+function isStateSelector(selector) {
+    const tokens = tokenize(selector);
+    return (tokens.length > 0 &&
+        tokens.every((token) => token.isPseudoElement ||
+            token.text.startsWith(':') ||
+            token.text.startsWith('[')));
+}
+const negationOf = (state) => {
+    if (!state.startsWith(':not(') || !state.endsWith(')'))
+        return null;
+    return state.slice(5, -1).trim();
+};
+function areExclusive(first, second) {
+    const left = new Set(statesOf(first));
+    const right = new Set(statesOf(second));
+    for (const a of left) {
+        for (const b of right) {
+            if (a === b)
+                continue;
+            if (negationOf(a) === b || negationOf(b) === a)
+                return true;
+            if (EXCLUSIVE_PAIRS.includes([a, b].sort().join('\0')))
+                return true;
+        }
+    }
+    return false;
+}
+function statesOf(selector) {
+    return tokenize(selector)
+        .filter((token) => !token.isPseudoElement)
+        .map((token) => token.text);
+}
+function compoundOf(first, second) {
+    const states = [...new Set([...statesOf(first), ...statesOf(second)])];
+    return states.join('') + (0, zss_engine_1.getPseudoElement)(first);
+}
+function covers(compound, first, second) {
+    const declared = new Set(statesOf(compound));
+    if ((0, zss_engine_1.getPseudoElement)(compound) !== (0, zss_engine_1.getPseudoElement)(first))
+        return false;
+    return [...statesOf(first), ...statesOf(second)].every((state) => declared.has(state));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "18.2.14",
+  "version": "18.2.16",
   "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.5.0"
+    "zss-engine": "2.6.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",