@plumeria/eslint-plugin 11.2.0 → 11.2.1

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**
@@ -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.js

@@ -6,7 +6,7 @@ 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 +19,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,
@@ -36,7 +36,7 @@ const configs = {
             '@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',
@@ -59,7 +59,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',

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: [],
     },
@@ -43,15 +46,8 @@ exports.noInvalidSelectorNesting = {
                         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) {
+                catch (error) {
                 }
             }
             return 'UNKNOWN';
@@ -61,6 +57,12 @@ exports.noInvalidSelectorNesting = {
                 if (prop.type !== utils_1.TSESTree.AST_NODE_TYPES.Property)
                     continue;
                 const currentType = getSelectorType(prop.key);
+                if (currentType === 'UNKNOWN') {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'invalidKeySelector',
+                    });
+                }
                 if (parentType === 'PSEUDO' && currentType === 'QUERY') {
                     context.report({
                         node: prop.key,
@@ -81,6 +83,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 +174,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 +184,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 === '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/package.json

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

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

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