Adds fluent @Keyframes support and 126 missing CSS property methods.

Author: koculu

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "purestack-repo",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.18.1",
   "type": "module",
   "sideEffects": false,

packages/purestack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purestack",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/purestack.mjs",
   "types": "./dist/purestack.d.mts",

packages/purestack/src/index.ts

@@ -1,3 +1,3 @@
-export const version: string = '1.1.16'
+export const version: string = '1.1.17'
 
 export * from '@purestack/ts-ssg'

packages/ts-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-common",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-common.mjs",
   "types": "./dist/ts-common.d.mts",

packages/ts-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-components",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-components.mjs",
   "types": "./dist/ts-components.d.mts",

packages/ts-css/README.md

@@ -94,6 +94,35 @@ style.css({ display: 'grid', gap: '1rem' })
 style.media('max-width: 720px').css({ display: 'block' })
 ```
 
+### Keyframe Animations
+
+Use `.keyframes(name)` to create an animation definition and `.select()` to
+define its frames. Frame selectors are emitted without the parent selector.
+
+```ts
+const style = s()
+const frames = style.keyframes('zt-memory-cycle')
+frames.select('0%, 4%, 40%, 100%').transform('translateY(0)')
+frames.select('12%, 28%').transform('translateY(-8px)')
+
+style.select('.zt-slab-memory')
+  .animation('zt-memory-cycle 8s ease-in-out infinite')
+style.select('.zt-slab-memory')
+  .media('prefers-reduced-motion: reduce')
+  .animation('none !important')
+```
+
+Frames support `from`, `to`, percentages, and comma-separated percentage lists.
+Use existing property methods, `.css()`, or `.set()` for declarations, including
+motion-path properties such as `.set('offset-distance', '100%')`.
+Repeated names in the same container reuse their block; repeated frame selectors
+merge declarations using the normal style builder behavior. Definitions stay
+inside their containing media or scope block and participate in revision tracking.
+
+Names are trimmed and must be non-empty; supply a valid CSS animation name and
+valid frame selectors. Names are emitted without rewriting and remain global
+inside `@scope`. Use distinct names for animations with different definitions.
+
 ### CSS Variables via `autoVar`
 
 Values beginning with `$name` or `--name` are automatically converted to `var(...)`.
@@ -189,7 +218,8 @@ const button = s('.button').css({
 - `Style` extends `BaseStyle` and stores declarations in a map and nested selectors as children.
 - `.select()` creates a child style using the parent selector + the new selector (with automatic spacing unless a combinator or `:` is used).
 - `.media()` creates a sibling style under `@media(...)` and targets the current selector inside that media block.
-- `.toCSS()` serializes rules in a deterministic order: normal selectors first, then `@media` blocks, preserving creation order via internal IDs.
+- `.keyframes()` creates a named animation block whose children are unprefixed frame selectors.
+- `.toCSS()` serializes each container in a deterministic order: normal selectors first, then `@media`, `@scope`, and `@keyframes` blocks, preserving creation order within each group via internal IDs.
 - `.toPrettyCSS()` runs the output through Prettier (`parser: css`) with default formatting options.
 
 ## API Reference
@@ -204,6 +234,7 @@ Creates a `Style` instance. If a selector is provided, it becomes the root selec
 - `css(object)` - set many properties at once using `CSSProps`.
 - `select(selector)` - create or access a nested selector.
 - `media(query)` - create or access a `@media(...)` block scoped to this selector.
+- `keyframes(name)` - create or access a named animation; select its frames with `select()`.
 - `use(style)` - shallow-merge declarations from another style into this one.
 - `toCSS()` - serialize to CSS string.
 - `toPrettyCSS(options?)` - serialize and format using Prettier.
@@ -266,6 +297,7 @@ Key `BaseStyle` methods:
 - `css({...})`
 - `select(selector)`
 - `media(query)`
+- `keyframes(name)`
 - `use(style)`
 - `toCSS()`
 - `toPrettyCSS(options?)`
@@ -285,6 +317,22 @@ const stops = getGradient('#21a8c3', '#a50d60', 6, 'hsl')
 
 `CSSProps` is a large type union of CSS properties used by `.css()` and property-specific methods on `Style`. It provides autocomplete and helps catch invalid property names or values.
 
+## Maintaining Property Metadata
+
+The generator combines the original `src/meta/cssProps.ts` with the handwritten
+additions in `src/meta/cssProps2.ts`. Maintain new properties in `cssProps2.ts`
+using the same `$`, `desc`, and optional `values.value` structure. Existing
+properties, including vendor-prefixed and older names, remain available.
+
+Regenerate the fluent methods and explicit property types from the repository root:
+
+```bash
+yarn tsx packages/ts-css/src/meta/generateStyle.ts
+```
+
+This updates `src/style.ts` and `src/cssProps.ts`. Keep property additions in the
+metadata so they survive subsequent generator runs.
+
 ## Tests
 
 ```bash

