@plumeria/eslint-plugin 19.2.15 → 19.3.0

package/README.md

@@ -7,7 +7,7 @@ Below are the available rules and the recommended configuration.
 
 The `plugin:@plumeria/recommended` config enables the following:
 
-- `@plumeria/props-require-import`: **error**
+- `@plumeria/custom-props-require-import`: **error**
 - `@plumeria/no-combinator`: **error**
 - `@plumeria/no-destructure`: **error**
 - `@plumeria/no-inline-object`: **error**
@@ -31,7 +31,7 @@ export default [plumeria.configs.recommended];
 
 ## Configuring the styling prop
 
-Both `props-require-import` and `no-mixed-styling-props` need to know which JSX
+Both `custom-props-require-import` and `no-mixed-styling-props` need to know which JSX
 prop carries styles. It is `classStyle` unless you changed it, so most projects
 configure nothing.
 
@@ -70,9 +70,13 @@ the lint rules report against a prop the compiler never transforms.
 The following rules are enabled by `plumeria.configs.recommended` with the
 severity shown in [Recommended configuration](#recommended-configuration).
 
-### props-require-import
+### custom-props-require-import
 
-Disallow the styling prop in files without a `@plumeria/core` import.
+Require the `@plumeria/core` import in a file that passes a `css.create` style to a
+component through a prop other than the styling prop. The compiler cannot tell that
+such a prop carries a style, so it compiles the file only when the file imports
+`@plumeria/core`. A file that writes the styling prop itself is compiled without
+the import.
 
 Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 

package/dist/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const props_require_import_1 = require("./rules/props-require-import");
+const custom_props_require_import_1 = require("./rules/custom-props-require-import");
 const expand_border_shorthands_1 = require("./rules/expand-border-shorthands");
 const no_combinator_1 = require("./rules/no-combinator");
 const no_destructure_1 = require("./rules/no-destructure");
@@ -18,7 +18,7 @@ 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,
+    'custom-props-require-import': custom_props_require_import_1.customPropsRequireImport,
     'expand-border-shorthands': expand_border_shorthands_1.expandBorderShorthands,
     'no-combinator': no_combinator_1.noCombinator,
     'no-destructure': no_destructure_1.noDestructure,
@@ -45,7 +45,7 @@ const configs = {
             },
         },
         rules: {
-            '@plumeria/props-require-import': 'error',
+            '@plumeria/custom-props-require-import': 'error',
             '@plumeria/no-combinator': 'error',
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',

package/dist/rules/custom-props-require-import.d.ts

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

package/dist/rules/custom-props-require-import.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customPropsRequireImport = void 0;
+const utils_1 = require("@plumeria/utils");
+const style_prop_1 = require("../util/style-prop");
+const CORE = '@plumeria/core';
+const styleRoots = (node, roots) => {
+    const expression = node;
+    if (!expression)
+        return roots;
+    switch (expression.type) {
+        case 'Identifier':
+            roots.push({ name: expression.name, member: null });
+            break;
+        case 'MemberExpression': {
+            let object = expression;
+            let member = null;
+            while (object.type === 'MemberExpression') {
+                member =
+                    !object.computed && object.property.type === 'Identifier'
+                        ? object.property.name
+                        : null;
+                object = object.object;
+            }
+            if (object.type === 'Identifier')
+                roots.push({ name: object.name, member });
+            break;
+        }
+        case 'ArrayExpression':
+            expression.elements.forEach((element) => styleRoots(element, roots));
+            break;
+        case 'ConditionalExpression':
+            styleRoots(expression.consequent, roots);
+            styleRoots(expression.alternate, roots);
+            break;
+        case 'LogicalExpression':
+            styleRoots(expression.left, roots);
+            styleRoots(expression.right, roots);
+            break;
+        case 'ChainExpression':
+        case 'TSAsExpression':
+        case 'TSNonNullExpression':
+        case 'TSSatisfiesExpression':
+            styleRoots(expression.expression, roots);
+            break;
+    }
+    return roots;
+};
+const SCAN_REUSE_MS = 1000;
+const MAX_ALIAS_DEPTH = 4;
+let recentScan;
+const scanTables = (cwd, styleProp) => {
+    const key = `${cwd}\0${styleProp}`;
+    const now = Date.now();
+    if (!recentScan ||
+        recentScan.key !== key ||
+        now - recentScan.at > SCAN_REUSE_MS) {
+        recentScan = { key, at: now, tables: (0, utils_1.scanAll)(cwd, styleProp) };
+    }
+    return recentScan.tables;
+};
+exports.customPropsRequireImport = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Require the @plumeria/core import in files that pass a style through a prop other than the styling prop',
+        },
+        fixable: 'code',
+        messages: {
+            requiresImport: '{{prop}} passes a style from "{{source}}", so this file must import "@plumeria/core".',
+        },
+        schema: style_prop_1.stylePropSchema,
+    },
+    create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
+        const filename = context.filename;
+        const imports = new Map();
+        const candidates = [];
+        let hasPlumeriaImport = false;
+        const findVariable = (scope, name) => {
+            for (let current = scope; current; current = current.upper) {
+                const variable = current.set.get(name);
+                if (variable)
+                    return variable;
+            }
+            return undefined;
+        };
+        const importedRoots = (roots, scope, depth) => roots.flatMap((root) => {
+            const definition = findVariable(scope, root.name)?.defs[0];
+            if (!definition)
+                return [];
+            if (definition.type === 'ImportBinding')
+                return [root];
+            const declarator = definition.node;
+            if (definition.type === 'Variable' &&
+                definition.parent?.kind === 'const' &&
+                declarator.init &&
+                depth < MAX_ALIAS_DEPTH) {
+                return importedRoots(styleRoots(declarator.init, []), context.sourceCode.getScope(definition.node), depth + 1);
+            }
+            return [];
+        });
+        const isStyle = (root) => {
+            const binding = imports.get(root.name);
+            const exportName = binding.importedName ?? root.member;
+            if (!exportName)
+                return null;
+            const actualPath = (0, utils_1.resolveImportPath)(binding.source, filename);
+            if (!actualPath)
+                return null;
+            const tables = scanTables(context.cwd, styleProp);
+            const resolved = (0, utils_1.resolveExport)(actualPath, exportName);
+            if (!resolved)
+                return null;
+            const key = `${resolved.filePath}-${resolved.localName}`;
+            return tables.createHashTable[key] !== undefined ? binding.source : null;
+        };
+        return {
+            ImportDeclaration(node) {
+                const source = node.source.value;
+                if (source.startsWith(CORE)) {
+                    hasPlumeriaImport = true;
+                    return;
+                }
+                for (const specifier of node.specifiers) {
+                    if (specifier.type === 'ImportNamespaceSpecifier') {
+                        imports.set(specifier.local.name, { source, importedName: null });
+                    }
+                    else if (specifier.type === 'ImportDefaultSpecifier') {
+                        imports.set(specifier.local.name, {
+                            source,
+                            importedName: 'default',
+                        });
+                    }
+                    else {
+                        const imported = specifier.imported;
+                        imports.set(specifier.local.name, {
+                            source,
+                            importedName: imported.name ?? String(imported.value),
+                        });
+                    }
+                }
+            },
+            JSXAttribute(node) {
+                if (node.name.type !== 'JSXIdentifier')
+                    return;
+                const prop = node.name.name;
+                if (prop === styleProp)
+                    return;
+                if (node.value?.type !== 'JSXExpressionContainer')
+                    return;
+                const roots = styleRoots(node.value.expression, []);
+                if (roots.length > 0)
+                    candidates.push({
+                        node,
+                        prop,
+                        roots,
+                        scope: context.sourceCode.getScope(node),
+                    });
+            },
+            'Program:exit'() {
+                if (hasPlumeriaImport || candidates.length === 0)
+                    return;
+                let fixed = false;
+                for (const { node, prop, roots, scope } of candidates) {
+                    const source = importedRoots(roots, scope, 0)
+                        .map(isStyle)
+                        .find((found) => found !== null);
+                    if (!source)
+                        continue;
+                    const first = !fixed;
+                    fixed = true;
+                    context.report({
+                        node,
+                        messageId: 'requiresImport',
+                        data: { prop, source },
+                        fix: first
+                            ? (fixer) => fixer.insertTextBefore(context.sourceCode.ast, 'import "@plumeria/core";\n')
+                            : null,
+                    });
+                }
+            },
+        };
+    },
+};

