Vanilla Extract not able to access mantine theme vars

[hexcowboy]

What package has an issue?

@mantine/vanilla-extract

Describe the bug

My theme.ts:

import { createTheme as createMantineTheme } from "@mantine/core";
import { themeToVars } from "@mantine/vanilla-extract";

// Mantine theme
export const mantineTheme = createMantineTheme({});

// CSS variables object, can be access in *.css.ts files
export const mantineVars = themeToVars(mantineTheme);

My page.css.ts:

import { style } from "@vanilla-extract/css";

import { mantineVars } from "@/theme";

export const hero = style({
  display: "grid",
  gridTemplateColumns: "1fr",
  gridTemplateRows: "1fr 1fr",

  "@media": {
    [mantineVars.largerThan("md")]: {
      gridTemplateColumns: "1fr 1fr",
      gridTemplateRows: "1fr",
    },
  },
});

Error:

 ⨯ ./src/app/page.css.ts
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
Import trace for requested module:
./src/app/page.css.ts

I'm pretty sure this is a Mantine issue and not a config issue because when I remove the mantineVars import, this error isn't presented. But either way, here's my configuration.

next.config.js

const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
  },
};

module.exports = withVanillaExtract(nextConfig);

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.2.1

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

No

Do you want to send a pull request with a fix?

No

Possible fix

No response

[hexcowboy]

I believe this issue is caused by webpack importing @mantine/vanilla-extract when you're adding the theme to the MantineProvider. I fixed this by extracting theme into theme.ts and vars into theme.css.ts.

Maybe the docs should be updated to do the same, otherwise pretty much anyone following this guide will run into this issue when adding theme to MantineProvider.

[rtivital]

The documentation will be updated with next patch