Giters

vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

Home Page:https://vanilla-extract.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Could not import the theme variables from another package (in a monorepo)

armandabric opened this issue · comments

commented

Describe the bug

I'm building my design system in a dedicated package in a mono-repository. Everything was working perfectly until we try to use the theme variable in the main application (not only in the design system package).

The main application is a Remix application. In its root.tsx file I import my theme class (generated with createTheme())

import { acmeLegacyThemeClass } from '@acme/guidelines';
// ... 

export default function Root() {
  return (
    <html lang="fr" className={acmeLegacyThemeClass}>
      // ...
    </html>
  );
}

This is working.

The issue is when I trigger when I use the CSS variable of my theme:

import { AcmeLegacyVars } from '@acme/guidelines';
import { style } from '@vanilla-extract/css';

export const someStyle = style({
  borderBottom: `1px solid ${AcmeLegacyVars.colors.gray[500]}`, // <-- This make the build to get stuck with no error message
});

I declare my theme like this:

// Most of the theme tokens have been removed to improve readability.

export const [acmeLegacyThemeClass, AcmeLegacyVars] = createTheme({
  colors: {
    gray: {
      '500': '#9ca3af',
    },
  },
});

My issue is that I could use the acmeLegacyThemeClass but not the AcmeLegacyVars in my application.

Am I doing something wrong?

Reproduction

https://github.com/armandabric/vanilla-extract-import-vars-bug

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 76.19 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.2.0 - /opt/homebrew/opt/node/bin/node
    Yarn: 3.5.0 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 113.0.2
    Safari: 16.4

Used Package Manager

yarn

Logs

$ yarn dev
Loading environment variables from .env
💿 Building...
💿 Built in 720ms
Waiting for app server (95e66e5a)
> remix-serve build/index.js
Remix dev server ready
Remix App Server started at http://localhost:3000 (http://192.168.1.32:3000)
App server took 273ms
GET / 200 - - 23.179 ms
💿 File changed: app/routes/someStyle.css.ts
💿 File changed: app/routes/someStyle.css.ts
💿 Rebuilding... # <-- Stuck here

Validations

commented

Getting something very similar in our monorepo (Vanilla Extract component library -> Gatsby site). If we force the Gatsby site to use the package straight from the registry, rather than symlinked the issue goes away.

commented

@armandabric This could potentially be similar to #1043.

TL;DR Exporting react components and styles from the same entrypoint causes issues with react refresh due to how it uses TitleCase names to detect components, and this might also be tripping up Remix.

I tested this theory by removing all component exports from @acme/guidelines's index.ts file. This resulted in a remix build/dev server that worked fine, but obviously didn't use the components.

A common solution to this is to expose your styles in a separate entrypoint to your components. I tried to get this working but just adding a styles.ts file to the UI package and importing directly from @acme/guidelines/src/styles but Remix didn't like this. It did however at least result in a successful build, but the server couldn't import the file correctly.

I also tried converting everything to type: "module" and setting up package.json exports, but I couldn't get Remix to play nice with pure ESM.

commented

Thanks to have take time to look into this.

It makes more sense that's a bundling issue and not a Vanilla Extract one.

A common solution to this is to expose your styles in a separate entrypoint to your components.

That's a good workaround, and in fact pretty it a logic things to do.

I also tried converting everything to type: "module" and setting up package.json exports, but I couldn't get Remix to play nice with pure ESM.

The reproduction repo use Remix v1. The ESM support got better in v2.