Unable to get rollup plugin to work with sprinkles in a monorepo setup

[ericmatthys]

We have a monorepo setup and one of our packages called styles uses @vanilla-extract/sprinkles. This package exports the sprinkles function and is then used by other packages.

When trying to build a package that depends on styles, I run into an error.

[!] (plugin vanilla-extract) Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "../styles/src/sprinkles.css.ts.vanilla.css".

Has anyone worked with the rollup plugin with sprinkles and monorepos before that has gotten past these issues? Any advice would be much appreciated.

[ericmatthys]

Part of this issue was fixed by a TypeScript configuration change, not using paths to resolve packages in the monorepo. This means that vanilla-extract doesn't see the .css.ts imports in external packages. Then there was an issue with importing css in external packages, which was solved by passing an esbuild plugin to ignore css imports.

esbuildOptions: {
  plugins: [
    {
    name: 'empty-external-css-imports',
      setup(build) {
        build.onLoad({ filter: /\.css$/ }, () => ({ contents: '' }));
      },
    },
  ],
},

[tannera]

Hello @ericmatthys, do you recall what the tsconfig change was that you made? My team are also now confronted with this issue in a monorepo.

[ericmatthys]

The change was removing "paths".

[ManAnRuck]

I don't have path's in my tscofnig but use turbo repo and pnpm which is working with symlinks.

my current workaround is this:

plugins: [
    vanillaExtractPlugin(),
    {
      transform(code) {
        return code.replace(/(\.\.\/)+PACKAGE_PATH/g, 'node_modules/PACKAGE_NAME');
      }
    },
]

replace PACKAGE_PATH and PACKAGE_NAME