cfuendev / twimba

CSS-in-JS for Imba's CSS syntax.

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.8

    • 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.8, 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

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

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

• Colors (ie. teal6, red2)

• 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

twimba's Issues

Easing properties are not correctly transpiled

Wooo these bugs just keep coming in, don't they?

When trying out Goober's css tag/macro paired with Twimba to auto-generate classes (Which could help achieving support for modifiers, breakpoints and such), I stumbled upon this:

Now I realize that I've missed some custom properties like ead and eaf, which shouldn't be transformed to their longer name (i.e ease-all-duration and ease-all-function, respectively), but rather, to the css properties they represent (in this case, transition-all, transition-duration and transition-timing-function).

Writing standard CSS property names breaks the code parsing process

While testing the ideas mentioned in #2, I also found out that cursor:pointer is being transpiled as cursor: pointer: because the cursor and pointer css properties are overlapping.

font-weight / fw value unit is pixels in transpilation

While recreating some Chakra UI components from scratch to test the usability of the library, I came across this:

As you can see, since in my ignorance I made the macro turn any default values to px (Not only uses the wrong unit, but is also short-sighted), the value of font-weight is appended the "px" unit, which shouldn't happen because font-weight is just a number, not a size unit.

I will see if I can make this transpile step (Because it is a very specific step built into the macro) only apply to values related to units. Besides, I need to fix that pixels shouldn't be the default replaced value.