zyzz 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyzz",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "description": "Modern, universal, simple styling library for the Web and React Native",
   "repository": {

package/src/Style.ts

@@ -459,8 +459,8 @@ export function define(
             ? Query.resolve(
                 key,
                 theme?.[Token.definition].queries ?? {
-                  breakpoints: {},
-                  containers: {},
+                  breakpoint: {},
+                  container: {},
                   containerNames: [],
                 },
               )

package/src/Vars.ts

@@ -45,7 +45,7 @@ export type Definition<values extends Values = Values> = (Values extends values
 export type References<values, root extends boolean = true> = {
   readonly [key in Exclude<
     keyof values,
-    root extends true ? 'breakpoints' | 'containers' | 'containerNames' : never
+    root extends true ? 'breakpoint' | 'containerNames' : never
   >]: values[key] extends Value
     ? Token.Reference<Domain<Scalar<values[key]>>> & {
         readonly [Token.scalar]: Scalar<values[key]>
@@ -184,8 +184,7 @@ export type Mappings = Readonly<
 /** Type carrier for configured shorthand lookup. */
 export type Mapped<values, mappings> = (Pick<
   values,
-  keyof values &
-    ('breakpoints' | 'containers' | 'containerNames' | 'typography')
+  keyof values & ('breakpoint' | 'container' | 'containerNames' | 'typography')
 > extends infer metadata extends Theme.Tokens
   ? metadata
   : {}) & {

package/src/compiler/Source.ts

@@ -31,6 +31,7 @@ import type * as Theme from '../internal/Theme.js'
 import * as Themes from './internal/Themes.js'
 import * as ThemeValues from '../web/internal/Themes.js'
 import * as Token from '../internal/Token.js'
+import * as Literal from '../internal/Literal.js'
 import * as Typography from '../internal/Typography.js'
 import * as Value from '../internal/Value.js'
 import * as Vars from './internal/Vars.js'
@@ -1021,6 +1022,8 @@ export function extract(options: extract.Options): extract.ReturnType {
                   : targets.every(
                       (target) =>
                         Token.acceptsReference(part, target) ||
+                        (part.contract.variableSet &&
+                          Expression.acceptsVariables(template, target)) ||
                         (part.group === 'color' &&
                           Expression.acceptsColor(template, target)),
                     ))
@@ -1181,6 +1184,22 @@ export function extract(options: extract.Options): extract.ReturnType {
       )
 
       function validate(style: Style.NamedStyle, path: readonly string[]) {
+        for (const declaration of style.declarations) {
+          if (
+            Token.is(declaration.value) &&
+            declaration.value.contract.variableSet &&
+            Literal.rule(declaration.property)?.kind === 'identifier' &&
+            !Expression.acceptsIdentifier(
+              declaration.value,
+              declaration.property,
+            )
+          )
+            report(
+              'invalid_literal',
+              'Variable value is incompatible with this property.',
+              call,
+            )
+        }
         if (style.targets?.web)
           validate(style.targets.web, [...path, 'targets', 'web'])
         for (const rule of style.rules ?? []) {

package/src/compiler/internal/Contract.ts

@@ -26,7 +26,7 @@ export function read(
   if (
     ![
       1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-      22, 23, 24, 25, 26, 27,
+      22, 23, 24, 25, 26, 27, 28,
     ].includes(data.version as number)
   )
     throw new Error('Unsupported Zyzz contract version.')
@@ -102,8 +102,8 @@ export function read(
   for (const [name, value] of Object.entries(record(data.themes))) {
     const entry = record(value)
     const identity = string(entry.identity)
-    if (entry.variableSet === true && (data.version as number) < 26)
-      throw new Error('Vars contracts require contract version 26 or later.')
+    if (entry.variableSet === true && (data.version as number) < 28)
+      throw new Error('Vars contracts require contract version 28 or later.')
     const mappings = VariableSets.mappings(entry.mappings)
     if (
       entry.cssOutput !== undefined &&
@@ -294,7 +294,7 @@ export function read(
       if (
         ![
           9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
-          27,
+          27, 28,
         ].includes(data.version as number) ||
         ![
           'cssFunction',
@@ -419,6 +419,14 @@ export function read(
       entry.options === undefined ? undefined : record(decode(entry.options))
 
     if (options) {
+      if (
+        entry.variableConfig === true &&
+        JSON.stringify(VariableSets.mappings(entry.variableMappings) ?? {}) !==
+          JSON.stringify(definition[Token.definition].contract.mappings ?? {})
+      )
+        throw new Error(
+          'Configuration mappings disagree with linked variable metadata.',
+        )
       if (entry.variableConfig === true)
         Config.create(
           variableOptions(
@@ -722,16 +730,19 @@ export function write(
       if (
         Object.values(themes).some(
           (theme) =>
-            theme[Token.definition].contract.defaultLayer !== undefined,
+            theme[Token.definition].contract.variableSet ||
+            theme[Token.definition].queries,
         )
       )
-        return 27
+        return 28
+
       if (
         Object.values(themes).some(
-          (theme) => theme[Token.definition].contract.variableSet,
+          (theme) =>
+            theme[Token.definition].contract.defaultLayer !== undefined,
         )
       )
-        return 26
+        return 27
       if (
         Object.values(themes).some(
           (theme) =>