@plumeria/eslint-plugin 19.13.0 → 19.14.1

package/README.md

@@ -15,6 +15,7 @@ The `plugin:@plumeria/recommended` config enables the following:
 - `@plumeria/no-inner-call`: **error**
 - `@plumeria/no-invalid-selector`: **error**
 - `@plumeria/no-mixed-styling-props`: **error**
+- `@plumeria/no-mutable-binding`: **warn**
 - `@plumeria/no-order-dependent-overlap`: **warn**
 - `@plumeria/no-style-prop-relay`: **error**
 - `@plumeria/no-unknown-css-properties`: **error**

package/dist/index.js

@@ -8,6 +8,7 @@ const no_inner_call_1 = require("./rules/no-inner-call");
 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_mutable_binding_1 = require("./rules/no-mutable-binding");
 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");
@@ -29,6 +30,7 @@ const rules = {
     'no-invalid-selector': no_invalid_selector_1.noInvalidSelector,
     'no-logical-properties': no_logical_properties_1.noLogicalProperties,
     'no-mixed-styling-props': no_mixed_styling_props_1.noMixedStylingProps,
+    'no-mutable-binding': no_mutable_binding_1.noMutableBinding,
     '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,
@@ -57,6 +59,7 @@ const configs = {
             '@plumeria/no-inner-call': 'error',
             '@plumeria/no-invalid-selector': 'error',
             '@plumeria/no-mixed-styling-props': 'error',
+            '@plumeria/no-mutable-binding': 'warn',
             '@plumeria/no-order-dependent-overlap': 'warn',
             '@plumeria/no-style-prop-relay': 'error',
             '@plumeria/no-unknown-css-properties': 'error',

package/dist/rules/no-mutable-binding.d.ts

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

package/dist/rules/no-mutable-binding.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noMutableBinding = void 0;
+const STYLE_APIS = new Set([
+    'create',
+    'createStatic',
+    'createTheme',
+    'keyframes',
+    'viewTransition',
+]);
+const isReference = (node, parent) => {
+    if (!parent)
+        return true;
+    if (parent.type === 'Property' && parent.key === node && !parent.computed)
+        return false;
+    if (parent.type === 'MemberExpression' &&
+        parent.property === node &&
+        !parent.computed)
+        return false;
+    return true;
+};
+const findVariable = (scope, name) => {
+    for (let current = scope; current; current = current.upper) {
+        const variable = current.set.get(name);
+        if (variable)
+            return variable;
+    }
+    return undefined;
+};
+exports.noMutableBinding = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow let and var bindings in Plumeria style definitions',
+        },
+        messages: {
+            mutable: "'{{ name }}' is declared with '{{ kind }}', but the build reads only the value it starts with. Declare it with 'const'.",
+        },
+        schema: [],
+    },
+    create(context) {
+        const plumeriaAliases = {};
+        const sourceCode = context.sourceCode;
+        const isStyleCall = (node) => {
+            const callee = node.callee;
+            if (callee.type === 'Identifier') {
+                return STYLE_APIS.has(plumeriaAliases[callee.name] ?? '');
+            }
+            return (callee.type === 'MemberExpression' &&
+                !callee.computed &&
+                callee.object.type === 'Identifier' &&
+                plumeriaAliases[callee.object.name] === 'NAMESPACE' &&
+                callee.property.type === 'Identifier' &&
+                STYLE_APIS.has(callee.property.name));
+        };
+        const check = (node, parent) => {
+            if (node.type === 'Identifier' && isReference(node, parent)) {
+                const variable = findVariable(sourceCode.getScope(node), node.name);
+                const definition = variable?.defs[0];
+                if (definition?.type === 'Variable' &&
+                    definition.parent.kind !== 'const') {
+                    context.report({
+                        node,
+                        messageId: 'mutable',
+                        data: { name: node.name, kind: definition.parent.kind },
+                    });
+                }
+            }
+            for (const [key, value] of Object.entries(node)) {
+                if (key === 'parent')
+                    continue;
+                if (Array.isArray(value)) {
+                    for (const child of value) {
+                        if (child && typeof child.type === 'string')
+                            check(child, node);
+                    }
+                }
+                else if (value && typeof value.type === 'string') {
+                    check(value, node);
+                }
+            }
+        };
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value !== '@plumeria/core')
+                    return;
+                node.specifiers.forEach((specifier) => {
+                    if (specifier.type === 'ImportNamespaceSpecifier' ||
+                        specifier.type === 'ImportDefaultSpecifier') {
+                        plumeriaAliases[specifier.local.name] = 'NAMESPACE';
+                    }
+                    else {
+                        const spec = specifier;
+                        plumeriaAliases[specifier.local.name] =
+                            spec.imported.type === 'Identifier'
+                                ? spec.imported.name
+                                : String(spec.imported.value);
+                    }
+                });
+            },
+            CallExpression(node) {
+                if (!isStyleCall(node))
+                    return;
+                for (const argument of node.arguments)
+                    check(argument, node);
+            },
+        };
+    },
+};

package/dist/rules/no-order-dependent-overlap.js

@@ -4,6 +4,30 @@ exports.noOrderDependentOverlap = void 0;
 const zss_engine_1 = require("zss-engine");
 const selector_1 = require("../util/selector");
 const styleObject_1 = require("../util/styleObject");
