Tofu UI

A complete data-to-css transformer for TenoxUI.

Installation

npm i tofui

Usage Example

import { init } from 'tofui'

const { ui } = init({
  utilities: {
    bg: 'background',
    m: (v) => ({
      rules: v && { margin: !isNaN(v) ? v * 0.25 + 'rem' : v }
    }),
    flex: (v) => ({
      rules: v ? { flex: v } : { display: 'flex' }
    })
  },
  variants: {
    hover: '&:hover',
    md: '@media (width > 768px) { @slot }'
  },
  plugins: [
    {
      utility(ctx) {
        if (typeof ctx.utility === 'function') {
          return { ...ctx, ...ctx.utility(ctx.value) }
        }
      }
    }
  ]
})

console.log(ui.render(['bg-red', 'm-10', 'm', 'm-10px', 'hover:bg-red', 'md:flex', 'hover:flex-3']))

Output :

.bg-red { background: red }
.m-10 { margin: 2.5rem }
.m-10px { margin: 10px }
.hover\:bg-red:hover { background: red }
@media (width > 768px) { .md\:flex { display: flex } }
.hover\:flex-3:hover { flex: 3 }

License

MIT © 2025 NOuSantx