[Bug]: Stylus @import causes error

[xxxKOTxxx]

Describe the bug

I'm using Nx monorepo with Stylus CSS preprocesor and Storybook v7 with Vite bundler.

My goal is to use shared styles library for React and Vue3 UI components library. I've solved bundling issue with This solution and my libraries pass build process with @import resolving totally fine. But Storybook fails independent of configuration.

In frontend i got: TypeError: Failed to fetch dynamically imported module: ...
in console:

 [vite] Internal server error: [postcss] /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1: Unknown word
  Plugin: vite:css
  File: /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1
  1  |  
     |   ^
  2  |    @import "~@mydse/styles/components/Badge.styl"

How can I fix this issue?

To Reproduce

Looks like any usage of @import ... in stylus file or Vue styles section causes issue. All projects are generated with Nx library

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: 7.0.22 => 7.0.22 
    @storybook/core-common: ^7.0.22 => 7.0.22 
    @storybook/core-server: 7.0.22 => 7.0.22 
    @storybook/react: 7.0.22 => 7.0.22 
    @storybook/react-vite: 7.0.22 => 7.0.22 
    @storybook/vue3: ^7.0.22 => 7.0.22 
    @storybook/vue3-vite: 7.0.22 => 7.0.22

Additional context

No response

[xxxKOTxxx]

P.S. after checking Your documentation I have another question: do You support Stylus at all? There is totally nothing about it - just issues regarding webpack.

[shilman]

@xxxKOTxxx possibly fixed in 7.0.24 by #22486 which claims to fix stylus support. we don't explicitly support stylus, but under the hood storybook is just webpack or vite, both which I assume support stylus, which means that you should be able to get support by configuration.

[shilman]

cc @integrayshaun

[xxxKOTxxx]

Thanks for reply! I'll wati for release to check is it works now!

7.0.24

When do You plan to release this version?

[xxxKOTxxx]

Tested - no changes.
I'll try to migrate on webpack and try solutions for it.

[xxxKOTxxx]

With webpack5 also problem described here

[xxxKOTxxx]

Tested on 7.0.25 - no progress

[xxxKOTxxx]

For those who also has problem with stylus, as workaround I can propose t use patch-package package to patch node_modules/@storybook/core-common/dist/index.js file untill PR wiill be released in Storybook.
Just replace

...hookIgnoreNodeModules:!1,tsconfigRaw:...

with

...hookIgnoreNodeModules:!1,keepNames:true,tsconfigRaw:...

and follow package documentation