Introducing Variabless - JS & CSS A Match Made in Heaven

Thanks goes to Rubi Deri for this awesome logo 🎉

We have all been there. We start a new project, create our theme using CSS variabless, and then the worst; We add third-party libraries that expose a JS API to alter their style. What do we do now? How do we share our lovely theme with those libraries?

No worries. We got you covered! Let's see the magic of Variabless:

One Single Source of Truth

Instead of managing two sets of theme definitions, one in CSS and one in JS, Variabless will convert your Variabless definitions file to CSS variables or properties, allowing you to use those values in JS and CSS files:

You can try it live in the Variabless playground

Now we can pass our theme to our 3rd party lib and use it anywhere in our JS code:

Or use it in our CSS files just like any other variable:

Styles Generator

Variabless allows you to easily create utility classes or any selector you wish referencing the variable’s value. For example, let’s add font-size classes:

As easy as it gets 🔥

Use the Power of JS

Variabless uses a JS config file. It means you can leverage JavaScript to prevent repetitions and keep your config clean 🧼

Let’s take a look at the following configuration. We want to define several font sizes:

Using JS we can easily replace that with a cleaner more scalable option:

---

Bonus: since Variabless uses JS and CSS files you get your IDE’s autocompletion 🎉

Getting Started

Installation

Install the Variabless package via yarn or npm by running:

npm i -D @ngneat/variabless
yarn add -D @ngneat/variabless

Usage

There are two ways you can use Variabless via CLI or Webpack plugin.

The recommended approach is with the Webpack plugin since it provides you with the ability to add/remove variables during development, while you’re working on the project and see the results as you make the changes.

All you have to do is add the VariablessWebpackPlugin to your plugins list:

You can find information on using it via CLI here.

Include the generated file by Variabless in your styles:

Add the generated file to your .gitignore file, there is no need to track it.

---

For more information visit the variabless repo, docs and playground:

ngneat / variabless

JS & CSS - A Match Made in Heaven 💎

 

Variabless allows you to manage application-wide CSS styles and variables in a single source of truth manner Variabless will convert a JS definitions file to CSS variables or classes, allowing you to use those values in JS and CSS files.

Why Variabless?

Since introducing CSS variables, supporting themes in your app, and customizing styles became much more convenient While developing several apps, we noticed a reoccurring need. We need to refer to the theme and variables in our TS files for various reasons. For example, we are passing colors and fonts to libraries such as highcharts and grid.

At that point, it was either managing two sets of theme definitions, one in CSS and one in TS, or found a solution to centralize our theme and make it accessible for both; thus, Variabless was born.

Features

✅  Convert JS to CSS variables
✅  Single Source of Styling Across the App…

View on GitHub

This library was created by myself and @netanelbasal with ❤️