@plumeria/eslint-plugin 18.5.3 → 19.0.0

package/README.md

@@ -21,6 +21,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/format-properties`: **warn**
 - `@plumeria/validate-values`: **warn**
 - `@plumeria/validate-pseudos`: **error**
+- `@plumeria/validate-at-rules`: **error**
 
 ```js
 import plumeria from '@plumeria/eslint-plugin';
@@ -148,6 +149,10 @@ Validates CSS property values for correctness. Only standard CSS properties are
 
 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.
 
+### validate-at-rules
+
+Validates at-rules inside `css.create()`. It accepts `@media`, `@container`, `@supports`, `@layer`, and `@scope`, and supports validation of computed keys when TypeScript is available.
+
 ## Optional rules
 
 These rules are not enabled by `plumeria.configs.recommended`. Enable only the

package/dist/index.js

@@ -16,6 +16,7 @@ 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 validate_at_rules_1 = require("./rules/validate-at-rules");
 const rules = {
     'props-require-import': props_require_import_1.propsRequireImport,
     'expand-border-shorthands': expand_border_shorthands_1.expandBorderShorthands,
@@ -34,6 +35,7 @@ const rules = {
     'format-properties': format_properties_1.formatProperties,
     'validate-values': validate_values_1.validateValues,
     'validate-pseudos': validate_pseudos_1.validatePseudos,
+    'validate-at-rules': validate_at_rules_1.validateAtRules,
 };
 const configs = {
     recommended: {
@@ -57,6 +59,7 @@ const configs = {
             '@plumeria/format-properties': 'warn',
             '@plumeria/validate-values': 'warn',
             '@plumeria/validate-pseudos': 'error',
+            '@plumeria/validate-at-rules': 'error',
         },
     },
 };

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

@@ -0,0 +1,3 @@
+import { Rule } from 'eslint';
+export declare function isValidAtRule(rule: string): boolean;
+export declare const validateAtRules: Rule.RuleModule;

package/dist/rules/validate-at-rules.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateAtRules = void 0;
+exports.isValidAtRule = isValidAtRule;
+const utils_1 = require("@typescript-eslint/utils");
+const styleObject_1 = require("../util/styleObject");
+const VALID_AT_RULES = [
+    '@media ',
+    '@container ',
+    '@supports ',
+    '@layer ',
+    '@scope ',
+];
+function isValidAtRule(rule) {
+    return VALID_AT_RULES.some((prefix) => rule.startsWith(prefix) && rule.length > prefix.length);
+}
+exports.validateAtRules = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Validate at-rules inside css.create.',
+        },
+        messages: {
+            invalidAtRule: 'Invalid at-rule: "{{ rule }}".',
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        const parserServices = context.sourceCode.parserServices;
+        const checker = parserServices?.program?.getTypeChecker();
+        function getKeyString(node) {
+            if (node.type === utils_1.TSESTree.AST_NODE_TYPES.Literal &&
+                typeof node.value === 'string') {
+                return node.value;
+            }
+            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 key = getKeyString(prop.key);
+                if (key?.startsWith('@') && !isValidAtRule(key)) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidAtRule',
+                        data: { rule: key },
+                    });
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkProperties(prop.value);
+                }
+            }
+        }
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value !== '@plumeria/core')
+                    return;
+                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 &&
+                    node.callee.object.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                    plumeriaAliases[node.callee.object.name] === 'NAMESPACE' &&
+                    node.callee.property.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                    node.callee.property.name === 'create') {
+                    isCssCreate = true;
+                }
+                else if (node.callee.type === utils_1.TSESTree.AST_NODE_TYPES.Identifier &&
+                    plumeriaAliases[node.callee.name] === 'create') {
+                    isCssCreate = true;
+                }
+                if (!isCssCreate ||
+                    node.arguments[0]?.type !== utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    return;
+                }
+                for (const prop of node.arguments[0].properties) {
+                    if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
+                        continue;
+                    const style = (0, styleObject_1.styleObjectFromValue)(prop.value);
+                    if (style)
+                        checkProperties(style);
+                }
+            },
+        };
+    },
+};

package/oxlint.json

@@ -22,6 +22,7 @@
     "@plumeria/sort-properties": "warn",
     "@plumeria/format-properties": "warn",
     "@plumeria/validate-values": "warn",
-    "@plumeria/validate-pseudos": "error"
+    "@plumeria/validate-pseudos": "error",
+    "@plumeria/validate-at-rules": "error"
   }
 }

package/package.json

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