css: sharing variables with javascript

I wanted to use a CSS property as an input into some javascript recently and so I wondered if it was possible to share the value rather than redefine it in both locations.

It turns out we can, and it’s done by using the @value decorator in a CSS module (h/t Josh Johnston in this GitHub issue).

A straight forward example:

@value faveColor: #F0F;

.box {
  border: 1px solid faveColor;
}

var styles = require("./styles.css")
console.log("My favourite color of all time is", styles.faveColor)

We can also use this for some redirection. For example, what if we have a shared set of sizes that we want to use in our javascript, but don’t have any classes (maybe because it’s only one size that’s being applied)?

@import "../sizes.scss";
@value fontLarge = $font-large;

This is now available for use in Javascript in the same way as above.

var styles = require("./styles.css")
console.log(`large fonts are ${styles.fontLarge}`)

In this example we could have just defined the @value in the sizes.scss and imported that in the index.js (as we didn’t actually use the value in style.css).