package/dist/rules/sort-properties.js

@@ -144,7 +144,7 @@ exports.sortProperties = {
                     node: prop.key,
                     messageId: 'sortProperties',
                     data: {
-                        position: String(propertyToIndexInSorted.get(prop) + 1),
+                        position: propertyToIndexInSorted.get(prop) + 1,
                         property: getPropertyName(prop),
                     },
                     fix(fixer) {

package/oxlint.json

@@ -9,7 +9,7 @@
   "ignorePatterns": ["**/*.svelte", "**/*.vue"],
 
   "rules": {
-    "@plumeria/props-require-import": "error",
+    "@plumeria/custom-props-require-import": "error",
     "@plumeria/no-combinator": "error",
     "@plumeria/no-destructure": "error",
     "@plumeria/no-inline-object": "error",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.2.15",
+  "version": "19.3.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -54,7 +54,8 @@
   "dependencies": {
     "@typescript-eslint/utils": "^8.60.0",
     "known-css-properties": "^0.37.0",
-    "zss-engine": "2.8.0"
+    "zss-engine": "2.8.0",
+    "@plumeria/utils": "19.3.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",

package/dist/rules/props-require-import.d.ts

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

package/dist/rules/props-require-import.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.propsRequireImport = void 0;
-const style_prop_1 = require("../util/style-prop");
-exports.propsRequireImport = {
-    meta: {
-        type: 'problem',
-        docs: {
-            description: 'Disallow the styling prop in files without a @plumeria/core import',
-        },
-        fixable: 'code',
-        messages: {
-            requiresImport: '{{prop}} requires importing "@plumeria/core".',
-        },
-        schema: style_prop_1.stylePropSchema,
-    },
-    create(context) {
-        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
-        let hasPlumeriaImport = false;
-        const stylePropNodes = [];
-        return {
-            ImportDeclaration(node) {
-                const source = node.source.value;
-                if (typeof source === 'string' && source.startsWith('@plumeria/core')) {
-                    hasPlumeriaImport = true;
-                }
-            },
-            JSXAttribute(node) {
-                if (node.name && node.name.name === styleProp) {
-                    stylePropNodes.push(node);
-                }
-            },
-            'Program:exit'() {
-                if (!hasPlumeriaImport) {
-                    stylePropNodes.forEach((node, index) => {
-                        context.report({
-                            node,
-                            messageId: 'requiresImport',
-                            data: { prop: styleProp },
-                            fix(fixer) {
-                                if (index === 0) {
-                                    return fixer.insertTextBefore(context.sourceCode.ast, 'import "@plumeria/core";\n');
-                                }
-                                return null;
-                            },
-                        });
-                    });
-                }
-            },
-        };
-    },
-};