How to implement using Nextjs13 and Vanilla-Extract

[lament marlin]

I'm getting an 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

Here is my config
main.ts

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Thanks in advance

[late axle]

Have you seen this discussion? https://github.com/vanilla-extract-css/vanilla-extract/discussions/371

[lament marlin]

Hi @late axle yes I was reading this discussion but it looks like the solution is more on vite and webpack and not for @wintry baneorybook/nextjs
I can't still reproduce. We are starting to build a design system with my company using storybook but we are using nextjs and vanilla-extract

[silent sky]

Woah! This is really good timing!!! I was just looking at what libraries to add support for over the next couple of months and vanilla-extract is on the list 🎉

Based on my initial look, this one is a little trickier because @storybook/nextjs looks to mimic the webpack config that next has for your app.

it looks like vanilla-extract offers a next-plugin to make this work. https://github.com/vanilla-extract-css/vanilla-extract/blob/master/examples/next/next.config.js

We'd need to figure out how @storybook/nextjs can work with that as well.

The Storybook with Webpack5 solution in this response to the conversation that Kyle linked, looks promising!

https://github.com/vanilla-extract-css/vanilla-extract/discussions/371#discussioncomment-1379902

This would have the webpack rules for css that @storybook/nextjs exclude vanilla.css files so that you can add the custom rule for those files

[lament marlin]

Thanks @silent sky I did try this solution a while ago as @late axle mentioned also. But I will try again maybe I miss something in my config. Thanks

It would be awesome adding support for vanilla-extract soon. Thanks both

[lament marlin]

It's working now. I use this solution as mention in https://github.com/vanilla-extract-css/vanilla-extract/discussions/371#discussioncomment-4499127

Updated main.ts config

import type { StorybookConfig } from "@storybook/nextjs";

import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";
import { merge } from "webpack-merge";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  core: {
    builder: "@storybook/builder-webpack5",
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: (config) => {
    return merge(config, {
      plugins: [new VanillaExtractPlugin()],
    });
  }
};

export default config;

I also delete the node_modules folder and pnpm-lock.yaml file and run again