Setting up unistyles in a turborepo monorepo

[w3nda]

Hey everyone, I have the following setup:

a pure ts package containing theme (colors, breakpoints, typography & more) all are plain objects.

Then I have a UI package with react native components where I want to use unistyles.

Lastly I have multiple apps that I want to be able to use both packages, and to have unistyles theme work across all of them.

I couldn't find a way to get unistyles to work that way. The theme never gets the correct type across the monorepo...
any ideas?? anyone made it with turborepo and unistyles?

[jpudysz]

This is TS only issue or it doesn't work at all?

[w3nda]

I was able to solve the TS issue thanks to the following changes:

packages/my-theme

includes only TS files exporting colors, typography configuration and breakpoints.

packages/my-ui

Will have a unistyles.d.ts file

import 'react-native-unistyles';

/* eslint-disable @typescript-eslint/no-empty-object-type */
import { breakpoints, theme } from '@org/my-theme';

export type AppBreakpoints = typeof breakpoints;

export type AppThemes = {
  default: typeof theme;
};

declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

Using this I was able to build and release the packages and also test them on my storybook.

The issue I'm facing now is that in another repo I'm trying to install my-ui package and have updated my babel config to:

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ['babel-preset-expo'],

    // other config
    plugins: [
      // other plugins
      [
        'react-native-unistyles/plugin',
        {
          root: 'src',
          autoProcessImports: ['@org/my-ui'],
          autoProcessPaths: ['./node_modules/@org/my-ui'],
          debug: true,
        },
      ],
    ],
  };
};

And I keep getting: Unistyles is not initialized correctly. Please add babel plugin to your babel config.

So to summarize, I have Monprepo A with components and theme packages. Both packages have unistyles as peerDep.
I then proceed to install both packages on Repo B, using the babel config above and get the error above.
I also tried different variants and combinations but still no luck.
Will appreciate your help @jpudysz.
Also tagging @jordmccord as I saw he was experiencing the same.

[w3nda]

For anyone who encounters this issue. I'm not entirely sure what exactly caused it on my end but it was related to the way I built the packages.
I ended up using @jordmccord 's tsconfig and rebuilt my packages then it finally worked.
You can see the ts config here: https://github.com/utilitywarehouse/design-systems/blob/main/packages/native-ui/tsconfig.json