typewritingclass 0.2.0 → 0.2.2

package/README.md

@@ -10,6 +10,20 @@ bun add typewritingclass
 
 ## Usage
 
+### Chainable API (recommended)
+
+```ts
+import { tw } from 'typewritingclass'
+
+const card = tw
+  .bg('white').rounded('lg').p(6).flex.gap(4)
+  .hover(tw.bg('blue-50'))
+  .md.p(8)
+  .dark(tw.bg('slate-800'))
+```
+
+### Individual imports
+
 ```ts
 import { cx, p, bg, textColor, rounded, flex, gap, when } from 'typewritingclass'
 import { hover, md, dark } from 'typewritingclass'
@@ -26,6 +40,14 @@ const card = cx(
 
 ## API
 
+### Chainable builder
+
+- **`tw`** — proxy-based chainable API with access to all utilities and modifiers via a single import
+  - Property syntax for modifiers: `tw.hover.bg('blue-500')`
+  - Function syntax for multi-utility modifiers: `tw.hover(tw.bg('blue-500').textColor('white'))`
+  - Value-less utilities as properties: `tw.flex.flexCol.relative`
+  - Resolves to class string via `.toString()`, `.value`, `.className`, or template literals
+
 ### Composition
 
 - **`cx(...rules)`** — compose utilities into a single class name
@@ -76,10 +98,10 @@ const theme = createTheme({
 ### Dynamic values
 
 ```ts
-import { dynamic } from 'typewritingclass/runtime'
+import { dcx, bg, p, dynamic } from 'typewritingclass'
 
-// Returns { className, style } for runtime CSS custom properties
-const result = dynamic(bg(userColor))
+// Wrap a runtime value with dynamic(), then compose via dcx()
+const { className, style } = dcx(p(4), bg(dynamic(userColor)))
 ```
 
 ### Raw CSS escape hatch
@@ -100,8 +122,10 @@ cx(p(4), css({ transition: 'all 200ms ease' }))
 | `typewritingclass/theme/typography` | Font sizes, weights, line heights |
 | `typewritingclass/theme/shadows` | Shadow presets |
 | `typewritingclass/theme/borders` | Border radius tokens |
-| `typewritingclass/theme/spacing` | Spacing scale |
 | `typewritingclass/theme/sizes` | Named sizes |
+| `typewritingclass/theme/animations` | Animation keyframe presets |
+| `typewritingclass/theme/filters` | Filter presets |
 | `typewritingclass/theme/createTheme` | `createTheme()` |
-| `typewritingclass/inject` | `injectTheme()`, `setTheme()` |
-| `typewritingclass/runtime` | `dynamic()`, `isDynamic()` |
+| `typewritingclass/inject` | Runtime style injection (auto-initializing side-effect import) |
+| `typewritingclass/runtime` | `__twcDynamic()` (internal compiler helper) |
+| `typewritingclass/rule` | `createRule()`, `createDynamicRule()`, `wrapWithSelector()`, `wrapWithMediaQuery()` |

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "typewritingclass",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/corysimmons/typewritingclass",
+    "directory": "packages/typewritingclass"
+  },
   "exports": {
     ".": {
       "types": "./src/index.ts",
@@ -56,16 +61,14 @@
       "default": "./src/rule.ts"
     }
   },
-  "files": [
-    "src"
-  ],
-  "devDependencies": {
-    "vitest": "^3.0.4",
-    "typescript": "^5.7.3"
-  },
+  "files": ["src"],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
     "bench": "tsx benchmarks/bench.ts"
+  },
+  "devDependencies": {
+    "vitest": "^3.0.4",
+    "typescript": "^5.7.3"
   }
-}
+}

package/src/hash.ts

@@ -48,6 +48,7 @@ export function generateHash(rule: StyleRule, layer: number): string {
     JSON.stringify(rule.declarations) +
     JSON.stringify(rule.selectors) +
     JSON.stringify(rule.mediaQueries) +
+    JSON.stringify(rule.supportsQueries) +
     String(layer) +
     (rule.selectorTemplate ?? '')
   return '_' + djb2(input).toString(36)

package/src/index.ts

@@ -6,9 +6,11 @@ export { css } from './css.ts'
 export { dynamic, isDynamic } from './dynamic.ts'
 export { layer } from './layer.ts'
 export { generateCSS } from './registry.ts'
+export { tw } from './tw.ts'
 
 // Types
 export type { StyleRule, Utility, Modifier, DynamicResult } from './types.ts'
+export type { TwChain } from './tw.ts'
 export type {
   Brand, CSSColor, CSSLength, CSSShadow, CSSFontWeight,
   ColorInput, SpacingInput, SizeInput, RadiusInput, ShadowInput,

package/src/rule.ts

@@ -88,27 +88,27 @@ export function createDynamicRule(
  */
 export function combineRules(rules: StyleRule[]): StyleRule {
   const merged: Record<string, string> = {}
-  const selectors: string[] = []
-  const mediaQueries: string[] = []
-  const supportsQueries: string[] = []
+  const selectorSet = new Set<string>()
+  const mediaQuerySet = new Set<string>()
+  const supportsQuerySet = new Set<string>()
   let dynamicBindings: Record<string, string> | undefined
   for (const rule of rules) {
     Object.assign(merged, rule.declarations)
-    for (const s of rule.selectors) {
-      if (!selectors.includes(s)) selectors.push(s)
-    }
-    for (const mq of rule.mediaQueries) {
-      if (!mediaQueries.includes(mq)) mediaQueries.push(mq)
-    }
-    for (const sq of rule.supportsQueries) {
-      if (!supportsQueries.includes(sq)) supportsQueries.push(sq)
-    }
+    for (const s of rule.selectors) selectorSet.add(s)
+    for (const mq of rule.mediaQueries) mediaQuerySet.add(mq)
+    for (const sq of rule.supportsQueries) supportsQuerySet.add(sq)
     if (rule.dynamicBindings) {
       if (!dynamicBindings) dynamicBindings = {}
       Object.assign(dynamicBindings, rule.dynamicBindings)
     }
   }
-  const result: StyleRule = { _tag: 'StyleRule', declarations: merged, selectors, mediaQueries, supportsQueries }
+  const result: StyleRule = {
+    _tag: 'StyleRule',
+    declarations: merged,
+    selectors: [...selectorSet],
+    mediaQueries: [...mediaQuerySet],
+    supportsQueries: [...supportsQuerySet],
+  }
   if (dynamicBindings) result.dynamicBindings = dynamicBindings
   return result
 }