@plumeria/eslint-plugin 19.6.1 → 19.6.2

package/README.md

@@ -15,6 +15,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/no-invalid-selector`: **error**
 - `@plumeria/no-mixed-styling-props`: **error**
 - `@plumeria/no-order-dependent-overlap`: **warn**
+- `@plumeria/no-style-prop-relay`: **error**
 - `@plumeria/no-unknown-css-properties`: **error**
 - `@plumeria/no-unresolved-composition`: **warn**
 - `@plumeria/no-unused-keys`: **warn**
@@ -127,13 +128,21 @@ properties in a vertical one, which is per element and cannot be read from the
 source. The rule reads them as one property; disable the line where an element
 is known to be vertical.
 
+### no-style-prop-relay
+
+Reports a style prop that a component receives but only passes on. Apply it to the styling prop or `css.use()` on an element the component renders.
+
+Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
+
 ### no-unknown-css-properties
 
 Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.
 
 ### no-unresolved-composition
 
-A safety net for `css.use()`. Warns when its result is combined with other class names or passed to another function; pass every style to one `css.use()` call instead.
+A safety net for `css.use()`. Warns when its result is combined with other class names or passed to another function, or when a function key is passed to it. Pass every style to one `css.use()` call, and apply function keys to the styling prop.
+
+Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 
 ### no-unused-keys
 

package/dist/index.js

@@ -9,6 +9,7 @@ const no_invalid_selector_1 = require("./rules/no-invalid-selector");
 const no_logical_properties_1 = require("./rules/no-logical-properties");
 const no_mixed_styling_props_1 = require("./rules/no-mixed-styling-props");
 const no_physical_properties_1 = require("./rules/no-physical-properties");
+const no_style_prop_relay_1 = require("./rules/no-style-prop-relay");
 const no_order_dependent_overlap_1 = require("./rules/no-order-dependent-overlap");
 const no_unknown_css_properties_1 = require("./rules/no-unknown-css-properties");
 const no_unresolved_composition_1 = require("./rules/no-unresolved-composition");
@@ -30,6 +31,7 @@ const rules = {
     'no-mixed-styling-props': no_mixed_styling_props_1.noMixedStylingProps,
     'no-physical-properties': no_physical_properties_1.noPhysicalProperties,
     'no-order-dependent-overlap': no_order_dependent_overlap_1.noOrderDependentOverlap,
+    'no-style-prop-relay': no_style_prop_relay_1.noStylePropRelay,
     'no-unknown-css-properties': no_unknown_css_properties_1.noUnknownCssProperties,
     'no-unused-keys': no_unused_keys_1.noUnusedKeys,
     'no-unresolved-composition': no_unresolved_composition_1.noUnresolvedComposition,
@@ -55,6 +57,7 @@ const configs = {
             '@plumeria/no-invalid-selector': 'error',
             '@plumeria/no-mixed-styling-props': 'error',
             '@plumeria/no-order-dependent-overlap': 'warn',
+            '@plumeria/no-style-prop-relay': 'error',
             '@plumeria/no-unknown-css-properties': 'error',
             '@plumeria/no-unused-keys': 'warn',
             '@plumeria/no-unresolved-composition': 'warn',

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.customPropsRequireImport = void 0;
 const compiler_1 = require("@plumeria/compiler");
 const style_prop_1 = require("../util/style-prop");
+const scan_1 = require("../util/scan");
 const CORE = '@plumeria/core';
 const styleRoots = (node, roots) => {
     const expression = node;
@@ -46,19 +47,7 @@ const styleRoots = (node, roots) => {
     }
     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, compiler_1.scanAll)(cwd, styleProp) };
-    }
-    return recentScan.tables;
-};
 exports.customPropsRequireImport = {
     meta: {
         type: 'problem',
@@ -108,7 +97,7 @@ exports.customPropsRequireImport = {
             const actualPath = (0, compiler_1.resolveImportPath)(binding.source, filename);
             if (!actualPath)
                 return null;
-            const tables = scanTables(context.cwd, styleProp);
+            const tables = (0, scan_1.scanTables)(context.cwd, styleProp);
             const resolved = (0, compiler_1.resolveExport)(actualPath, exportName);
             if (!resolved)
                 return null;

package/dist/rules/no-style-prop-relay.d.ts

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

package/dist/rules/no-style-prop-relay.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noStylePropRelay = void 0;
+const style_prop_1 = require("../util/style-prop");
+const scan_1 = require("../util/scan");
+const isFunction = (node) => node?.type === 'FunctionDeclaration' ||
+    node?.type === 'FunctionExpression' ||
+    node?.type === 'ArrowFunctionExpression';
+const componentFunctionOf = (node) => {
+    if (!node)
+        return undefined;
+    if (isFunction(node))
+        return node;
+    if (node.type === 'CallExpression') {
+        for (const argument of node.arguments) {
+            const fn = componentFunctionOf(argument);
+            if (fn)
+                return fn;
+        }
+    }
+    return undefined;
+};
+const unwrapDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const keyName = (key) => key.type === 'Identifier'
+    ? key.name
+    : key.type === 'Literal' && typeof key.value === 'string'
+        ? key.value
+        : null;
+exports.noStylePropRelay = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow passing a received style prop on without applying it',
+        },
+        schema: style_prop_1.stylePropSchema,
+        messages: {
+            relay: "'{{prop}}' is never applied here. Apply it to {{styleProp}} or css.use() on an element this component renders.",
+        },
+    },
+    create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
+        function components(program) {
+            if (program.type !== 'Program')
+                return [];
+            const found = [];
+            for (const node of program.body) {
+                const statement = node.type === 'ExportNamedDeclaration' ||
+                    node.type === 'ExportDefaultDeclaration'
+                    ? node.declaration
+                    : node;
+                if (!statement)
+                    continue;
+                if (isFunction(statement)) {
+                    const id = statement.id;
+                    found.push({
+                        name: id?.name ?? 'default',
+                        fn: statement,
+                    });
+                }
+                else if (statement.type === 'CallExpression') {
+                    const fn = componentFunctionOf(statement);
+                    if (fn)
+                        found.push({ name: 'default', fn });
+                }
+                else if (statement.type === 'VariableDeclaration') {
+                    for (const declarator of statement.declarations) {
+                        if (declarator.id.type !== 'Identifier')
+                            continue;
+                        const fn = componentFunctionOf(declarator.init);
+                        if (fn)
+                            found.push({ name: declarator.id.name, fn });
+                    }
+                }
+            }
+            return found;
+        }
+        function isUse(node) {
+            if (node.type !== 'CallExpression')
+                return false;
+            const callee = node.callee;
+            return ((callee.type === 'MemberExpression' &&
+                !callee.computed &&
+                callee.property.type === 'Identifier' &&
+                callee.property.name === 'use') ||
+                (callee.type === 'Identifier' && callee.name === 'use'));
+        }
+        function roots(node, into) {
+            if (!node)
+                return into;
+            switch (node.type) {
+                case 'Identifier':
+                case 'MemberExpression':
+                    into.push(node);
+                    break;
+                case 'ArrayExpression':
+                    node.elements.forEach((element) => roots(element, into));
+                    break;
+                case 'SpreadElement':
+                    roots(node.argument, into);
+                    break;
+                case 'ConditionalExpression':
+                    roots(node.consequent, into);
+                    roots(node.alternate, into);
+                    break;
+                case 'LogicalExpression':
+                    roots(node.left, into);
+                    roots(node.right, into);
+                    break;
+                default: {
+                    const inner = node.expression;
+                    if (inner &&
+                        [
+                            'ChainExpression',
+                            'TSAsExpression',
+                            'TSNonNullExpression',
+                            'TSSatisfiesExpression',
+                        ].includes(node.type))
+                        roots(inner, into);
+                }
+            }
+            return into;
+        }
+        function applied(fn) {
+            const found = [];
+            const visit = (node) => {
+                if (!node || typeof node !== 'object')
+                    return;
+                if (Array.isArray(node)) {
+                    node.forEach(visit);
+                    return;
+                }
+                const current = node;
+                if (typeof current.type !== 'string')
+                    return;
+                if (current.type === 'JSXAttribute' &&
+                    current.name?.name === styleProp &&
+                    current.value?.type === 'JSXExpressionContainer') {
+                    roots(current.value.expression, found);
+                }
+                if (isUse(current) && current.type === 'CallExpression') {
+                    current.arguments.forEach((argument) => roots(argument, found));
+                }
+                for (const key of Object.keys(current)) {
+                    if (key === 'parent')
+                        continue;
+                    visit(current[key]);
+                }
+            };
+            visit(fn.body);
+            return found;
+        }
+        return {
+            Program(program) {
+                const tables = (0, scan_1.scanTables)(context.cwd, styleProp);
+                const table = tables.componentPropsTable ?? {};
+                for (const { name, fn } of components(program)) {
+                    const props = table[`${context.filename}-${name}`];
+                    if (!props)
+                        continue;
+                    const param = unwrapDefault(fn.params[0]);
+                    const locals = new Map();
+                    const patterns = new Map();
+                    const paramName = param?.type === 'Identifier' ? param.name : null;
+                    if (param?.type === 'ObjectPattern') {
+                        for (const property of param.properties) {
+                            if (property.type !== 'Property')
+                                continue;
+                            const prop = keyName(property.key);
+                            const local = unwrapDefault(property.value);
+                            if (prop === null)
+                                continue;
+                            patterns.set(prop, property);
+                            if (local?.type === 'Identifier')
+                                locals.set(local.name, prop);
+                        }
+                    }
+                    const done = new Set();
+                    for (const root of applied(fn)) {
+                        if (root.type === 'Identifier') {
+                            done.add(locals.get(root.name) ?? root.name);
+                        }
+                        else if (root.type === 'MemberExpression' &&
+                            root.object.type === 'Identifier' &&
+                            root.object.name === paramName &&
+                            !root.computed &&
+                            root.property.type === 'Identifier') {
+                            done.add(root.property.name);
+                        }
+                    }
+                    for (const prop of Object.keys(props)) {
+                        if (done.has(prop))
+                            continue;
+                        context.report({
+                            node: patterns.get(prop) ?? fn,
+                            messageId: 'relay',
+                            data: { prop, styleProp },
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

package/dist/rules/no-unresolved-composition.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.noUnresolvedComposition = void 0;
+const style_prop_1 = require("../util/style-prop");
 const memberName = (node) => !node.computed && node.property.type === 'Identifier'
     ? node.property.name
     : node.computed && node.property.type === 'Literal'
@@ -12,14 +13,16 @@ exports.noUnresolvedComposition = {
         docs: {
             description: 'Warn when class names are composed outside css.use()',
         },
-        schema: [],
+        schema: style_prop_1.stylePropSchema,
         messages: {
             merge: 'Separate css.use() results cannot resolve conflicts with each other. Merge them into one css.use(a, b) call, passing conditional styles as css.use(a, active && b).',
             wrapped: 'css.use() results cannot be passed to functions, including css.use() itself. Pass the styles directly to one css.use() call, e.g. css.use(a, active && b, [c, d]).',
             external: 'css.use() cannot order external class names ({{values}}); their precedence is left to the CSS cascade. Rewrite them as styles with css.create() and pass them into the same css.use() call.',
+            dynamic: 'Function keys cannot go through css.use(). Apply {{source}} to {{styleProp}} instead.',
         },
     },
     create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
         const reported = new Set();
         function variableOf(node) {
             let scope = context.sourceCode.getScope(node);
@@ -100,6 +103,40 @@ exports.noUnresolvedComposition = {
                 ? memberName(callee) === 'use' && imported(callee.object, '*')
                 : callee.type === 'Identifier' && imported(callee, 'use');
         }
+        function isCreate(node) {
+            if (node.type !== 'CallExpression')
+                return false;
+            const callee = node.callee;
+            return callee.type === 'MemberExpression'
+                ? memberName(callee) === 'create' && imported(callee.object, '*')
+                : callee.type === 'Identifier' && imported(callee, 'create');
+        }
+        function dynamic(node, seen = new Set()) {
+            if (seen.has(node))
+                return false;
+            seen.add(node);
+            if (node.type === 'SpreadElement')
+                return dynamic(node.argument, seen);
+            if (node.type === 'ArrayExpression') {
+                return node.elements.some((element) => element !== null && dynamic(element, seen));
+            }
+            if (node.type === 'ConditionalExpression') {
+                return dynamic(node.consequent, seen) || dynamic(node.alternate, seen);
+            }
+            if (node.type === 'LogicalExpression') {
+                return dynamic(node.left, seen) || dynamic(node.right, seen);
+            }
+            if (node.type === 'CallExpression' &&
+                node.callee.type === 'MemberExpression' &&
+                memberName(node.callee) !== null) {
+                const object = node.callee.object;
+                return [object, ...resolve(object, new Set())].some(isCreate);
+            }
+            if (node.type === 'Identifier' || node.type === 'MemberExpression') {
+                return resolve(node, new Set()).some((value) => dynamic(value, seen));
+            }
+            return false;
+        }
         function parts(node) {
             if (node.type === 'BinaryExpression' && node.operator === '+') {
                 return [node.left, node.right];
@@ -157,6 +194,18 @@ exports.noUnresolvedComposition = {
             return uses(node);
         }
         function check(node) {
+            if (isUse(node) && node.type === 'CallExpression') {
+                node.arguments
+                    .filter((argument) => dynamic(argument))
+                    .forEach((argument) => context.report({
+                    node: argument,
+                    messageId: 'dynamic',
+                    data: {
+                        source: context.sourceCode.getText(argument),
+                        styleProp,
+                    },
+                }));
+            }
             if (node.type === 'CallExpression') {
                 const calls = node.arguments.flatMap(passed);
                 if (calls.some((call) => !reported.has(call))) {

package/dist/util/scan.d.ts

@@ -0,0 +1 @@
+export declare const scanTables: (cwd: string, styleProp: string) => import("@plumeria/compiler").ScanSummary;

package/dist/util/scan.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scanTables = void 0;
+const compiler_1 = require("@plumeria/compiler");
+const SCAN_REUSE_MS = 1000;
+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, compiler_1.scanAll)(cwd, styleProp) };
+    }
+    return recentScan.tables;
+};
+exports.scanTables = scanTables;

package/oxlint.json

@@ -17,6 +17,7 @@
     "@plumeria/no-invalid-selector": "error",
     "@plumeria/no-mixed-styling-props": "error",
     "@plumeria/no-order-dependent-overlap": "warn",
+    "@plumeria/no-style-prop-relay": "error",
     "@plumeria/no-unknown-css-properties": "error",
     "@plumeria/no-unused-keys": "warn",
     "@plumeria/no-unresolved-composition": "warn",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.6.1",
+  "version": "19.6.2",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -55,7 +55,7 @@
   "dependencies": {
     "known-css-properties": "^0.37.0",
     "zss-engine": "2.8.0",
-    "@plumeria/compiler": "19.6.1"
+    "@plumeria/compiler": "19.6.2"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",