packages/ts-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-css",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-css.mjs",
   "types": "./dist/ts-css.d.mts",

packages/ts-css/src/baseStyle.ts

@@ -136,6 +136,17 @@ export class BaseStyle<T extends RootStyle> extends RootStyle {
     return child
   }
 
+  /**
+   * Create or access a named animation block. Select frames with `select()`:
+   * `style.keyframes('fade-in').select('from').opacity('0')`.
+   * Names are emitted as supplied and remain global inside `@scope`.
+   */
+  keyframes(name: string) {
+    const trimmed = name.trim()
+    if (!trimmed) throw new Error('Keyframes name must be a non-empty string.')
+    return this.selectWithoutParentKey(`@keyframes ${trimmed}`)
+  }
+
   toCSS() {
     let result = ''
     const children = [...this.children.entries()].sort((a, b) => {
@@ -147,11 +158,11 @@ export class BaseStyle<T extends RootStyle> extends RootStyle {
     })
     const selector = this.selector
     if (isGroupingRule(selector)) {
-      const mediaContent = children
+      const blockContent = children
         .map((x) => `\r\n${x[1].toCSS()}`)
         .join('')
         .trimEnd()
-      result = `${selector} {${mediaContent}
+      result = `${selector} {${blockContent}
 }
 
 `
@@ -210,7 +221,11 @@ ${props}
 }
 
 function isGroupingRule(selector: string) {
-  return selector.startsWith('@media') || selector.startsWith('@scope')
+  return (
+    selector.startsWith('@media') ||
+    selector.startsWith('@scope') ||
+    selector.startsWith('@keyframes')
+  )
 }
 
 function buildScopeRule(rootSelector: string, limitSelector?: string) {

packages/ts-css/src/cssProps.ts

@@ -1905,4 +1905,194 @@ export type CSSProps = {
     | (string & {})
   zIndex: number | string
   zoom: 'normal' | (string & {})
+  accentColor: 'auto' | (string & {})
+  animationComposition: 'replace' | 'add' | 'accumulate' | (string & {})
+  appearance: 'none' | 'auto' | (string & {})
+  aspectRatio: 'auto' | (string & {})
+  backgroundPositionX: 'left' | 'center' | 'right' | (string & {})
+  backgroundPositionY: 'top' | 'center' | 'bottom' | (string & {})
+  borderBlock: string
+  borderBlockColor: string
+  borderBlockStyle: string
+  borderBlockWidth: string
+  borderEndEndRadius: string
+  borderEndStartRadius: string
+  borderInline: string
+  borderInlineColor: string
+  borderInlineStyle: string
+  borderInlineWidth: string
+  borderStartEndRadius: string
+  borderStartStartRadius: string
+  breakAfter: 'auto' | 'avoid' | 'page' | 'column' | (string & {})
+  breakBefore: 'auto' | 'avoid' | 'page' | 'column' | (string & {})
+  breakInside: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column' | (string & {})
+  colorScheme: 'normal' | 'light' | 'dark' | (string & {})
+  columnRuleColor: string
+  containIntrinsicBlockSize: string
+  containIntrinsicHeight: string
+  containIntrinsicInlineSize: string
+  containIntrinsicSize: string
+  containIntrinsicWidth: string
+  container: string
+  containerName: string
+  containerType:
+    | 'normal'
+    | 'size'
+    | 'inline-size'
+    | 'scroll-state'
+    | (string & {})
+  contentVisibility: 'visible' | 'auto' | 'hidden' | (string & {})
+  counterSet: string
+  cx: string
+  cy: string
+  dominantBaseline:
+    | 'auto'
+    | 'alphabetic'
+    | 'middle'
+    | 'central'
+    | 'hanging'
+    | (string & {})
+  fontOpticalSizing: 'auto' | 'none' | (string & {})
+  fontPalette: 'normal' | 'light' | 'dark' | (string & {})
+  fontSynthesisSmallCaps: 'auto' | 'none' | (string & {})
+  fontSynthesisStyle: 'auto' | 'none' | (string & {})
+  fontSynthesisWeight: 'auto' | 'none' | (string & {})
+  fontVariationSettings: string
+  hyphenateCharacter: string
+  inset: string
+  insetBlock: string
+  insetBlockEnd: string
+  insetBlockStart: string
+  insetInline: string
+  insetInlineEnd: string
+  insetInlineStart: string
+  lineClamp: 'none' | (string & {})
+  marginBlock: string
+  marginInline: string
+  mask: string
+  maskClip:
+    | 'border-box'
+    | 'padding-box'
+    | 'content-box'
+    | 'no-clip'
+    | (string & {})
+  maskComposite: 'add' | 'subtract' | 'intersect' | 'exclude' | (string & {})
+  mathStyle: 'normal' | 'compact' | (string & {})
+  offset: string
+  offsetAnchor: string
+  offsetDistance: string
+  offsetPath: string
+  offsetPosition: string
+  offsetRotate: 'auto' | 'reverse' | (string & {})
+  overflowBlock:
+    | 'visible'
+    | 'hidden'
+    | 'clip'
+    | 'scroll'
+    | 'auto'
+    | (string & {})
+  overflowInline:
+    | 'visible'
+    | 'hidden'
+    | 'clip'
+    | 'scroll'
+    | 'auto'
+    | (string & {})
+  overscrollBehavior: string
+  overscrollBehaviorBlock: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorInline: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorX: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorY: 'auto' | 'contain' | 'none' | (string & {})
+  paddingBlock: string
+  paddingInline: string
+  page: string
+  placeContent: string
+  placeItems: string
+  placeSelf: string
+  printColorAdjust: 'economy' | 'exact' | (string & {})
+  r: string
+  rotate: string
+  rowGap: string
+  rx: string
+  ry: string
+  scale: string
+  scrollMargin: string
+  scrollMarginBlock: string
+  scrollMarginBlockEnd: string
+  scrollMarginBlockStart: string
+  scrollMarginBottom: string
+  scrollMarginInline: string
+  scrollMarginInlineEnd: string
+  scrollMarginInlineStart: string
+  scrollMarginLeft: string
+  scrollMarginRight: string
+  scrollMarginTop: string
+  scrollPadding: string
+  scrollPaddingBlock: string
+  scrollPaddingBlockEnd: string
+  scrollPaddingBlockStart: string
+  scrollPaddingBottom: string
+  scrollPaddingInline: string
+  scrollPaddingInlineEnd: string
+  scrollPaddingInlineStart: string
+  scrollPaddingLeft: string
+  scrollPaddingRight: string
+  scrollPaddingTop: string
+  scrollSnapAlign: 'none' | 'start' | 'end' | 'center' | (string & {})
+  scrollSnapStop: 'normal' | 'always' | (string & {})
+  scrollbarColor: string
+  scrollbarGutter: 'auto' | 'stable' | 'stable both-edges' | (string & {})
+  scrollbarWidth: 'auto' | 'thin' | 'none' | (string & {})
+  shapeRendering:
+    | 'auto'
+    | 'optimizeSpeed'
+    | 'crispEdges'
+    | 'geometricPrecision'
+    | (string & {})
+  textAutospace: string
+  textCombineUpright: 'none' | 'all' | (string & {})
+  textDecorationSkipInk: 'auto' | 'all' | 'none' | (string & {})
+  textDecorationThickness: 'auto' | 'from-font' | (string & {})
+  textEmphasis: string
+  textEmphasisColor: string
+  textEmphasisPosition: string
+  textEmphasisStyle: string
+  textUnderlineOffset: string
+  textUnderlinePosition:
+    | 'auto'
+    | 'from-font'
+    | 'under'
+    | 'left'
+    | 'right'
+    | (string & {})
+  textWrap: 'wrap' | 'nowrap' | 'balance' | 'pretty' | (string & {})
+  textWrapMode: 'wrap' | 'nowrap' | (string & {})
+  textWrapStyle: 'auto' | 'balance' | 'stable' | 'pretty' | (string & {})
+  transformBox:
+    | 'content-box'
+    | 'border-box'
+    | 'fill-box'
+    | 'stroke-box'
+    | 'view-box'
+    | (string & {})
+  transitionBehavior: 'normal' | 'allow-discrete' | (string & {})
+  translate: string
+  vectorEffect:
+    | 'none'
+    | 'non-scaling-stroke'
+    | 'non-scaling-size'
+    | 'non-rotation'
+    | 'fixed-position'
+    | (string & {})
+  viewTransitionClass: string
+  viewTransitionName: string
+  whiteSpaceCollapse:
+    | 'collapse'
+    | 'preserve'
+    | 'preserve-breaks'
+    | 'preserve-spaces'
+    | 'break-spaces'
+    | (string & {})
+  x: string
+  y: string
 } & Record<string & {}, string | number>