Storybook Vite — Component with separate styles in a links function does not get surfaced in Storybook

[thomasverleye]

Introduction

In our setup we're using Storybook's react-vite framework to render our components.
We're already setting up our vite config as suggested in the Remix documentation.

Problem

We are loading our css as an explicit URL import (?url) for it to work in remix, eg:

import styles from './DiscoverBanner.css?url';

export const links = () => {
  return [{ rel: 'stylesheet', href: styles }];
};

When looking into the network tab we're seeing the following for said css file:

export default "/app/components/dashboard/DiscoverBanner/DiscoverBanner.css"
//# sourceMappingURL=REDACTED

Other findings

When I remove the styles from and ?url (import './DiscoverBanner.css';) the styling correctly loads in Storybook but we'd like to keep make use of the route styles.

Question

Could it be that we need to add a certain config that looks for links function and automatically loads those imports?
I've been digging into the remix vite plugin and do see some transforms but did not take enough time to figure out how they do it.

@markdalgleish or @pcattori any suggestions here? 👀

[thomasverleye]

Setup config

vite.config.ts

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { flatRoutes } from 'remix-flat-routes';

const isStorybook = process.argv[1]?.includes('storybook');

export default defineConfig({
  build: {
    sourcemap: true,
  },
  ssr: {
    noExternal: ['remix-i18next'],
  },
  plugins: [
    !isStorybook &&
      remix({
        ignoredRouteFiles: ['**/*'],
        serverModuleFormat: 'esm',
        routes(defineRoutes) {
          return flatRoutes('routes', defineRoutes, {
            ignoredRouteFiles: ['**/*.test.{js,jsx,ts,tsx}', '**/__*.*', '**/*.stories.tsx'],
          });
        },
      }),
    tsconfigPaths(),
  ],
});

storybook main.tsx

// use `mergeConfig` to recursively merge Vite options
import { mergeConfig } from 'vite';

export default {
  stories: ['../app/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    'storybook-react-i18next',
    'storybook-addon-remix-react-router'
  ],
  staticDirs: ['../public/', '../app'],
  framework: '@storybook/react-vite',
  async viteFinal(config, { configType }) {
    // return the customized config
    return mergeConfig(config, {
      // customize the Vite config here
      resolve: {
        alias: {
          '~': '/app',
          '@remix-run/react/dist/components': '@remix-run/react/dist/esm/components',
        },
      },
    });
  },
  docs: {
    autodocs: false,
  },
};

[thomasverleye]

@markdalgleish or @pcattori did anyone of you had the time to look into this issue? :-)

[thomasverleye]

FWIW: I've created a component component StylesheetLinks that I always import and use in my stories to work around this issue:

import type { LinksFunction } from '@remix-run/node';
import type { PropsWithChildren } from 'react';

interface StylesheetLinksProps {
  links: LinksFunction;
}

const StylesheetLinks: React.FC<PropsWithChildren<StylesheetLinksProps>> = ({
  links,
  children,
}) => {
  return (
    <>
      {links()
        .filter((link) => 'rel' in link && link.rel === 'stylesheet' && 'href' in link)
        .map((item, index) => (
          <link key={index} {...item} />
        ))}
      {children}
    </>
  );
};

export default StylesheetLinks;

Usage in storybook story:

const Template: StoryFn<typeof MyFancyComponent> = (args) => (
  <StylesheetLinks links={links}>
    <MyFancyComponent {...args} />
  </StylesheetLinks>
);