search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
886 stars 109 forks source link

[Bug] Style rendering broken in >=0.4.1 #561

Closed steffex closed 1 year ago

steffex commented 1 year ago

What version of vite are you using?

3.2.4

System info and storybook versions

System: OS: macOS 13.1 (22C65) CPU: Apple M2 Binaries: Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm Browsers: Chrome: 109.0.5414.119 npmPackages: @storybook/web-components: ^6.5.16 @storybook/addon-actions: ^6.5.16 @storybook/addon-essentials: ^6.5.16 @storybook/addon-links: ^6.5.16 @storybook/addon-a11y: ^6.5.16 @storybook/builder-vite: ^0.4.2

Describe the Bug

After 0.4.0 breaking rendering of the MDX files, if updated to 0.4.2 the rendering works again but all styling previously being applied is no longer applied (see screenshots)

<0.4.0: Screenshot 2023-02-13 at 11 16 58

>=0.4.x: Screenshot 2023-02-13 at 11 17 38

Link to Minimal Reproducible Example

No response

Participation

IanVS commented 1 year ago

Thanks for reporting, I'll take a look soon. In the meantime, you can stick with 0.3.x since you are using vite 3.

joerobot commented 1 year ago

Same issue here on Vite ^4.1.4.

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.11.1 - ~/Library/Caches/fnm_multishells/3196_1677059622734/bin/node
    Yarn: 1.22.11 - ~/Library/Caches/fnm_multishells/3196_1677059622734/bin/yarn
    npm: 8.0.0 - ~/Library/Caches/fnm_multishells/3196_1677059622734/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 110.0
    Safari: 16.3
  npmPackages:
    @storybook/addon-a11y: ^6.5.16 => 6.5.16
    @storybook/addon-actions: ^6.5.16 => 6.5.16
    @storybook/addon-essentials: ^6.5.16 => 6.5.16
    @storybook/addon-links: ^6.5.16 => 6.5.16
    @storybook/builder-vite: ^0.4.2 => 0.4.2
    @storybook/components: ^6.5.16 => 6.5.16
    @storybook/core-events: ^6.5.16 => 6.5.16
    @storybook/react: ^6.5.16 => 6.5.16
    @storybook/theming: ^6.5.16 => 6.5.16
AndrewLeedham commented 1 year ago

Likewise, looks like classes aren't getting added to the transformed markdown when upgrading to Vite@4 and @storybook/builder-vite@0.4.2.

Before upgrading: image

After upgrading: image

npx storybook info output:

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Safari: 16.3
  npmPackages:
    @storybook/addon-a11y: 6.5.16 => 6.5.16 
    @storybook/addon-essentials: 6.5.16 => 6.5.16 
    @storybook/addon-links: 6.5.16 => 6.5.16 
    @storybook/addon-storyshots: 6.5.16 => 6.5.16 
    @storybook/addon-storysource: 6.5.16 => 6.5.16 
    @storybook/builder-vite: 0.4.2 => 0.4.2 
    @storybook/design-system: 7.7.9 => 7.7.9 
    @storybook/react: 6.5.16 => 6.5.16 
    @storybook/testing-react: 1.3.0 => 1.3.0 
    @storybook/theming: 6.5.16 => 6.5.16
IanVS commented 1 year ago

Please upgrade to Storybook 7 for Vite 4 compatibility.