zyzz 0.0.18 → 0.0.20

package/src/oxlint/rules/noUnused.ts

@@ -0,0 +1,67 @@
+/** Finds unused style members in local TypeScript namespaces. @module */
+import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Bindings from '../internal/Bindings.js'
+
+/** Leaves module exports and escaped namespaces available to unknown consumers. */
+export const noUnused: Rule = {
+  meta: {
+    messages: { unused: "Style '{{name}}' is never used." },
+    schema: [],
+    type: 'suggestion',
+  },
+  create(context) {
+    const bindings = Bindings.create(context)
+    const declarations: ESTree.VariableDeclarator[] = []
+    return {
+      VariableDeclarator(node) {
+        if (
+          node.id.type === 'Identifier' &&
+          node.init &&
+          bindings.resolve(node.init)?.kind === 'definition'
+        )
+          declarations.push(node)
+      },
+      'Program:exit'() {
+        for (const declaration of declarations) {
+          if (declaration.id.type !== 'Identifier') continue
+          let parent: ESTree.Node = declaration.parent
+          while (
+            parent.type === 'VariableDeclaration' ||
+            parent.type === 'ExportNamedDeclaration'
+          )
+            parent = parent.parent
+          if (
+            parent.type !== 'TSModuleBlock' ||
+            parent.parent.type !== 'TSModuleDeclaration'
+          )
+            continue
+          const namespace = parent.parent
+          if (namespace.id.type !== 'Identifier') continue
+          // Nested and exported namespaces may have consumers outside this local scope.
+          if (namespace.parent.type !== 'Program') continue
+          const variable = bindings.variable(declaration.id)
+          const owner = bindings.variable(namespace.id)
+          if (!variable || !owner || owner.defs.length !== 1) continue
+          if (variable.references.some((reference) => reference.isRead()))
+            continue
+          const used = owner.references.some((reference) => {
+            if (!reference.isRead()) return false
+            const member = reference.identifier.parent
+            return (
+              member.type !== 'MemberExpression' ||
+              member.object !== reference.identifier ||
+              Bindings.key(member) === undefined ||
+              Bindings.key(member) === variable.name
+            )
+          })
+          if (!used)
+            context.report({
+              data: { name: `${namespace.id.name}.${variable.name}` },
+              messageId: 'unused',
+              node: declaration.id,
+            })
+        }
+      },
+    }
+  },
+}

package/src/oxlint/rules/restrictedProperties.ts

@@ -0,0 +1,92 @@
+/** Applies explicit project restrictions to known web declarations. @module */
+import type { Rule } from '@oxlint/plugins'
+import * as Bindings from '../internal/Bindings.js'
+import * as Declarations from '../internal/Declarations.js'
+
+/** Reports forbidden properties or literal values outside an explicit allowlist. */
+export const restrictedProperties: Rule = {
+  meta: {
+    messages: {
+      restricted: "Property '{{property}}' is restricted. {{reason}}",
+    },
+    schema: [
+      {
+        additionalProperties: {
+          additionalProperties: false,
+          properties: {
+            reason: { type: 'string' },
+            values: { items: { type: ['string', 'number'] }, type: 'array' },
+          },
+          type: 'object',
+        },
+        type: 'object',
+      },
+    ],
+    type: 'suggestion',
+  },
+  create(context) {
+    const bindings = Bindings.create(context)
+    const restrictions = context.options[0]
+    const reported = new Set<number>()
+    return {
+      CallExpression(node) {
+        if (
+          !restrictions ||
+          typeof restrictions !== 'object' ||
+          Array.isArray(restrictions)
+        )
+          return
+        const binding = bindings.resolve(node.callee)
+        if (binding?.kind !== 'style' && binding?.kind !== 'variants') return
+        const input = node.arguments[0]
+        if (!input || input.type === 'SpreadElement') return
+        Declarations.visit(input, {
+          bindings,
+          recipe: binding.kind === 'variants',
+          visitors: {
+            declaration(property, name) {
+              if (
+                !Object.hasOwn(restrictions, name) ||
+                reported.has(property.start)
+              )
+                return
+              const restriction = restrictions[name]
+              if (
+                !restriction ||
+                typeof restriction !== 'object' ||
+                Array.isArray(restriction)
+              )
+                return
+              const allowed = restriction.values
+              if (Array.isArray(allowed)) {
+                const literal = Declarations.literal(property.value, bindings)
+                if (!literal) return
+                const values: unknown[] = Array.isArray(literal.value)
+                  ? literal.value
+                  : [literal.value]
+                if (
+                  values.every((value) =>
+                    allowed.some((allowed) => allowed === value),
+                  )
+                )
+                  return
+              }
+              reported.add(property.start)
+              context.report({
+                data: {
+                  property: name,
+                  reason:
+                    typeof restriction.reason === 'string'
+                      ? restriction.reason
+                      : 'Use an approved property or value.',
+                },
+                messageId: 'restricted',
+                node: property.key,
+              })
+            },
+          },
+        })
+      },
+    }
+  },
+}

