@plumeria/eslint-plugin 16.1.1 → 16.2.0

package/README.md

@@ -19,6 +19,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/sort-properties`: **warn**
 - `@plumeria/format-properties`: **warn**
 - `@plumeria/validate-values`: **warn**
+- `@plumeria/validate-pseudos`: **error**
 
 ```js
 import plumeria from '@plumeria/eslint-plugin';
@@ -78,6 +79,10 @@ Automatically format for consistency and maintainability.
 
 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.
+
 ## CLI (plumerialint)
 
 This package provides a CLI command, `plumerialint`, as a convenient way

package/dist/index.js

@@ -11,6 +11,7 @@ const no_unused_keys_1 = require("./rules/no-unused-keys");
 const sort_properties_1 = require("./rules/sort-properties");
 const format_properties_1 = require("./rules/format-properties");
 const validate_values_1 = require("./rules/validate-values");
+const validate_pseudos_1 = require("./rules/validate-pseudos");
 const rules = {
     'style-name-requires-import': style_name_requires_import_1.styleNameRequiresImport,
     'no-combinator': no_combinator_1.noCombinator,
@@ -24,6 +25,7 @@ const rules = {
     'sort-properties': sort_properties_1.sortProperties,
     'format-properties': format_properties_1.formatProperties,
     'validate-values': validate_values_1.validateValues,
+    'validate-pseudos': validate_pseudos_1.validatePseudos,
 };
 const configs = {
     recommended: {
@@ -45,6 +47,7 @@ const configs = {
             '@plumeria/sort-properties': 'warn',
             '@plumeria/format-properties': 'warn',
             '@plumeria/validate-values': 'warn',
+            '@plumeria/validate-pseudos': 'error',
         },
     },
 };

package/dist/rules/validate-pseudos.d.ts

@@ -0,0 +1,4 @@
+import { Rule } from 'eslint';
+export declare function splitChainedPseudos(selector: string): string[];
+export declare function isValidPseudo(selector: string): boolean;
+export declare const validatePseudos: Rule.RuleModule;

package/dist/rules/validate-pseudos.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePseudos = void 0;
+exports.splitChainedPseudos = splitChainedPseudos;
+exports.isValidPseudo = isValidPseudo;
+const utils_1 = require("@typescript-eslint/utils");
+const VALID_STATIC_PSEUDOS = new Set([
+    ':hover',
+    ':active',
+    ':focus',
+    ':focus-visible',
+    ':focus-within',
+    ':checked',
+    ':disabled',
+    ':enabled',
+    ':required',
+    ':optional',
+    ':valid',
+    ':invalid',
+    ':in-range',
+    ':out-of-range',
+    ':read-only',
+    ':read-write',
+    ':placeholder-shown',
+    ':indeterminate',
+    ':default',
+    ':autofill',
+    ':first-child',
+    ':last-child',
+    ':only-child',
+    ':first-of-type',
+    ':last-of-type',
+    ':only-of-type',
+    ':empty',
+    ':link',
+    ':visited',
+    ':any-link',
+    ':root',
+    ':target',
+    ':fullscreen',
+    ':modal',
+    ':open',
+    ':defined',
+    ':popover-open',
+    ':host',
+    '::before',
+    '::after',
+    '::first-letter',
+    '::first-line',
+    '::selection',
+    '::placeholder',
+    '::marker',
+    '::cue',
+    '::backdrop',
+    '::spelling-error',
+    '::grammar-error',
+    '::view-transition',
+    '::file-selector-button',
+    '::details-content',
+    '::target-text',
+    ':before',
+    ':after',
+    ':first-letter',
+    ':first-line',
+    ':placeholder',
+]);
+const FUNCTIONAL_PREFIXES = [
+    ':nth-child(',
+    ':nth-last-child(',
+    ':nth-of-type(',
+    ':nth-last-of-type(',
+    ':not(',
+    ':is(',
+    ':where(',
+    ':has(',
+    ':lang(',
+    ':dir(',
+    ':host(',
+    ':host-context(',
+    ':state(',
+    '::cue(',
+    '::part(',
+    '::slotted(',
+    '::view-transition-group(',
+    '::view-transition-image-pair(',
+    '::view-transition-old(',
+    '::view-transition-new(',
+    '::highlight(',
+];
+function splitChainedPseudos(selector) {
+    const parts = [];
+    let current = '';
+    let parenDepth = 0;
+    for (let i = 0; i < selector.length; i++) {
+        const char = selector[i];
+        if (char === '(') {
+            parenDepth++;
+            current += char;
+        }
+        else if (char === ')') {
+            parenDepth--;
+            current += char;
+        }
+        else if (char === ':' && parenDepth === 0) {
+            if (current.length > 0 && current !== ':' && current !== '::') {
+                parts.push(current);
+                current = ':';
+            }
+            else {
+                current += ':';
+            }
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.length > 0) {
+        parts.push(current);
+    }
+    return parts;
+}
+function isValidPseudo(selector) {
+    if (VALID_STATIC_PSEUDOS.has(selector)) {
+        return true;
+    }
+    for (const prefix of FUNCTIONAL_PREFIXES) {
+        if (selector.startsWith(prefix) && selector.endsWith(')')) {
+            const content = selector.slice(prefix.length, -1).trim();
+            if (content.length > 0) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+exports.validatePseudos = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Validate CSS pseudo-classes and pseudo-elements inside css.create.',
+        },
+        messages: {
+            invalidPseudo: 'Invalid pseudo-class or pseudo-element: "{{selector}}".',
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        const parserServices = context.sourceCode.parserServices;
+        const checker = parserServices?.program?.getTypeChecker();
+        function getSelectorString(node) {
+            if (node.type === utils_1.TSESTree.AST_NODE_TYPES.Literal &&
+                typeof node.value === 'string') {
+                return node.value;
+            }
+            if (node.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                !(node.parent?.type === utils_1.TSESTree.AST_NODE_TYPES.Property &&
+                    node.parent.computed)) {
+                return node.name;
+            }
+            if (checker && parserServices?.esTreeNodeToTSNodeMap) {
+                try {
+                    const tsNode = parserServices.esTreeNodeToTSNodeMap.get(node);
+                    const type = checker.getTypeAtLocation(tsNode);
+                    if (type.isStringLiteral()) {
+                        return type.value;
+                    }
+                }
+                catch (error) {
+                }
+            }
+            return null;
+        }
+        function checkProperties(node) {
+            for (const prop of node.properties) {
+                if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
+                    continue;
+                const selectorString = getSelectorString(prop.key);
+                if (selectorString !== null && selectorString.startsWith(':')) {
+                    const parts = splitChainedPseudos(selectorString);
+                    for (const part of parts) {
+                        if (!isValidPseudo(part)) {
+                            context.report({
+                                node: prop.key,
+                                messageId: 'invalidPseudo',
+                                data: {
+                                    selector: selectorString,
+                                },
+                            });
+                            break;
+                        }
+                    }
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkProperties(prop.value);
+                }
+            }
+        }
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value === '@plumeria/core') {
+                    node.specifiers.forEach((specifier) => {
+                        if (specifier.type ===
+                            utils_1.TSESTree.AST_NODE_TYPES.ImportNamespaceSpecifier ||
+                            specifier.type === utils_1.TSESTree.AST_NODE_TYPES.ImportDefaultSpecifier) {
+                            plumeriaAliases[specifier.local.name] = 'NAMESPACE';
+                        }
+                        else {
+                            const importedName = specifier.imported.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier
+                                ? specifier.imported.name
+                                : String(specifier.imported.value);
+                            plumeriaAliases[specifier.local.name] = importedName;
+                        }
+                    });
+                }
+            },
+            CallExpression(node) {
+                let isCssCreate = false;
+                if (node.callee.type === utils_1.TSESTree.AST_NODE_TYPES.MemberExpression) {
+                    if (node.callee.object.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                        plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
+                        const propertyName = node.callee.property.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier
+                            ? node.callee.property.name
+                            : null;
+                        if (propertyName === 'create')
+                            isCssCreate = true;
+                    }
+                }
+                else if (node.callee.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier) {
+                    const alias = plumeriaAliases[node.callee.name];
+                    if (alias === 'create')
+                        isCssCreate = true;
+                }
+                if (isCssCreate &&
+                    node.arguments[0]?.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    const styleObj = node.arguments[0];
+                    styleObj.properties.forEach((prop) => {
+                        if (prop.type === utils_1.TSESTree.AST_NODE_TYPES.Property &&
+                            prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                            checkProperties(prop.value);
+                        }
+                    });
+                }
+            },
+        };
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "16.1.1",
+  "version": "16.2.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",