Dynamic Style Language

Runtime styling engine. Short atomic syntax like Tailwind, but resolves to live JavaScript style objects.

No CSS files required. Everything is computed at runtime and returned as plain style objects.

Install

npm install @hacimertgokhan/dsl

Zero-config usage

import { dsl } from '@hacimertgokhan/dsl'

const style = dsl('grid gap(4) p(6) radius(xl) bg(surface) md:cols(2)', {
  width: 1024,
})

// style -> { display: 'grid', gap: '16px', padding: '24px', borderRadius: '28px', background: '#111827', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }

CLI

Install globally or use with npx:

npx dsl "grid gap(4) p(6) bg(surface)"
# Output: { "display": "grid", "gap": "16px", ... }

npx dsl --width 1024 "md:cols(2)"
# Output: { "gridTemplateColumns": "repeat(2, minmax(0, 1fr))" }

npx dsl --inspect "grid unknown(1) lg:cols(3)"
# Output: { "style": {...}, "applied": [...], "skipped": [...] }

npx dsl --state hover "bg(surface) hover:bg(primary)"
# Output: { "background": "#5d9fd6" }

Conditional / nested input

const isActive = true
const style = dsl([
  'grid gap(4)',
  isActive && 'bg(primary)',
  ['px(4)', 'py(2)'],
])

Custom theme

import { createRenderer } from '@hacimertgokhan/dsl'

const ui = createRenderer({
  colors: { primary: '#67d391' },
})

const button = ui.render('inline center gap(2) px(5) h(12) radius(full) bg(primary)')

Syntax

• Layout: flex, grid, row, col, center, between
• Spacing: p(6), px(4), mt(2), gap(5), gap-x(3)
• Sizing: w(full), h(dvh), size(10)
• Theme: bg(surface), fg(muted), radius(xl), shadow(glow)
• Text: text(fluid(16,22)), font(sans), weight(600)
• Responsive: md:cols(2) (width >= 768), max-md:hidden (width <= 768)
• State: hover:bg(primary), focus:border(primary)
• Transforms: x(2), y(-4), scale(1.05), rotate(45)
• Motion: transition(all,fast,out), animate(fade-up,slow)
• Raw CSS: shadow([0_30px_90px_rgb(0_0_0_/_0.32)])

Math

• space(6) -> 24px
• step(2) -> type scale
• fluid(16,28) -> clamp(...)
• golden(100) -> 161.8px
• px(24), rem(1.25), vw(50), pct(50)

API

import { dsl, resolve, createRenderer, compile } from '@hacimertgokhan/dsl'

dsl('p(4) bg(primary)', { width: 1024, state: { hover: true } })
resolve('grid md:cols(2)', { width: 1024 }) // { style, applied, skipped }
compile('grid gap(4)') // token array

const ui = createRenderer({ colors: { brand: '#abc' } })
ui.render('bg(brand)')
ui.inspect('bg(brand) md:hidden', { width: 1024 })