Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
2 tasks done
armandabric opened this issue May 31, 2023 · 3 comments
Closed
2 tasks done

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

armandabric opened this issue May 31, 2023 · 3 comments
Labels
remix issue related to the remix integration

Comments

@armandabric
Copy link

armandabric commented May 31, 2023 •
edited
Loading

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:/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
@joerobot
Copy link

joerobot commented Jul 13, 2023 •
edited
Loading

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.

@askoufis askoufis added remix issue related to the remix integration and removed pending triage labels Oct 31, 2023
@askoufis
Copy link
Contributor

@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.

@armandabric
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
remix issue related to the remix integration
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@armandabric @joerobot @askoufis