+const staticValue_1 = require("../util/staticValue");
+function overlapRange(first, second) {
+    if (first.kind !== second.kind || first.name !== second.name)
+        return false;
+    const axes = new Set([...first.axes.keys(), ...second.axes.keys()]);
+    for (const axis of axes) {
+        const a = first.axes.get(axis);
+        const b = second.axes.get(axis);
+        if (!a || !b)
+            continue;
+        if (a.unit !== b.unit)
+            return false;
+        if (Math.max(a.lower, b.lower) >= Math.min(a.upper, b.upper))
+            return false;
+    }
+    return true;
+}
+function crossesCondition(first, second) {
+    const a = (0, zss_engine_1.parseConditionalRange)(first);
+    const b = (0, zss_engine_1.parseConditionalRange)(second);
+    if (!a || !b || !overlapRange(a, b))
+        return false;
+    return !(0, zss_engine_1.impliesCondition)(first, second) && !(0, zss_engine_1.impliesCondition)(second, first);
+}
 const DIRECT_SHORTHANDS = {};
 for (const [shorthand, longhands] of Object.entries(zss_engine_1.DIRECT_LONGHANDS)) {
     for (const longhand of longhands) {
@@ -59,6 +83,7 @@ exports.noOrderDependentOverlap = {
         messages: {
             alias: "'{{ first }}' and '{{ second }}' are the same property under two names, so neither outranks the other. The one written last wins.",
             crossing: "'{{ first }}' and '{{ second }}' overlap, but neither property outranks the other. The result depends on the order they are written.",
+            crossingCondition: "'{{ first }}' and '{{ second }}' can match at the same time, but neither contains the other, so the order they are written decides which one sets '{{ property }}' where both match. Split them into ranges that do not overlap, or give the overlap a condition of its own.",
             condition: "'{{ narrow }}' matches only where '{{ broad }}' also matches, so it is the more specific of the two, and both set '{{ property }}'. Written first, it reads as though the broader one wins, which is the opposite of what the stylesheet does.",
             state: "'{{ first }}' and '{{ second }}' can match at the same time and both set '{{ property }}', but neither outranks the other, so the result depends on the order they are written. Declare '{{ compound }}' if the intersection has a value of its own, or split them into separate styles and compose them in the order that should win.",
             keep: "Keep '{{ keep }}'",
@@ -69,6 +94,7 @@ exports.noOrderDependentOverlap = {
     create(context) {
         const plumeriaAliases = {};
         const sourceCode = context.sourceCode;
+        const staticValue = (0, staticValue_1.staticValueResolver)(context);
         return {
             ImportDeclaration(node) {
                 if (node.source.value === '@plumeria/core') {
@@ -131,9 +157,10 @@ exports.noOrderDependentOverlap = {
                     ? prop.key.name
                     : String(prop.key.value);
             }
-            return prop.key.type === 'Literal' && typeof prop.key.value === 'string'
-                ? prop.key.value
-                : '';
+            if (prop.key.type === 'Literal' && typeof prop.key.value === 'string')
+                return prop.key.value;
+            const value = staticValue(prop.key);
+            return typeof value === 'string' ? value : '';
         }
         function declaredNames(node, withCustomProperties = false) {
             const names = new Set();
@@ -218,11 +245,23 @@ exports.noOrderDependentOverlap = {
                 for (let j = i + 1; j < conditions.length; j++) {
                     const first = conditions[i];
                     const second = conditions[j];
-                    if (!(0, zss_engine_1.impliesCondition)(first.name, second.name))
-                        continue;
                     const shared = [...first.sets].filter((name) => second.sets.has(name));
                     if (shared.length === 0)
                         continue;
+                    if (crossesCondition(first.name, second.name)) {
+                        context.report({
+                            node: second.prop.key,
+                            messageId: 'crossingCondition',
+                            data: {
+                                first: first.name,
+                                second: second.name,
+                                property: shared[0],
+                            },
+                        });
+                        continue;
+                    }
+                    if (!(0, zss_engine_1.impliesCondition)(first.name, second.name))
+                        continue;
                     context.report({
                         node: first.prop.key,
                         messageId: 'condition',

package/dist/util/selector.js

@@ -175,6 +175,7 @@ function statesOf(selector) {
 }
 function compoundOf(first, second) {
     const states = [...new Set([...statesOf(first), ...statesOf(second)])];
+    states.sort((a, b) => Number(b.startsWith('[')) - Number(a.startsWith('[')));
     return states.join('') + (0, zss_engine_1.getPseudoElement)(first);
 }
 function covers(compound, first, second) {

package/oxlint.json

@@ -18,6 +18,7 @@
     "@plumeria/no-inner-call": "error",
     "@plumeria/no-invalid-selector": "error",
     "@plumeria/no-mixed-styling-props": "error",
+    "@plumeria/no-mutable-binding": "warn",
     "@plumeria/no-order-dependent-overlap": "warn",
     "@plumeria/no-style-prop-relay": "error",
     "@plumeria/no-unknown-css-properties": "error",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.13.0",
+  "version": "19.14.1",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "oxlint": "1.87.0",
-    "zss-engine": "2.9.2",
-    "@plumeria/compiler": "19.13.0"
+    "zss-engine": "2.10.0",
+    "@plumeria/compiler": "19.14.1"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",