[Bug?]: Importing components or layouts into Routes file causes incorrect stylesheet order in Storybook

[raph90]

What's not working?

This is a bit of a strange one but I was debugging it for a long time before I found what was causing the problem.

My setup is postcss / Mantine 7 with Redwood, with Vite as the bundler on the dev server and webpack for Storybook.

On Vite/dev there are no problems because Vite automatically knows what it's doing when it comes to CSS / PostCSS, but with Storybook and Webpack, any import of any component (from /layouts or /components or anywhere else) that has a stylesheet into the Routes file will mean that that stylesheet is loaded before any global styles that are imported in storybook.preview.js. This means that different styles are applied in SB, meaning it's unusable.

A quick workaround is just to comment out the routes file while working in Storybook, but I thought it would be worth mentioning this here in case anyone has encountered a similar issue.

Here's my storybook config:

const path = require('path')

async function webpackFinal(config) {
  config.resolve.alias = {
    ...config.resolve.alias,
    'original-dayjs': path.resolve(__dirname, '../../node_modules/dayjs'),
    '@redwoodjs/testing/web-original': path.resolve(
      __dirname,
      '../../node_modules/@redwoodjs/testing/web'
    ),
  }

  const stylesRules = [
    '\\.css$',
    '\\.module\\.css$',
    '\\.scss$',
    '\\.module\\.scss$',
  ]

  config.module.rules[0].oneOf.forEach((rule) => {
    if (stylesRules.includes(rule.test.source)) {
      rule.use.push('postcss-loader')
    }
  })

  return config
}

module.exports = {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-styling',
    'storybook-dark-mode',
  ],
  webpackFinal,
}

I'm not sure of the best way to ignore the Routes file when webpack is loading in files, so any advice would be welcomed. Thank you in advance!

How do we reproduce the bug?

• new redwood project
• install postcss and add a web/postcss.config.js
• create a layout component, and add a css module
• install typescript-plugin-css-modules and add "plugins": [{ "name": "typescript-plugin-css-modules" }], to web/tsconfig.json
• install postcss
• add my storybook config
• create a global css file and import it into storybook.preview.js
• use a <Set wrap={YourLayoutComponent} in your routes file
• run storybook and see that the layout component css is loaded before the global css

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[raph90]

Closing this - the obvious thing to do is just import my global stylesheets in my Routes file. I don't know what's causing the issue but since I have a fix then whoever else encounters the problem can just do this.