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.

npm install @hacimertgokhan/dsl

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))' }

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" }

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

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)')

• 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)])

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

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 })