twimba

A small (4kb min + gzip) macro that converts inline Imba CSS into Vanilla CSS.

It can be used at runtime like Twind or it can be used internally by your build scripts. All the same, it's Imba CSS-in-your-JS!

Getting Started

Before anything, you'll have to add Twimba to your project

npm install @cfuen/twimba

yarn install @cfuen/twimba

pnpm install @cfuen/twimba

The most basic way to use Twimba is to use Vanilla JS and alter the DOM with it.

import { twimba } from '@cfuen/twimba'

const div = document.createElement("div");
div.innerText = "Twimba is kinda cool";
div.style = twimba`fs:sm rd:md px:5 py:2 bg:cyan4 c:white`
document.body.appendChild(div);

🎯 Changelog

• Jan 19, 2023: Twimba v.0.3.0, Size and easing shorthands!

  • Feb 3, 2023: 0.3.1

    • fix default value for unspecified size units being 1px instead of 0.25rem.
    • fix issue #1: font-weight's value being parsed as a size value (And therefore getting transformed to px/rem).

  • Apr 20, 2023: 0.3.5

    • fix issue #2: Three-letter shorthands like ead and eaf not being correctly transpiled.
    • fix YET ANOTHER PROBLEM from #2: Two-letter shorthands for easing properties (Such as ea and eb) not being correctly transpiled.
    • do not ask why the sudden jump to 0.3.5, I suck at managing npm packages

  • Apr 20, 2023: 0.3.9

    • fix issue #3: Fix normal css properties breaking the Imba code parsing process (ie. Writing background as opposed to bg).
    • do not ask why the sudden jump to 0.3.9, I FORGOT TO TEST THROUGHOUTLY BEFORE RELEASE I'M SORRY (and I still suck at managing npm package versions)

• Jan 19, 2023: Twimba v.0.2.0, various orders of magnitude faster than v0.1 and supports colors.

  • Jan 21, 2023: 0.2.1
    • fix custom properties not being generated properly.
    • fix numeric values without a unit not being appended with "px".
    • add simple build script for contributors (And for my mental health).

• Jan 18, 2023: Twimba v.0.1.0, a.k.a initial alpha release. This is far from stable.

✨ Features

• [x] CSS shorthands (ie. bgc => background-color)

• [x] Custom properties (ie. px => padding-x => padding-left; pading-right;)

• [x] Colors (ie. teal6, red2)

• [x] Sizes (ie. xxs, md, xl3)

• [ ] Custom Units

💪 Advantages & Drawbacks

🔥 Zero config

Get some of the benefits of Imba's CSS without the need for... Imba, Vite, or anything really.

🛠️ Framework agnostic

Bring Twimba to your favorite tool! Works with anything, even SSR.

✔️ Nice, cheap and pretty

Twimba ships a macro for inline styles, not CSS.

🔒 Limited, thought

Inline styles means no pseudo-selectors, but you still get an awesome syntax and some palettes.

This could change in the future, but for now this is all you get.

🎬 Credits

Inspirations

• Imba: The JavaScript-targeting fullstack language that defines the beautiful CSS syntax Twimba compiles to. Currently my favorite take on CSS abstractions (And web language abstractions in general).
• twind: A small compiler that converts TailwindCSS's utility classes into CSS at runtime.
• Tailwind CSS: The paradigm-shifting standard that spawned the need for CSS-In-JS solutions like Twind and inspired Imba's CSS syntax.
• Marko: A superset of HTML and SSR framework that made me want to write a CSR "petite" version of an already stablished language standard. The first time I ever fell in love with a web language abstraction.
• goober: An insanely small CSS-In-JS solution that really made me appreciate and admire lightweight packages.
• little-vdom: An insanely small JSX solution that convinced me we can have nice things packaged in a small bundle.

😈 Where I stole some of the README structure from

Twind's GitHub README