zyzz 0.0.16 → 0.0.18

package/package.json

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

package/src/Style.ts

@@ -245,6 +245,17 @@ export function define(
     keyof Literal.Properties,
     Map<string | number, Token.Reference>
   >()
+  const validatedReferences = new WeakSet<object>()
+
+  function isReference(value: unknown): value is Token.Reference {
+    if (typeof value !== 'object' || value === null) return false
+    if (validatedReferences.has(value)) return true
+    if (!Token.is(value)) return false
+
+    // Frozen references can reuse validation across declarations in this definition.
+    validatedReferences.add(value)
+    return true
+  }
 
   function report(
     code: Diagnostic['code'],
@@ -629,7 +640,7 @@ export function define(
             theme,
           })
 
-          if (Token.is(resolved)) {
+          if (isReference(resolved)) {
             let values = references.get(key)
 
             if (!values) references.set(key, (values = new Map()))
@@ -640,8 +651,10 @@ export function define(
           return resolved
         })()
 
+        const reference = isReference(resolved)
+
         if (
-          Token.is(resolved) &&
+          reference &&
           resolved.contract.variableSet &&
           !Token.acceptsReference(resolved, key)
         ) {
@@ -656,7 +669,7 @@ export function define(
         if (
           theme &&
           !custom &&
-          !Token.is(resolved) &&
+          !reference &&
           Token.mapped(theme, key) &&
           !(Binding.is(resolved) && !resolved.name.startsWith('--z-d')) &&
           !(
@@ -839,23 +852,32 @@ export type NamedStyle<name extends string = string> = {
 
 /** Supported literal and token declarations. Unknown properties and undefined values are rejected. */
 export type DeclarationProperties<tokens extends Theme.Tokens = {}> = {
-  readonly [property in keyof Literal.Properties]: Value.Fallbacks<
-    | (property extends `--${string}`
-        ? LiteralAtoms[property]
-        : [Token.Names<tokens, property>] extends [never]
-          ? LiteralAtoms[property]
-          :
-              | Value.Atom<`${string} !custom`>
-              | Extract<LiteralAtoms[property], Binding.Reference>)
-    | Value.Atom<Token.Names<tokens, property>>
-    | {
-        [group in Token.Group]: property extends Token.Properties<group>
-          ? Value.Atom<Token.Reference<group> | Token.Variable<group>>
-          : never
-      }[Token.Group]
+  readonly [property in keyof Literal.Properties]: DeclarationValue<
+    tokens,
+    property
   >
 }
 
+// A named alias caches each property domain without expanding the full declaration map.
+type DeclarationValue<
+  tokens extends Theme.Tokens,
+  property extends keyof Literal.Properties,
+> = Value.Fallbacks<
+  | (property extends `--${string}`
+      ? LiteralAtoms[property]
+      : [Token.Names<tokens, property>] extends [never]
+        ? LiteralAtoms[property]
+        :
+            | Value.Atom<`${string} !custom`>
+            | Extract<LiteralAtoms[property], Binding.Reference>)
+  | Value.Atom<Token.Names<tokens, property>>
+  | {
+      [group in Token.Group]: property extends Token.Properties<group>
+        ? Value.Atom<Token.Reference<group> | Token.Variable<group>>
+        : never
+    }[Token.Group]
+>
+
 /** Recursive theme-aware declaration and condition authoring. */
 export type Properties<
   tokens extends Theme.Tokens = {},

package/src/internal/Cascade.ts

@@ -26,6 +26,7 @@ export const shorthands = {
     'backgroundAttachment',
     'backgroundColor',
   ],
+  backgroundRepeat: ['backgroundRepeatX', 'backgroundRepeatY'],
   border: ['borderWidth', 'borderStyle', 'borderColor', 'borderImage'],
   borderImage: [
     'borderImageSource',
@@ -34,7 +35,23 @@ export const shorthands = {
     'borderImageOutset',
     'borderImageRepeat',
   ],
+  borderSpacing: [
+    'WebkitBorderHorizontalSpacing',
+    'WebkitBorderVerticalSpacing',
+  ],
   caret: ['caretColor', 'caretAnimation', 'caretShape'],
+  columnRule: ['columnRuleWidth', 'columnRuleStyle', 'columnRuleColor'],
+  columnRuleInset: ['columnRuleInsetCap', 'columnRuleInsetJunction'],
+  columnRuleInsetCap: ['columnRuleInsetCapStart', 'columnRuleInsetCapEnd'],
+  columnRuleInsetEnd: ['columnRuleInsetCapEnd', 'columnRuleInsetJunctionEnd'],
+  columnRuleInsetJunction: [
+    'columnRuleInsetJunctionStart',
+    'columnRuleInsetJunctionEnd',
+  ],
+  columnRuleInsetStart: [
+    'columnRuleInsetCapStart',
+    'columnRuleInsetJunctionStart',
+  ],
   columns: ['columnWidth', 'columnCount', 'columnHeight'],
   container: ['containerName', 'containerType'],
   flex: ['flexGrow', 'flexShrink', 'flexBasis'],
@@ -80,6 +97,7 @@ export const shorthands = {
     'gridTemplateAreas',
   ],
   listStyle: ['listStyleType', 'listStylePosition', 'listStyleImage'],
+  lineClamp: ['maxLines', 'blockEllipsis', 'continue'],
   mask: [
     'maskImage',
     'maskMode',
@@ -116,10 +134,31 @@ export const shorthands = {
     'offsetAnchor',
     'offsetRotate',
   ],
+  perspectiveOrigin: ['WebkitPerspectiveOriginX', 'WebkitPerspectiveOriginY'],
   placeContent: ['alignContent', 'justifyContent'],
   placeItems: ['alignItems', 'justifyItems'],
   placeSelf: ['alignSelf', 'justifySelf'],
   positionTry: ['positionTryFallbacks', 'positionTryOrder'],
+  rowRule: ['rowRuleWidth', 'rowRuleStyle', 'rowRuleColor'],
+  rowRuleInset: ['rowRuleInsetCap', 'rowRuleInsetJunction'],
+  rowRuleInsetCap: ['rowRuleInsetCapStart', 'rowRuleInsetCapEnd'],
+  rowRuleInsetEnd: ['rowRuleInsetCapEnd', 'rowRuleInsetJunctionEnd'],
+  rowRuleInsetJunction: [
+    'rowRuleInsetJunctionStart',
+    'rowRuleInsetJunctionEnd',
+  ],
+  rowRuleInsetStart: ['rowRuleInsetCapStart', 'rowRuleInsetJunctionStart'],
+  rule: ['columnRule', 'rowRule'],
+  ruleBreak: ['columnRuleBreak', 'rowRuleBreak'],
+  ruleColor: ['columnRuleColor', 'rowRuleColor'],
+  ruleInset: ['columnRuleInset', 'rowRuleInset'],
+  ruleInsetCap: ['columnRuleInsetCap', 'rowRuleInsetCap'],
+  ruleInsetEnd: ['columnRuleInsetEnd', 'rowRuleInsetEnd'],
+  ruleInsetJunction: ['columnRuleInsetJunction', 'rowRuleInsetJunction'],
+  ruleInsetStart: ['columnRuleInsetStart', 'rowRuleInsetStart'],
+  ruleStyle: ['columnRuleStyle', 'rowRuleStyle'],
+  ruleVisibilityItems: ['columnRuleVisibilityItems', 'rowRuleVisibilityItems'],
+  ruleWidth: ['columnRuleWidth', 'rowRuleWidth'],
   scrollTimeline: ['scrollTimelineName', 'scrollTimelineAxis'],
   textBox: ['textBoxTrim', 'textBoxEdge'],
   textDecoration: [
@@ -128,6 +167,7 @@ export const shorthands = {
     'textDecorationLine',
     'textDecorationThickness',
   ],
+  textDecorationSkip: ['textDecorationSkipInk', 'textDecorationSkipSpaces'],
   textEmphasis: ['textEmphasisStyle', 'textEmphasisColor'],
   timelineTrigger: [
     'timelineTriggerName',
@@ -143,6 +183,11 @@ export const shorthands = {
     'timelineTriggerActiveRangeStart',
     'timelineTriggerActiveRangeEnd',
   ],
+  transformOrigin: [
+    'WebkitTransformOriginX',
+    'WebkitTransformOriginY',
+    'WebkitTransformOriginZ',
+  ],
   transition: [
     'transitionDelay',
     'transitionDuration',

package/src/internal/Compound.ts

@@ -241,6 +241,15 @@ export type Properties = {
   readonly fontVariationSettings:
     | 'normal'
     | List<`${Quoted}${'' | ' '}${number}`>
+  /** Legacy vertical glyph orientation accepts only quarter-turn values. */
+  readonly glyphOrientationVertical:
+    | 'auto'
+    | '0deg'
+    | '90deg'
+    | '0'
+    | '90'
+    | 0
+    | 90
   readonly grid:
     | 'none'
     | Chain<Track | Quoted | 'auto-flow' | 'dense'>
@@ -400,6 +409,53 @@ export type Properties = {
     | 'none'
     | `${Quoted}${'' | ' '}${Quoted}`
     | `${Quoted}${'' | ' '}${Quoted}${string}`
+  /** Gap decoration shorthand with optional repetition. */
+  readonly rowRule: List<
+    | Chain<
+        | Exclude<Dimension, `${number}%`>
+        | Literal.Color
+        | 'thin'
+        | 'medium'
+        | 'thick'
+        | 'none'
+        | 'hidden'
+        | 'dotted'
+        | 'dashed'
+        | 'solid'
+        | 'double'
+        | 'groove'
+        | 'ridge'
+        | 'inset'
+        | 'outset'
+      >
+    | `repeat(${string})`
+  >
+  /** Gap decoration colors with optional repetition. */
+  readonly rowRuleColor: List<Literal.Color | `repeat(${string})`>
+  /** Gap decoration styles with optional repetition. */
+  readonly rowRuleStyle: List<
+    | 'none'
+    | 'hidden'
+    | 'dotted'
+    | 'dashed'
+    | 'solid'
+    | 'double'
+    | 'groove'
+    | 'ridge'
+    | 'inset'
+    | 'outset'
+    | `repeat(${string})`
+  >
+  /** Gap decoration widths with optional repetition. */
+  readonly rowRuleWidth: List<
+    | Exclude<Dimension, `${number}%`>
+    | 'thin'
+    | 'medium'
+    | 'thick'
+    | `repeat(${string})`
+  >
+  /** Cap and junction insets separated by an optional slash. */
+  readonly ruleInset: Chain<Dimension | Percentage | 'overlap-join'>
   readonly scrollSnapCoordinate: 'none' | List<Position>
   readonly scrollSnapDestination: Position
   readonly scrollSnapPointsX: 'none' | `repeat(${string})`