From JSON to Stylus variables with one line

Well, my first post is here. I hope it's useful to you 😎.

Motivation

The last week, I've been reading about Design Tokens because in the company project where I work, we need to have a common language between developers and UI/UX designers (Yes, the usual). I think this solution can help us have a single source of truth about some parameters that we handle between the two teams.

By the way, this is another topic you might write about later. It's time to talk about Stylus and how it can help us in handling variables and tokens.

A little problem

The important thing about this research was the subject of the technical implementation of this tokens. Many posts about this recommend generating a JSON File like:

// tokens.json
{
  "grid": {
    "base": "8px"
  },
  "color": {
    "brand": {
      "primary": "#05efd0",
      "secondary": "#FF39a6"
    }
  },
  "font": {
    "size": {
      "xs": "10px",
      "sm": "12px",
      "md": "14px",
      "lg": "16px"
    },
    "weight": {
      "regular": 400,
      "medium": 500,
      "semi-bold": 600,
      "bold": 700
    }
  },
  "space": {
    "xxs": "2px",
    "xs": "4px"
  }
}

And then transform it to css/stylus/sass/less variables. In this case, Stylus. But... How? 🤔

Well, the basic solution would be write all the variables, one by one. Like:

// variables.styl

grid-base = 8px
color-brand-primary = #05be50
color-brand-secondary= #FF39a6
...
// A lot of variables 😣
...
space-xs = 4px

Yes, it's a possible solution. But... it's a lot of work to write the variables and also keep them up to date every time our JSON File is updated.

Stylus ❤ JSON

Stylus is here for help us 😍.

Reviewing its documentation I was surprised that we have a built-in function to work with JSON files. This has the following description:

Convert a .json file into stylus variables or an object. Nested variable object keys are joined with a dash (-).

I think it's a great feature as css preprocessor. It's magic ✨.

So, how does it work?

• We need a JSON (Duh 😅). For this example, we take the JSON I wrote lines above.
• Then, write de following line of Stylus code:

// variables.styl

// Just we need the path of our JSON file
json('./path-to-json/tokens.json')

• That's all. Yes, I'm not kidding. 😂

This function creates all the variables for us when it's executed. It means that the final variables file would look like:

// variables.styl

grid-base = 8px
color-brand-primary = #05be50
color-brand-secondary= #FF39a6
...
// A lot of variables. But... Stylus did it for us 😀
...
space-xs = 4px

Usage example

Now, we have all our variables created and available to use:

// components.styl

// We need import variables.styl file or 
// make some setting for use it as global
@require 'variables'

.button {
    background: color-brand-primary
    color: white
    padding: space-md space-lg
}

That's all! 🎉

As an additional comment I would recommend testing this feature in its 'hash' mode as well. For some use cases. Maybe this can help you in what you are looking for.

vars = json('tokens.json', { hash: true })
body
  width: vars.width

I hope to write again soon. 👋 See you!