@plumeria/eslint-plugin 11.0.1 → 11.1.0

package/README.md

@@ -12,6 +12,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/no-destructure`: **error**
 - `@plumeria/no-inline-object`: **error**
 - `@plumeria/no-inner-call`: **error**
+- `@plumeria/no-invalid-selector-nesting`: **error**
 - `@plumeria/no-unknown-css-properties`: **error**
 - `@plumeria/no-unused-keys`: **warn**
 - `@plumeria/sort-properties`: **warn**
@@ -46,6 +47,14 @@ Disallow passing inline object to `styleName` and `css.use()`. Only compiled sty
 
 Disallow calling APIs inside functions.
 
+### no-invalid-selector-nesting
+
+Disallow invalid selector nesting inside `css.create()`. (e.g. Pseudo -> Query, Query -> Query)
+
+### no-mixed-styling-props
+
+Disallow mixing `styleName` with `className` or `style`. `styleName` can handle both `className` and `style`.
+
 ### no-unknown-css-properties
 
 Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.

package/dist/index.js

@@ -6,17 +6,21 @@ const no_combinator_1 = require("./rules/no-combinator");
 const no_destructure_1 = require("./rules/no-destructure");
 const no_inline_object_1 = require("./rules/no-inline-object");
 const no_inner_call_1 = require("./rules/no-inner-call");
+const no_invalid_selector_nesting_1 = require("./rules/no-invalid-selector-nesting");
+const no_mixed_styling_props_1 = require("./rules/no-mixed-styling-props");
+const no_unknown_css_properties_1 = require("./rules/no-unknown-css-properties");
 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 no_unknown_css_properties_1 = require("./rules/no-unknown-css-properties");
 const rules = {
     'style-name-requires-import': style_name_requires_import_1.styleNameRequiresImport,
     'no-combinator': no_combinator_1.noCombinator,
     'no-destructure': no_destructure_1.noDestructure,
     'no-inline-object': no_inline_object_1.noInlineObject,
     'no-inner-call': no_inner_call_1.noInnerCall,
+    'no-invalid-selector-nesting': no_invalid_selector_nesting_1.noInvalidSelectorNesting,
+    'no-mixed-styling-props': no_mixed_styling_props_1.noMixedStylingProps,
     'no-unknown-css-properties': no_unknown_css_properties_1.noUnknownCssProperties,
     'no-unused-keys': no_unused_keys_1.noUnusedKeys,
     'sort-properties': sort_properties_1.sortProperties,
@@ -32,6 +36,8 @@ const configs = {
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',
             '@plumeria/no-inner-call': 'error',
+            '@plumeria/no-invalid-selector-nesting': 'error',
+            '@plumeria/no-mixed-styling-props': 'error',
             '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/sort-properties': 'warn',
@@ -53,6 +59,8 @@ const flatConfigs = {
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',
             '@plumeria/no-inner-call': 'error',
+            '@plumeria/no-invalid-selector-nesting': 'error',
+            '@plumeria/no-mixed-styling-props': 'error',
             '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/sort-properties': 'warn',

package/dist/rules/no-invalid-selector-nesting.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from 'eslint';
+export declare const noInvalidSelectorNesting: Rule.RuleModule;

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

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noInvalidSelectorNesting = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+exports.noInvalidSelectorNesting = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow invalid selector nesting (e.g. Pseudo -> Query, Query -> Query) based on Plumeria rules.',
+        },
+        messages: {
+            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.',
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        const parserServices = context.sourceCode.parserServices;
+        const checker = parserServices?.program?.getTypeChecker();
+        function getSelectorType(node) {
+            if (node.type === utils_1.TSESTree.AST_NODE_TYPES.Literal &&
+                typeof node.value === 'string') {
+                if (node.value.startsWith('@'))
+                    return 'QUERY';
+                if (node.value.startsWith(':'))
+                    return 'PSEUDO';
+                return 'PROPERTY';
+            }
+            if (node.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                !(node.parent?.type === utils_1.TSESTree.AST_NODE_TYPES.Property &&
+                    node.parent.computed)) {
+                return 'PROPERTY';
+            }
+            if (checker && parserServices?.esTreeNodeToTSNodeMap) {
+                try {
+                    const tsNode = parserServices.esTreeNodeToTSNodeMap.get(node);
+                    const type = checker.getTypeAtLocation(tsNode);
+                    if (type.isStringLiteral()) {
+                        if (type.value.startsWith('@'))
+                            return 'QUERY';
+                        if (type.value.startsWith(':'))
+                            return 'PSEUDO';
+                    }
+                    if (type.isUnion()) {
+                        const types = type.types;
+                        if (types.every((t) => t.isStringLiteral() && t.value.startsWith('@')))
+                            return 'QUERY';
+                        if (types.every((t) => t.isStringLiteral() && t.value.startsWith(':')))
+                            return 'PSEUDO';
+                    }
+                }
+                catch (e) {
+                }
+            }
+            return 'UNKNOWN';
+        }
+        function checkNesting(node, parentType) {
+            for (const prop of node.properties) {
+                if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
+                    continue;
+                const currentType = getSelectorType(prop.key);
+                if (parentType === 'PSEUDO' && currentType === 'QUERY') {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'noQueryInsidePseudo',
+                    });
+                }
+                else if (parentType === 'QUERY' && currentType === 'QUERY') {
+                    context.report({ node: prop.key, messageId: 'noQueryInsideQuery' });
+                }
+                else if (parentType === 'PSEUDO' && currentType === 'PSEUDO') {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'noPseudoInsidePseudo',
+                    });
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkNesting(prop.value, currentType === 'PROPERTY' ? parentType : currentType);
+                }
+            }
+        }
+        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) {
+                            checkNesting(prop.value, 'CLASS');
+                        }
+                    });
+                }
+            },
+        };
+    },
+};

package/dist/rules/no-mixed-styling-props.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from 'eslint';
+export declare const noMixedStylingProps: Rule.RuleModule;

package/dist/rules/no-mixed-styling-props.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noMixedStylingProps = void 0;
+exports.noMixedStylingProps = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow className and style props when styleName is present',
+        },
+        messages: {
+            noMixedStylingProps: '"styleName" handles both "className" and "style". Avoid mixing them.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                const attributes = node.attributes;
+                const hasStyleName = attributes.some((attr) => attr.type === 'JSXAttribute' &&
+                    attr.name.type === 'JSXIdentifier' &&
+                    attr.name.name === 'styleName');
+                if (hasStyleName) {
+                    for (const attr of attributes) {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name.type === 'JSXIdentifier' &&
+                            (attr.name.name === 'className' || attr.name.name === 'style')) {
+                            context.report({
+                                node: attr,
+                                messageId: 'noMixedStylingProps',
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/eslint": "^9.6.1",
     "@types/estree": "^1.0.8",
+    "@typescript-eslint/parser": "^8.59.2",
     "eslint": "^9.39.0"
   },
   "publishConfig": {
@@ -43,6 +44,7 @@
     "provenance": true
   },
   "dependencies": {
+    "@typescript-eslint/utils": "^8.59.2",
     "known-css-properties": "^0.37.0"
   },
   "scripts": {