@plumeria/eslint-plugin 10.1.3 → 10.2.1

package/README.md

@@ -11,6 +11,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/no-combinator`: **error**
 - `@plumeria/no-destructure`: **error**
 - `@plumeria/no-inner-call`: **error**
+- `@plumeria/no-unknown-css-properties`: **error**
 - `@plumeria/no-unused-keys`: **warn**
 - `@plumeria/sort-properties`: **warn**
 - `@plumeria/format-properties`: **warn**
@@ -35,11 +36,15 @@ Disallow combinators `>`, `+`, `~` and descendant combinator (space) unless insi
 
 ### no-destructure
 
-Disallow destructuring `css.create` and `css.props`, etc.
+Disallow destructuring APIs.
 
 ### no-inner-call
 
-Disallow calling `css.create`, etc. inside functions.
+Disallow calling APIs inside functions.
+
+### no-unknown-css-properties
+
+Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.
 
 ### no-unused-keys
 

package/dist/index.js

@@ -9,11 +9,13 @@ 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 style_name_requires_import_1 = require("./rules/style-name-requires-import");
+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-inner-call': no_inner_call_1.noInnerCall,
+    'no-unknown-css-properties': no_unknown_css_properties_1.noUnknownCssProperties,
     'no-unused-keys': no_unused_keys_1.noUnusedKeys,
     'sort-properties': sort_properties_1.sortProperties,
     'format-properties': format_properties_1.formatProperties,
@@ -27,6 +29,7 @@ const configs = {
             '@plumeria/no-combinator': 'error',
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inner-call': 'error',
+            '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/sort-properties': 'warn',
             '@plumeria/format-properties': 'warn',
@@ -46,6 +49,7 @@ const flatConfigs = {
             '@plumeria/no-combinator': 'error',
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inner-call': 'error',
+            '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/sort-properties': 'warn',
             '@plumeria/format-properties': 'warn',

package/dist/rules/no-unknown-css-properties.d.ts

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

package/dist/rules/no-unknown-css-properties.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noUnknownCssProperties = void 0;
+const known_css_properties_1 = require("known-css-properties");
+const knownProperties = new Set(known_css_properties_1.all);
+function toKebabCase(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+exports.noUnknownCssProperties = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow unknown CSS properties in camelCase within css.create, css.keyframes, and css.viewTransition',
+        },
+        messages: {
+            unknownProperty: "Unknown CSS property '{{ name }}'.",
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value === '@plumeria/core') {
+                    node.specifiers.forEach((specifier) => {
+                        if (specifier.type === 'ImportNamespaceSpecifier' ||
+                            specifier.type === 'ImportDefaultSpecifier') {
+                            plumeriaAliases[specifier.local.name] = 'NAMESPACE';
+                        }
+                        else if (specifier.type === 'ImportSpecifier' &&
+                            specifier.imported.type === 'Identifier') {
+                            plumeriaAliases[specifier.local.name] = specifier.imported.name;
+                        }
+                    });
+                }
+            },
+            CallExpression(node) {
+                let isCssProperties = false;
+                if (node.callee.type === 'MemberExpression') {
+                    if (node.callee.object.type === 'Identifier' &&
+                        plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
+                        const propertyName = node.callee.property.type === 'Identifier'
+                            ? node.callee.property.name
+                            : null;
+                        if (propertyName === 'create' ||
+                            propertyName === 'keyframes' ||
+                            propertyName === 'viewTransition') {
+                            isCssProperties = true;
+                        }
+                    }
+                }
+                else if (node.callee.type === 'Identifier') {
+                    const alias = plumeriaAliases[node.callee.name];
+                    if (alias === 'create' ||
+                        alias === 'keyframes' ||
+                        alias === 'viewTransition') {
+                        isCssProperties = true;
+                    }
+                }
+                if (isCssProperties) {
+                    node.arguments.forEach((arg) => {
+                        if (arg.type === 'ObjectExpression') {
+                            arg.properties.forEach((prop) => {
+                                if (prop.type === 'Property' &&
+                                    prop.value.type === 'ObjectExpression') {
+                                    checkStyleObject(prop.value);
+                                }
+                            });
+                        }
+                    });
+                }
+            },
+        };
+        function checkStyleObject(node) {
+            node.properties.forEach((prop) => {
+                if (prop.type === 'Property') {
+                    let keyName = '';
+                    if (prop.key.type === 'Identifier') {
+                        keyName = prop.key.name;
+                    }
+                    else if (prop.key.type === 'Literal') {
+                        keyName = String(prop.key.value);
+                    }
+                    if (keyName) {
+                        if (!keyName.startsWith(':') &&
+                            !keyName.startsWith('[') &&
+                            !keyName.startsWith('@')) {
+                            if (!keyName.startsWith('--')) {
+                                const kebabName = toKebabCase(keyName);
+                                if (!knownProperties.has(kebabName)) {
+                                    context.report({
+                                        node: prop.key,
+                                        messageId: 'unknownProperty',
+                                        data: {
+                                            name: keyName,
+                                        },
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    if (prop.value.type === 'ObjectExpression') {
+                        checkStyleObject(prop.value);
+                    }
+                }
+            });
+        }
+    },
+};

package/dist/rules/sort-properties.js

@@ -136,7 +136,7 @@ exports.sortProperties = {
                 misorderedIndices.forEach((i) => {
                     const prop = properties[i];
                     context.report({
-                        node: prop,
+                        node: 'key' in prop ? prop.key : prop,
                         messageId: 'sortProperties',
                         data: {
                             position: String(sorted.indexOf(prop) + 1),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "10.1.3",
+  "version": "10.2.1",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -35,13 +35,16 @@
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.39.0",
-    "@types/estree": "^1.0.8"
+    "@types/estree": "^1.0.8",
+    "eslint": "^9.39.0"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "known-css-properties": "^0.37.0"
+  },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",
     "cjs": "tsc --project tsconfig.cjs.json"