@plumeria/eslint-plugin 11.2.0 → 12.0.0

package/README.md

@@ -12,7 +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-invalid-selector`: **error**
 - `@plumeria/no-mixed-styling-props`: **error**
 - `@plumeria/no-unknown-css-properties`: **error**
 - `@plumeria/no-unused-keys`: **warn**
@@ -21,9 +21,9 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/validate-values`: **warn**
 
 ```js
-import { plumeria } from '@plumeria/eslint-plugin';
+import plumeria from '@plumeria/eslint-plugin';
 
-export default [plumeria.flatConfigs.recommended];
+export default [plumeria.configs.recommended];
 ```
 
 ## Rules
@@ -48,9 +48,10 @@ Disallow passing inline object to `styleName` and `css.use()`. Only compiled sty
 
 Disallow calling APIs inside functions.
 
-### no-invalid-selector-nesting
+### no-invalid-selector
 
-Disallow invalid selector nesting inside `css.create()`. (e.g. Pseudo -> Query, Query -> Query)
+Disallow invalid selector inside `css.create()` and `css.keyframes()` and `css.viewTransition()`.  
+`create()` example: (Pseudo -> Query, Query -> Query)
 
 ### no-mixed-styling-props
 

package/dist/index.d.ts

@@ -1,12 +1,8 @@
-import type { ESLint, Linter, Rule } from 'eslint';
-type PlumeriaPlugin = ESLint.Plugin & {
+import type { Linter, Rule } from 'eslint';
+declare const plugin: {
     rules: Record<string, Rule.RuleModule>;
     configs: {
-        recommended: Linter.LegacyConfig;
-    };
-    flatConfigs: {
         recommended: Linter.Config;
     };
 };
-export declare const plumeria: PlumeriaPlugin;
-export {};
+export = plugin;

package/dist/index.js

@@ -1,12 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.plumeria = void 0;
 const style_name_requires_import_1 = require("./rules/style-name-requires-import");
 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_invalid_selector_1 = require("./rules/no-invalid-selector");
 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");
@@ -19,7 +17,7 @@ const rules = {
     '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-invalid-selector': no_invalid_selector_1.noInvalidSelector,
     '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,
@@ -28,25 +26,6 @@ const rules = {
     'validate-values': validate_values_1.validateValues,
 };
 const configs = {
-    recommended: {
-        plugins: ['@plumeria'],
-        rules: {
-            '@plumeria/style-name-requires-import': 'error',
-            '@plumeria/no-combinator': 'error',
-            '@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',
-            '@plumeria/format-properties': 'warn',
-            '@plumeria/validate-values': 'warn',
-        },
-    },
-};
-const flatConfigs = {
     recommended: {
         plugins: {
             '@plumeria': {
@@ -59,7 +38,7 @@ const flatConfigs = {
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',
             '@plumeria/no-inner-call': 'error',
-            '@plumeria/no-invalid-selector-nesting': 'error',
+            '@plumeria/no-invalid-selector': 'error',
             '@plumeria/no-mixed-styling-props': 'error',
             '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
@@ -69,8 +48,8 @@ const flatConfigs = {
         },
     },
 };
-exports.plumeria = {
+const plugin = {
     rules,
     configs,
-    flatConfigs,
 };
+module.exports = plugin;

package/dist/rules/format-properties.js

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatProperties = void 0;
-function getSourceCode(context) {
-    return context.sourceCode ?? context.getSourceCode();
-}
 exports.formatProperties = {
     meta: {
         type: 'layout',
@@ -19,7 +16,7 @@ exports.formatProperties = {
     },
     create(context) {
         const plumeriaAliases = {};
-        const sourceCode = getSourceCode(context);
+        const sourceCode = context.sourceCode;
         function checkStyleObject(node) {
             if (node.type !== 'ObjectExpression' || node.properties.length === 0)
                 return;

package/dist/rules/no-combinator.js

@@ -201,7 +201,7 @@ exports.noCombinator = {
                 text.includes('\t') ||
                 text.includes('\n')) {
                 if (!isCombinatorAllowed(text)) {
-                    let found = '';
+                    let found;
                     if (text.includes('>'))
                         found = '>';
                     else if (text.includes('+'))

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

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

package/dist/rules/{no-invalid-selector-nesting.js → no-invalid-selector.js}

@@ -1,17 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.noInvalidSelectorNesting = void 0;
+exports.noInvalidSelector = void 0;
 const utils_1 = require("@typescript-eslint/utils");
-exports.noInvalidSelectorNesting = {
+exports.noInvalidSelector = {
     meta: {
         type: 'problem',
         docs: {
             description: 'Disallow invalid selector nesting (e.g. Pseudo -> Query, Query -> Query) based on Plumeria rules.',
         },
         messages: {
+            invalidKeySelector: 'Invalid key selector.',
             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.',
+            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".',
         },
         schema: [],
     },
@@ -42,25 +45,28 @@ exports.noInvalidSelectorNesting = {
                             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';
+                        return 'PROPERTY';
                     }
                 }
-                catch (e) {
+                catch (error) {
                 }
+                return 'UNKNOWN';
             }
-            return 'UNKNOWN';
+            return 'SKIP';
         }
         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 (currentType === 'SKIP')
+                    continue;
+                if (currentType === 'UNKNOWN') {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidKeySelector',
+                    });
+                }
                 if (parentType === 'PSEUDO' && currentType === 'QUERY') {
                     context.report({
                         node: prop.key,
@@ -81,6 +87,77 @@ exports.noInvalidSelectorNesting = {
                 }
             }
         }
+        function checkOnlyProperties(node) {
+            for (const prop of node.properties) {
+                if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
+                    continue;
+                const currentType = getSelectorType(prop.key);
+                if (currentType !== 'PROPERTY') {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidKeySelector',
+                    });
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkOnlyProperties(prop.value);
+                }
+            }
+        }
+        function getKeyString(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) {
+                return node.name;
+            }
+            return null;
+        }
+        function checkKeyframesKeys(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 == null) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidKeyframesKey',
+                    });
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkOnlyProperties(prop.value);
+                }
+                if (key !== null &&
+                    key !== 'from' &&
+                    key !== 'to' &&
+                    !/^\d+(\.\d+)?%$/.test(key)) {
+                    context.report({ node: prop.key, messageId: 'invalidKeyframesKey' });
+                }
+            }
+        }
+        function checkViewTransitionKeys(node) {
+            const allowed = new Set(['group', 'imagePair', 'new', 'old']);
+            for (const prop of node.properties) {
+                if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
+                    continue;
+                const key = getKeyString(prop.key);
+                if (key == null) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidViewTransitionKey',
+                    });
+                }
+                if (prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkOnlyProperties(prop.value);
+                }
+                if (key !== null && !allowed.has(key)) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidViewTransitionKey',
+                    });
+                }
+            }
+        }
         return {
             ImportDeclaration(node) {
                 if (node.source.value === '@plumeria/core') {
@@ -101,6 +178,8 @@ exports.noInvalidSelectorNesting = {
             },
             CallExpression(node) {
                 let isCssCreate = false;
+                let isCssKeyframes = false;
+                let isCssViewTransition = 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') {
@@ -109,23 +188,48 @@ exports.noInvalidSelectorNesting = {
                             : null;
                         if (propertyName === 'create')
                             isCssCreate = true;
+                        if (propertyName === 'keyframes')
+                            isCssKeyframes = true;
+                        if (propertyName === 'viewTransition')
+                            isCssViewTransition = 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 (alias === 'keyframes')
+                        isCssKeyframes = true;
+                    if (alias === 'viewTransition')
+                        isCssViewTransition = 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) {
+                            const currentType = getSelectorType(prop.key);
+                            if (currentType !== 'SKIP' && currentType === 'UNKNOWN') {
+                                context.report({
+                                    node: prop.key,
+                                    messageId: 'invalidKeySelector',
+                                });
+                            }
+                        }
                         if (prop.type === utils_1.TSESTree.AST_NODE_TYPES.Property &&
                             prop.value.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
                             checkNesting(prop.value, 'CLASS');
                         }
                     });
                 }
+                if (isCssKeyframes &&
+                    node.arguments[0]?.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkKeyframesKeys(node.arguments[0]);
+                }
+                if (isCssViewTransition &&
+                    node.arguments[0]?.type === utils_1.TSESTree.AST_NODE_TYPES.ObjectExpression) {
+                    checkViewTransitionKeys(node.arguments[0]);
+                }
             },
         };
     },

