Ideas in Bloom Pt. 1: Auto-Animations

HEADER

Let’s say we have the following code:

// themes.json
{
  "red": {
    "textColor": "#f00"
  }
}

// styles.json
{
  "emphasis": {}
}

import stylesJSON from "styles.json";
import themesJSON from "themes.json";

const theme = "red";

return (
  <div style={stylesJSON.emphasis}>
    Using the <q>{theme}</q> theme!
  </div>
);

How can we style our div using the definitions in themes.json? Here’s my solution:

// themes.json
{
  "red": {
    "textColor": "#f00"
  }
}

// styles.json
{
  "emphasis": {
    "color": "<textColor>"
  }
}

import stylesJSON from "styles.json";
import themesJSON from "themes.json";

const makeStyles = (theme) => {
  const pattern = /<[^>]*>/; // matches with <EXPRESSION>
  const t = themesJSON[theme];

  // Find all matches of `pattern` in `styleData` and replace them with their evaluated counterparts.
  let s = JSON.stringify(stylesJSON);
  while (s.match(pattern)) {
    const match = s.match(pattern)[0];
    s = s.replace(match, eval("t." + match.slice(1, -1)));
  }

  return JSON.parse(s);
};

const theme = "red";
const styles = makeStyles(theme);

return (
  <div style={styles.emphasis}>
    Using the <q>{theme}</q> theme!
  </div>
);

Here’s a demo of my idea in action:

Pretty simple, right? It’s not the most efficient idea, but for my use case, it does the job well.

Could I have avoided the issue entirely by storing the styles in a .js file instead of a .json file? Well, yeah, but where’s the fun in that?