Sharing defineVars in monorepo

[prc5]

Hey!

This question(s) is more about the tactics and tips for using Stylex in the monorepo and sharing the tokens with other dependent libraries and products.

I'm playing around with stylex in the monorepo setup and currently I was trying to achieve this goal:

Create the package with design tokens and share them around few ui packages to build themable ui-kit.

So in practice it will look like:

package/a - contains tokens
package/b - contains some components
package/c - contains some components
etc.

Example component styles that works:

// package/b/src/button/button.styles.ts

import { colors } from "../../../package/a/tokens.stylex"

const buttonStyles = stylex.create({
  primary: {
    color: colors.primary,
  }
  ...
});

In this case it works because I used the relative path to other package which is rather tricky workaround of a problem of sharing the tokens around packages.

I want to easily develop different parts of the library or allow other packages (not necessarily in the same repository) to reuse tokens and build their own components or themes for the library.
I'm currently reading a lot about this and it looks like you have a plan to cover this with paths read from package.json or something like that.

I wanted to ask if you have any idea what this could look like, whether it will be possible to import defineVars values from e.g. index.mjs packages, or will it require any other approaches to bundling projects that use it or some additional steps?

My thoughts on this mainly focus on the simplicity of installing such a design system from the point of view of the creator of libraries based on Stylex.

From my point of view, simply enabling import from a file in the simplest way possible, i.e.:

// package/b/src/button/button.styles.ts

import { colors } from "package/a"; // that's not allowed when it's compiled into index.mjs

const buttonStyles = stylex.create({
  primary: {
    color: colors.primary,
  }
  ...
});

I guess only solution for this would be just keeping the file named index.stylex.ts as the bundle? 🤔

That would be great. However, I'm sure you probably have some way we should proceed when creating such solutions. Therefore, I would like to find out how to best solve this.

I intend to use it in planned libraries and it would be great to learn a bit more about the tactics of developing this kind of system and libraries, which can then be used to create other libraries, sharing tokens with creators and therefore theming possibilities they provide.

I will be grateful for your answer, thanks!

[nmn]

When using npm monorepo features, it should "just work". StyleX relies on Node's require.resolve for compilation, so anything that node understands, StyleX understands. You should ensure that the rootDir is the root of the mono-repo and not one of the packages within.

The current limitations are:

1. Next.js uses a @/ alias that Typescript and the bundler understands, but Node.js doesn't
2. pnpm uses symbolic links for packages so while it works, it's less reliable than any of the other package managers.
3. We want to be able to remove the need for passing in rootDir manually.

[prc5]

Everything makes sense now. Thanks again and great job with the Stylex it is great! 🚀

[prc5]

And now I got another issue, sorry! 😅

I have changed internal package name to stylex, and it's export file to be dist/index.stylex.js.

Now, when I install it and use it like this:

import { primary, secondary, tertiary, paddings, radii, borders } from "@lib/stylex";

const styles = stylex.create({
   primary: {
       color: primary[0],
       backgroundColor: {
          default: primary[500],
          ":disabled": primary[200],
       },
   }
})

I got the error:

/button/button.styles.ts: Only static values are allowed inside of a stylex.create() call.

Values are static as this is build with only vars, exported within index.stylex.js in the package called stylex. I try to import it and use in the components sub-package. Any idea how to approach this? 🤔

[talovski]

I think the problem is using the path alias. It's being worked on (#111)

[prc5]

Thanks for the reply. It's using workspaces there to make it possible to use the import path of the package, just as it would be installed via npm. I think you're right 👍

[nmn]

The import name needs to end with .stylex for it to work.

Please try:

import { primary, secondary, tertiary, paddings, radii, borders } from "@lib/stylex/index.stylex";

This requirement is part of the design and will remain even after we add support for aliases.