DEV Community

Cover image for From JSON to Stylus variables with one line
Johan Villanueva
Johan Villanueva

Posted on • Updated on

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I hope to write again soon. πŸ‘‹ See you!

Top comments (0)