package/src/oxlint/rules/useLogicalProperties.ts

@@ -0,0 +1,81 @@
+/** Encourages logical CSS properties in web style declarations. @module */
+import type { Rule } from '@oxlint/plugins'
+import * as Bindings from '../internal/Bindings.js'
+import * as Declarations from '../internal/Declarations.js'
+
+const replacements: Readonly<Record<string, string>> = {
+  borderBottomLeftRadius: 'borderEndStartRadius',
+  borderBottomRightRadius: 'borderEndEndRadius',
+  borderLeft: 'borderInlineStart',
+  borderLeftColor: 'borderInlineStartColor',
+  borderLeftStyle: 'borderInlineStartStyle',
+  borderLeftWidth: 'borderInlineStartWidth',
+  borderRight: 'borderInlineEnd',
+  borderRightColor: 'borderInlineEndColor',
+  borderRightStyle: 'borderInlineEndStyle',
+  borderRightWidth: 'borderInlineEndWidth',
+  borderTopLeftRadius: 'borderStartStartRadius',
+  borderTopRightRadius: 'borderStartEndRadius',
+  insetLeft: 'insetInlineStart',
+  insetRight: 'insetInlineEnd',
+  left: 'insetInlineStart',
+  marginLeft: 'marginInlineStart',
+  marginRight: 'marginInlineEnd',
+  paddingLeft: 'paddingInlineStart',
+  paddingRight: 'paddingInlineEnd',
+  right: 'insetInlineEnd',
+  scrollMarginLeft: 'scrollMarginInlineStart',
+  scrollMarginRight: 'scrollMarginInlineEnd',
+  scrollPaddingLeft: 'scrollPaddingInlineStart',
+  scrollPaddingRight: 'scrollPaddingInlineEnd',
+}
+
+/** Reports physical properties without changing direction-dependent behavior. */
+export const useLogicalProperties: Rule = {
+  meta: {
+    messages: {
+      logical:
+        "Use a CSS logical property instead of '{{property}}', such as '{{replacement}}' for horizontal LTR layouts.",
+    },
+    schema: [],
+    type: 'suggestion',
+  },
+  create(context) {
+    const bindings = Bindings.create(context)
+    const reported = new Set<number>()
+    return {
+      CallExpression(node) {
+        const binding = bindings.resolve(node.callee)
+        if (binding?.kind !== 'style' && binding?.kind !== 'variants') return
+        const input = node.arguments[0]
+        if (!input || input.type === 'SpreadElement') return
+        Declarations.visit(input, {
+          bindings,
+          recipe: binding.kind === 'variants',
+          visitors: {
+            declaration(property, name) {
+              const replacement = Object.hasOwn(replacements, name)
+                ? replacements[name]
+                : undefined
+              if (!replacement || reported.has(property.start)) return
+              if (
+                context.sourceCode
+                  .getCommentsBefore(property)
+                  .some((comment) =>
+                    comment.value.includes('allow-physical-property'),
+                  )
+              )
+                return
+              reported.add(property.start)
+              context.report({
+                data: { property: name, replacement },
+                messageId: 'logical',
+                node: property.key,
+              })
+            },
+          },
+        })
+      },
+    }
+  },
+}

package/src/oxlint/rules/validStyles.ts

@@ -0,0 +1,88 @@
+/** Reports statically known declaration errors using Zyzz's authoring validation. @module */
+import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Bindings from '../internal/Bindings.js'
+import * as Declarations from '../internal/Declarations.js'
+import * as Literal from '../../internal/Literal.js'
+import * as Style from '../../Style.js'
+
+/** Validates known structure and values while leaving unresolved bindings to the compiler. */
+export const validStyles: Rule = {
+  meta: { messages: { invalid: '{{message}}' }, schema: [], type: 'problem' },
+  create(context) {
+    const bindings = Bindings.create(context)
+    const reported = new Set<number>()
+    function report(node: ESTree.Node, message: string) {
+      if (reported.has(node.start)) return
+      reported.add(node.start)
+      context.report({ data: { message }, messageId: 'invalid', node })
+    }
+    return {
+      CallExpression(node) {
+        const binding = bindings.resolve(node.callee)
+        if (binding?.kind !== 'style' && binding?.kind !== 'variants') return
+        const input = node.arguments[0]
+        if (!input || input.type === 'SpreadElement') return
+        Declarations.visit(input, {
+          bindings,
+          recipe: binding.kind === 'variants',
+          visitors: {
+            declaration(property, name) {
+              if (binding.themed && name === 'typography') return
+              if (
+                !binding.themed &&
+                !name.startsWith('--') &&
+                !Object.hasOwn(Literal.rules, name)
+              ) {
+                report(property.key, `Unknown CSS property '${name}'.`)
+                return
+              }
+              const value = bindings.expression(property.value)
+              if (value.type === 'ObjectExpression') {
+                report(
+                  value,
+                  'CSS declarations require scalar values or fallback arrays.',
+                )
+                return
+              }
+              if (
+                value.type === 'ArrayExpression' &&
+                value.elements.some((element) => !element)
+              ) {
+                report(
+                  value,
+                  'Fallback arrays require dense data entries without holes.',
+                )
+                return
+              }
+              const literal = Declarations.literal(value, bindings)
+              if (!literal) return
+              const values = Array.isArray(literal.value)
+                ? literal.value
+                : [literal.value]
+              if (
+                values.some(
+                  (value) =>
+                    typeof value !== 'string' && typeof value !== 'number',
+                )
+              ) {
+                report(
+                  value,
+                  'CSS declarations require string or number values.',
+                )
+                return
+              }
+              try {
+                Style.define({ lint: { [name]: literal.value } } as never)
+              } catch (error) {
+                if (!(error instanceof Style.InvalidError)) throw error
+                for (const diagnostic of error.diagnostics)
+                  report(value, diagnostic.message)
+              }
+            },
+            invalid: report,
+          },
+        })
+      },
+    }
+  },
+}

