Create style objects like makeStyles

[lvl-mattwells]

Hello! I'm playing around with Macaron in a Solid + Vite envrionment and liking it so far! One of the ways I like to write my styles is just a style object. Something like:

import { style } from "@macaron-css/core";
import { themeVars } from "@/theme";

const styles = {
	landing: style({
		display: "flex",
		flexDirection: "column",
		maxWidth: "30rem",
		margin: "auto",
		color: themeVars.colors.primaryTextColor,
	}),
};

This works great, but the DX leaves a bit to be desired. If I use this approach for each component, I have to import themeVars in each component and wrap every object with the style({...}) function.

Ideally I would love to be able to have like a makeStyles function (like MUI has/had) something like:

type MakeStyleRules =
	| Record<string, ComplexStyleRule>
	| ((vars: typeof themeVars) => Record<string, ComplexStyleRule>);

const makeStyles = (styleRules: MakeStyleRules): Record<string, string> => {
  const styleObj = (() => {
    if (typeof styleRules === "function") {
      return styleRules(themeVars);
    }

    return styleRules;
  })();

  const styleRuleMap = new Map<string, ComplexStyleRule>(
    Object.entries(styleObj),
  );
  const madeStyles = Array.from(styleRuleMap).reduce((acc, [name, rules]) => {
    return {
      ...acc,
      [name]: style(rules),
    };
  }, {});

  return madeStyles;
};

so that I could then use it like so:

import { makeStyles } from "@/theme";

const styles = makeStyles((theme) => ({
	landing: {
		display: "flex",
		flexDirection: "column",
		maxWidth: "30rem",
		margin: "auto",
		color: themeVars.colors.primaryTextColor,
	},
}));

That to me feels a bit cleaner and maintains type safety with any theme variables. You lose some type safety with the keys of the object, but I think that's more of a fault of my implementation.

I found if I define the makeStyles function and use it within a macaron$ block it works, but obviously this is impractical for a reusability perspective since you'd have to call this in every component.

Is this approach possible in Macaron? Any help or guidance is much appreciated. Thanks! 🙂

[Mokshit06]

Hi, I don't think adding makeStyles to macaron is a good choice, as makeStyles needs to be aware of the theme it is accessing and you can have multiple themeVars in an app for different purposes, so there's no real way for macaron to know which theme it should access. I think referring the theme by importing it normally is better since it helps keep track of which theme is being used and you can find all the references of it easily with typescript.