@plumeria/eslint-plugin 19.6.2 → 19.8.0

package/README.md

@@ -101,7 +101,8 @@ Disallow calling APIs inside functions.
 ### no-invalid-selector
 
 Disallow invalid selector inside `css.create()` and `css.keyframes()` and `css.viewTransition()`.  
-`create()` example: (Pseudo -> Query, Query -> Query)
+`create()` example: (Pseudo -> Query, Query -> Query)  
+Also reports a functional pseudo-class nested inside one of the same name, such as `:where(:where(.a), .b)`, and flattens it with a fix when the nested call is a whole argument. `:not()` may nest inside `:not()`. Reports a key nested deeper than 16 levels or holding a stray quote.
 
 ### no-mixed-styling-props
 

package/dist/rules/no-invalid-selector.js

@@ -1,8 +1,203 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.noInvalidSelector = void 0;
+const zss_engine_1 = require("zss-engine");
 const styleObject_1 = require("../util/styleObject");
 const staticValue_1 = require("../util/staticValue");
+const flattenablePseudos = new Set([
+    'is',
+    'where',
+    'matches',
+    '-webkit-any',
+    '-moz-any',
+    'current',
+    'past',
+    'future',
+    'has',
+    'host',
+    'host-context',
+    'lang',
+    'dir',
+    'state',
+    'part',
+    'slotted',
+    'nth-child',
+    'nth-last-child',
+    'nth-of-type',
+    'nth-last-of-type',
+    'nth-col',
+    'nth-last-col',
+    'heading',
+    'active-view-transition-type',
+    'highlight',
+    'view-transition-group',
+    'view-transition-image-pair',
+    'view-transition-old',
+    'view-transition-new',
+    'cue',
+    'cue-region',
+    'picker',
+    'scroll-button',
+]);
+function skipString(text, i) {
+    const quote = text[i];
+    let j = i + 1;
+    while (j < text.length && text[j] !== quote) {
+        j += text[j] === '\\' ? 2 : 1;
+    }
+    return j + 1;
+}
+function matchClose(text, i) {
+    const close = text[i] === '(' ? ')' : ']';
+    let depth = 0;
+    let j = i;
+    while (j < text.length) {
+        const ch = text[j];
+        if (ch === '\\') {
+            j += 2;
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            j = skipString(text, j);
+            continue;
+        }
+        if (ch === '(' || ch === '[')
+            depth++;
+        else if (ch === ')' || ch === ']') {
+            depth--;
+            if (depth === 0)
+                return ch === close ? j : -1;
+        }
+        j++;
+    }
+    return -1;
+}
+function findPseudoCalls(text) {
+    const calls = [];
+    let i = 0;
+    while (i < text.length) {
+        const ch = text[i];
+        if (ch === '\\') {
+            i += 2;
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            i = skipString(text, i);
+            continue;
+        }
+        if (ch === '(' || ch === '[') {
+            const close = matchClose(text, i);
+            if (close < 0)
+                return null;
+            i = close + 1;
+            continue;
+        }
+        if (ch === ':') {
+            const match = /^(::?)(-?[a-zA-Z][\w-]*)\(/.exec(text.slice(i));
+            if (match) {
+                const open = i + match[0].length - 1;
+                const close = matchClose(text, open);
+                if (close < 0)
+                    return null;
+                calls.push({
+                    prefix: match[1],
+                    name: match[2].toLowerCase(),
+                    start: i,
+                    end: close + 1,
+                    args: text.slice(open + 1, close),
+                });
+                i = close + 1;
+                continue;
+            }
+        }
+        i++;
+    }
+    return calls;
+}
+function splitTopLevel(text) {
+    const parts = [];
+    let depth = 0;
+    let last = 0;
+    let i = 0;
+    while (i < text.length) {
+        const ch = text[i];
+        if (ch === '\\') {
+            i += 2;
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            i = skipString(text, i);
+            continue;
+        }
+        if (ch === '(' || ch === '[')
+            depth++;
+        else if (ch === ')' || ch === ']')
+            depth--;
+        else if (ch === ',' && depth === 0) {
+            parts.push(text.slice(last, i));
+            last = i + 1;
+        }
+        i++;
+    }
+    parts.push(text.slice(last));
+    return parts;
+}
+function findSameNameNesting(text, ancestors) {
+    const calls = findPseudoCalls(text);
+    if (!calls)
+        return null;
+    for (const call of calls) {
+        const key = call.prefix + call.name;
+        if (key !== ':not' && ancestors.includes(key))
+            return call;
+        const nested = findSameNameNesting(call.args, [...ancestors, key]);
+        if (nested)
+            return nested;
+    }
+    return null;
+}
+function flattenSelector(text) {
+    const calls = findPseudoCalls(text);
+    if (!calls)
+        return text;
+    let result = '';
+    let last = 0;
+    for (const call of calls) {
+        const args = flattenArgs(call);
+        result += text.slice(last, call.start);
+        result +=
+            args === call.args
+                ? text.slice(call.start, call.end)
+                : `${call.prefix}${call.name}(${args})`;
+        last = call.end;
+    }
+    return result + text.slice(last);
+}
+function flattenArgs(call) {
+    let changed = false;
+    const items = [];
+    for (const part of splitTopLevel(call.args)) {
+        const flattened = flattenSelector(part);
+        if (flattened !== part)
+            changed = true;
+        const item = flattened.trim();
+        const inner = flattenablePseudos.has(call.name)
+            ? findPseudoCalls(item)
+            : null;
+        if (inner?.length === 1 &&
+            inner[0].start === 0 &&
+            inner[0].end === item.length &&
+            inner[0].prefix === call.prefix &&
+            inner[0].name === call.name) {
+            items.push(...splitTopLevel(inner[0].args).map((s) => s.trim()));
+            changed = true;
+        }
+        else {
+            items.push(item);
+        }
+    }
+    return changed ? items.join(', ') : call.args;
+}
 exports.noInvalidSelector = {
     meta: {
         type: 'problem',
@@ -14,9 +209,14 @@ exports.noInvalidSelector = {
             noQueryInsidePseudo: 'Media/Container queries cannot be nested inside pseudo-selectors.',
             noQueryInsideQuery: 'Media/Container queries cannot be nested inside other queries.',
             noPseudoInsidePseudo: 'Pseudo-selectors cannot be nested inside other pseudo-selectors.',
+            flattenSameNamePseudo: 'Flatten nested "{{name}}()" into a single "{{name}}()".',
+            noSameNamePseudoNesting: '"{{name}}()" cannot be nested inside another "{{name}}()"; rewrite it without nesting.',
+            tooDeepSelector: 'A selector key cannot nest parentheses deeper than {{max}} levels.',
+            strayQuote: 'A quote must open and close a string inside brackets or parentheses.',
             invalidKeyframesKey: 'Keyframes keys must be "from", "to", or a percentage value (e.g. "0%", "50%", "100%").',
             invalidViewTransitionKey: 'ViewTransition keys must be one of: "group", "imagePair", "new", "old".',
         },
+        fixable: 'code',
         schema: [],
     },
     create(context) {
@@ -46,6 +246,47 @@ exports.noInvalidSelector = {
                 return 'UNKNOWN';
             return 'SKIP';
         }
+        function checkPseudoNesting(node) {
+            const selector = node.type === 'Literal' && typeof node.value === 'string'
+                ? node.value
+                : staticValue(node);
+            if (typeof selector !== 'string' || !/^[:[]/.test(selector))
+                return;
+            const invalid = (0, zss_engine_1.findInvalidSelector)((0, zss_engine_1.stripSelectorComments)(selector));
+            if (invalid?.kind === 'too-deep') {
+                context.report({
+                    node,
+                    messageId: 'tooDeepSelector',
+                    data: { max: String(zss_engine_1.MAX_SELECTOR_NESTING) },
+                });
+                return;
+            }
+            if (invalid?.kind === 'stray-quote') {
+                context.report({ node, messageId: 'strayQuote' });
+                return;
+            }
+            const nested = findSameNameNesting(selector, []);
+            if (!nested)
+                return;
+            const flattened = flattenSelector(selector);
+            const raw = node.type === 'Literal' ? node.raw : '';
+            const quote = raw[0];
+            const fixable = flattened !== selector &&
+                (quote === '"' || quote === "'") &&
+                raw.slice(1, -1) === selector &&
+                !flattened.includes(quote) &&
+                !flattened.includes('\\');
+            context.report({
+                node,
+                messageId: fixable && !findSameNameNesting(flattened, [])
+                    ? 'flattenSameNamePseudo'
+                    : 'noSameNamePseudoNesting',
+                data: { name: nested.prefix + nested.name },
+                fix: fixable
+                    ? (fixer) => fixer.replaceText(node, `${quote}${flattened}${quote}`)
+                    : null,
+            });
+        }
         function checkNesting(node, parentType) {
             for (const prop of node.properties) {
                 if (prop.type !== 'Property')
@@ -53,6 +294,10 @@ exports.noInvalidSelector = {
                 const currentType = getSelectorType(prop.key);
                 if (currentType === 'SKIP')
                     continue;
+                if (currentType === 'PSEUDO' ||
+                    (currentType === 'PROPERTY' &&
+                        (prop.computed || prop.key.type !== 'Identifier')))
+                    checkPseudoNesting(prop.key);
                 if (currentType === 'UNKNOWN') {
                     context.report({
                         node: prop.key,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.6.2",
+  "version": "19.8.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "known-css-properties": "^0.37.0",
-    "zss-engine": "2.8.0",
-    "@plumeria/compiler": "19.6.2"
+    "zss-engine": "2.9.0",
+    "@plumeria/compiler": "19.8.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",