Style with functions, objects, and IntelliSense

Rosebox is a CSS-in-Typescript library that provides features like strong types(e.g., Angle), typed functions (e.g., linearGradient), additional shorthand properties(e.g., marginX, paddingX), an object-interface for some complex properties (e.g., animation), and support for high-quality IntelliSense.

It maps CSS’s data-types into Typescript. Some of these data-types are mapped directly to TS’s intrinsic types like stringLiteral, string, and number, while others are mapped to RB’s custom-types, like Duration, TransformFunction and Length. It has been designed and developed with a focus on typo-reduction, better auto-completion, expressive API, and ease of data manipulation.

1. Typœ-reduction and better auto__ompletion 🤝

These two go hand in hand, like Knafeh and sugar syrup. Talking…

🎉 Adding support for CSS-classes

Up until v0.4.0, Rosebox had only been supporting an inline-styling strategy. Now with the release of v0.4.0, support for CSS-classes has been added, using the packages @material-ui/stylesand jss. You can find more information about it here.



Each open milestone represents a future release with details of what to expect from that release, as well as its expected release date.

FP and OOP teaming up to fight code redundancy

It’s not uncommon for people to think of Object-Oriented Programming and Functional Programming as mutually exclusive, and understandably so; any discussion involving the two turns quite often into a debate where rivalry is the central theme. But as it turns out, in some contexts, we can utilize both paradigms to get the best of two worlds. Ad-hoc Polymorphism in Typescript is one such context.

The scenario

Consider the case where we’re developing an inline-styling library. The library has different types that correspond to different CSS data types, such as:

  • RGB
  • RGBA
  • HSL
  • HSLA
  • HEX
  • Length
  • Percentage
  • Decibel
  • Time
  • Transformation

For the sake…

Define nominal types within a structural type system

Nominal & structural typing

Type systems are typically categorized as either structural or nominal. Languages like Java and Scala have primarily nominal type systems, whereas a language like Typescript has a structural type system. Let’s take a brief look at both systems.

Nominal Typing

In a nominal typing system, type compatibility is checked using the name of the types. If they do not have the same name, then they are not compatible, end of the story. If Typescript had a nominal typing system, the type check for the last line would have failed:

An introduction

An experimental Javascript styling library

With today’s web apps, we find ourselves increasingly authoring state-based styling, this has paved the way for the birth of the “CSS-in-JS” approach which in its essence is using a Javascript API to author styles.

Rosebox is an experimental CSS-in-JS library that focuses on modeling CSS in Typescript in a way that leverages the capabilities of TS’s type system, providing strong expressive types and a structured and improved syntax. With that said, let’s discuss the two main focus areas of Rosebox.

1. 🧰 Strongly typed API

Rosebox maps CSS’s data types into Typescript using types and type aliases, this results in fewer typos and makes…

Style objects vs utility-classes

Throughout my career as a front-end developer, and as you’d expect, I’ve done a lot of styling using CSS and CSS preprocessors like Sass and Less which introduced some awesome features of which the best, in my humble opinion, was mixins that enabled us, developers, to compose styles. These preprocessors, however, didn’t solve my major frustration with CSS, the mother-of-all-headaches, the C in CSS, the “Cascading”, and its narcissistic cousin Mr. “!important”.

This article compares between style objects and utility-classes and tries to prove that the style-object based approach can provide a better way to style your components than the…

This article is going to be a part of a series for helping people in their journey to learn functional programming in Javascript. get your horse and let's get started.

What makes a pure function pure?

For any function to be called pure in the functional realm, it must satisfy the following rules:

  1. Given the same argument(s), it will always return the same result
  2. It must not produce side-effects.

Now let’s take a closer look at each of these rules.

1. Given the same argument(s), it will always return the same result:

Say we have the following code snippet:

const context = {
currentLocale: 'sv'
const messages = { welcomeMessage: { sv: 'God Morgon', en: 'Good Morning'…

Hugo Nteifeh

Frontend engineer with a passion for psychology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store