package/src/react-native/StyleSheet.ts

@@ -785,6 +785,12 @@ function resolve(
       resolved = resolved.value
       continue
     }
+    if (Token.isExpression(resolved))
+      fail(
+        'unsupported_feature',
+        'Composed variables require a web target.',
+        path,
+      )
     if ('default' in resolved)
       fail(
         'unsupported_feature',

package/src/styleFunction.ts

@@ -114,9 +114,7 @@ export declare namespace style {
         /** Compiled and supplied class names. */
         readonly className: string
         /** Supplied inline styling overrides when present. */
-        readonly style?:
-          | Readonly<Record<string, string | number | undefined>>
-          | undefined
+        readonly style?: Readonly<Record<string, string | number | undefined>>
       }
 
   /** Callable definition; source rewriting supplies its implementation. */

package/src/variants.ts

@@ -61,32 +61,54 @@ type CheckedChoice<
           : never)
   : CheckedStyles<style, tokens, layers, mappings>
 
-type SuggestedStyles<tokens extends Theme.Tokens> =
-  Completion.Properties<tokens> & Readonly<Record<string, unknown>>
+type SuggestedStyles<
+  tokens extends Theme.Tokens,
+  styles = Record<string, unknown>,
+> = Completion.Properties<tokens, styles> & Readonly<Record<string, unknown>>
 
 /** Editor hints remain independent of declaration and selection validation. */
-type Suggestions<tokens extends Theme.Tokens> = {
-  readonly base?: SuggestedStyles<tokens> | undefined
+type Suggestions<
+  tokens extends Theme.Tokens,
+  definition = Record<string, unknown>,
+> = {
+  readonly base?:
+    | SuggestedStyles<
+        tokens,
+        definition extends { base: infer styles }
+          ? styles
+          : Record<string, unknown>
+      >
+    | undefined
   readonly compoundVariants?:
     | readonly {
         readonly style: SuggestedStyles<tokens>
         readonly when: unknown
       }[]
     | undefined
-  readonly variants?:
-    | Readonly<
-        Record<
-          string,
-          Readonly<
+  readonly variants?: definition extends { variants: infer axes }
+    ? {
+        readonly [axis in keyof axes]: {
+          readonly [choice in keyof axes[axis]]: axes[axis][choice] extends (
+            ...args: never[]
+          ) => unknown
+            ? (...args: never[]) => SuggestedStyles<tokens>
+            : SuggestedStyles<tokens, axes[axis][choice]>
+        }
+      }
+    :
+        | Readonly<
             Record<
               string,
-              | SuggestedStyles<tokens>
-              | ((...args: never[]) => SuggestedStyles<tokens>)
+              Readonly<
+                Record<
+                  string,
+                  | SuggestedStyles<tokens>
+                  | ((...args: never[]) => SuggestedStyles<tokens>)
+                >
+              >
             >
           >
-        >
-      >
-    | undefined
+        | undefined
 }
 
 type Keys<value> = value extends unknown ? keyof value : never
@@ -201,7 +223,7 @@ type Checked<
 export function variants<const definition extends Record<string, unknown>>(
   definition: definition &
     NoInfer<Checked<definition, {}, never, {}>> &
-    Suggestions<{}>,
+    Suggestions<{}, NoInfer<definition>>,
   options: style.DefinitionOptions = {},
 ): variants.ReturnType<definition> {
   return Authoring.variants(
@@ -221,7 +243,7 @@ export declare namespace variants {
   > = <const definition extends Record<string, unknown>>(
     definition: definition &
       NoInfer<Checked<definition, tokens, layers, mappings>> &
-      Suggestions<tokens>,
+      Suggestions<tokens, NoInfer<definition>>,
     options?: style.DefinitionOptions,
   ) => ReturnType<definition, output>