package/dist/rules/no-unused-keys.js

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.noUnusedKeys = void 0;
-function getFilename(context) {
-    return context.getFilename ? context.getFilename() : context.filename;
-}
 function getRootObject(node) {
     if (node.type === 'Identifier') {
         return node;
@@ -25,7 +22,7 @@ exports.noUnusedKeys = {
         schema: [],
     },
     create(context) {
-        const filename = getFilename(context);
+        const filename = context.filename;
         if (filename.endsWith('.ts')) {
             return {};
         }

package/dist/rules/sort-properties.js

@@ -2,9 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortProperties = void 0;
 const propertyGroups_1 = require("../util/propertyGroups");
-function getSourceCode(context) {
-    return context.getSourceCode ? context.getSourceCode() : context.sourceCode;
-}
 function getPropertyName(property) {
     if (property.key.type === 'Identifier') {
         return property.key.name;
@@ -88,7 +85,7 @@ exports.sortProperties = {
     create(context) {
         const plumeriaAliases = {};
         function checkStyleObject(node) {
-            const sourceCode = getSourceCode(context);
+            const sourceCode = context.sourceCode;
             const properties = node.properties.filter((prop) => ('key' in prop && !!prop.key) || prop.type === 'SpreadElement');
             const chunks = [];
             let currentChunk = [];

package/oxlint-plugin.js

@@ -1,4 +1,4 @@
-const { plumeria } = require('./dist/index.js');
+const plumeria = require('./dist/index.js');
 
 module.exports = {
   meta: { name: '@plumeria' },

package/oxlint.json

@@ -1,12 +1,22 @@
 {
-  "jsPlugins": ["./oxlint-plugin.js"],
+  "jsPlugins": [
+    {
+      "name": "@plumeria",
+      "specifier": "@plumeria/eslint-plugin/oxlint-plugin"
+    }
+  ],
   "plugins": [],
   "ignorePatterns": ["**/*.svelte", "**/*.vue"],
 
   "rules": {
+    "@plumeria/style-name-requires-import": "error",
     "@plumeria/no-combinator": "error",
     "@plumeria/no-destructure": "error",
+    "@plumeria/no-inline-object": "error",
     "@plumeria/no-inner-call": "error",
+    "@plumeria/no-invalid-selector": "error",
+    "@plumeria/no-mixed-styling-props": "error",
+    "@plumeria/no-unknown-css-properties": "error",
     "@plumeria/no-unused-keys": "warn",
     "@plumeria/sort-properties": "warn",
     "@plumeria/format-properties": "warn",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -25,6 +25,13 @@
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./oxlint-plugin": "./oxlint-plugin.js"
+  },
   "files": [
     "dist/",
     "oxlint-plugin.js",
@@ -35,16 +42,16 @@
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",
-    "@types/estree": "^1.0.8",
-    "@typescript-eslint/parser": "^8.59.2",
-    "eslint": "^9.39.0"
+    "@types/estree": "^1.0.9",
+    "@typescript-eslint/parser": "^8.59.3",
+    "eslint": "^10.4.0"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@typescript-eslint/utils": "^8.59.2",
+    "@typescript-eslint/utils": "^8.59.3",
     "known-css-properties": "^0.37.0"
   },
   "scripts": {

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

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