Issues with twin.macro in a monorepo where Storybook is at the root

[ashleynexvelsolutions]

I'm trying to use twin.macro in a component library. It's a monorepo setup with the .storybook folder at the root. I seem to be having issues accessing my custom values in tailwind.config.js. Inside each of the packages I've got babel-plugin-macros.config.js. When the config is like this, Storybook doesn't pick up my custom colors & fails to build. But I'm able to build the packages just fine with npm run build.

module.exports = {
    twin: {
      config: '../../tailwind.config.js',
      preset: "emotion",
    },
  };

Minimal repro on GitHub: https://github.com/ashleynexvelsolutions/twin-macro-monorepo-with-storybook-broken

When the config file is like this, Storybook runs just fine. However, when I run npm run build, Rollup doesn't pick up the custom colors & fails to build the packages.

  module.exports = {
    twin: {
      config: 'tailwind.config.js',
      preset: "emotion",
    },
  };

Minimal repro on GitHub: https://github.com/ashleynexvelsolutions/twin-macro-monorepo-with-rollup-broken

In each scenario, I'm getting the same error.

  MacroError: (path)/twin-macro-monorepo-with-storybook-broken/packages/Button/Button.js: 

✕ text-test-one was not found

Try one of these classes:

Then it proceeds to list Tailwind defaults, like text-white, text-gray-300, etc.

I'm sure it's probably a configuration issue on my end somewhere, and not actually an issue with the twin.macro package. Any guidance would be much appreciated.

[ben-rogerson]

Hey there,

I think this is just a config issue as I didn't have too many troubles getting the first repo (https://github.com/ashleynexvelsolutions/twin-macro-monorepo-with-storybook-broken) working.

// packages/Button/babel-plugin-macros.config.js

module.exports = {
    twin: {
-     config: '../../tailwind.config.js',
      preset: "emotion",
    },
  };

Then remove your cache (node_modules/.cache) and restart the storybook script.

[ashleynexvelsolutions]

Hey there @ben-rogerson
Thanks for that. Unfortunately when I do that and then run the build script, which is "lerna exec 'rollup -c'", I'm still getting the same error.

[ashleynexvelsolutions]

It's kind of the same deal with this one: https://github.com/ashleynexvelsolutions/testing-monorepo-example. I cloned this example https://github.com/ben-rogerson/twin.examples/tree/master/component-library-styled-components, added Storybook, & am using a custom property in Button.tsx. Running yarn && yarn build && yarn dev runs as expected. When I try & run storybook it can't find the custom property. When I change the babelMacro config in the root package.json from ./../../tailwind.config.js to tailwind.config.js, the opposite happens. Storybook works but running yarn && yarn build && yarn dev doesn't. @ben-rogerson