React Server Components support

[paulm17]

As I understand it, makeStyles is a react hook. So therefore it only works in NextJS with "use client".

Are there any plans for a version of MakeStyles which also works with react server components?

Edit: I also found this issue: #303 which speaks of server components but doesn't look like it reached the right conclusion.

Many thanks!

[layershifter]

@paulm17 I have a plan on how to make it a better experience with Next.js & RSC. Basically, drop automatic RTL flipping + enforce CSS extraction. If this will be done, there is no need to have a hook anymore and consume a React context. I also need to do additional checks to see how useInsertionEffect() with RSC, maybe we can keep runtime version then.

[paulm17]

@layershifter So I just wanted to check in. Do you have any timeline of when you'll have this done or in beta? Thanks!

[layershifter]

@paulm17 Sorry, currently bothered with different priorities. Will try to provide something later this month.

[paulm17]

@layershifter No worries! Btw, I had some free time so I tried out Griffel.

My use case is using a css-in-js library with a component library. StyleX does not create styles when the component library resides in node_modules, whereas Griffel does (and without needing transpilePackages in the NextJS config). 😄

It seems that Griffel could satisfy my use case but without the react server part. I am unsure yet. 😓

Follow on question. If makestyles is no longer a react hook. Would it be possible to use within a component? Instead of having it outside of the component?

For example, my intended use case is to go from this:

import { makeStyles } from "@griffel/react";
import { Badge } from "@raikou/server";

const useClasses = makeStyles({
  root: {},
  section: {},
  label: { paddingLeft: "20px", color: "blue" },
});

export default function Page() {
  const classes = useClasses();

  return (
    <>
      <Badge
        variant="filled"
        leftSection="$$"
        classNames={{
          root: classes.root,
          section: classes.section,
          label: classes.label,
        }}
      >
        MK
      </Badge>
    </>
  );
}

To this:

"use client";

import { Badge } from "@raikou/server";

export default function Page() {
  return (
    <>
      <Badge
        variant="filled"
        leftSection="$$"
        classNames={{
          root: {},
          section: {},
          label: { paddingLeft: "20px", color: "blue" },
        }}
      >
        MK
      </Badge>
    </>
  );
}

Having this ability means I can offload the makeStyles functionality to the Badge component (within the function) and simplifies my workload.

Thanks!

[layershifter]

@paulm17 I don't plan to change syntax much, it will probably be closer to StyleX, for example:

import { makeStyles } from "@griffel/react-server";
import { Badge } from "@raikou/server";

const classes = makeStyles({
  root: {},
  section: {},
  label: { paddingLeft: "20px", color: "blue" },
});

export default function Page() {
  return (
    <>
      <Badge
        variant="filled"
        leftSection="$$"
        classNames={{
          root: classes.root,
          section: classes.section,
          label: classes.label,
        }}
      >
        MK
      </Badge>
    </>
  );
}

The problem with inlining classes is that people will do:

      <Badge
        classNames={{
          label: { color: props.color },
        }}

And it's extremely tricky to analyze/compile that...

[paulm17]

And it's extremely tricky to analyze/compile that...

I understand your concerns about how to best manage this use case. Would offloading to a css variable help at all?

<Badge
        classNames={{
          label: { color: "--label-color" },
        }}
        style={{ "--label-color": props.color }}