storybookjs/storybook

[Bug]: React + Storybook + Vite example component Page.css can leak

Open

#23,862 opened on 2023年8月16日

GitHub で見る
 (4 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
buggood first issuehelp wantedsev:S4

説明

Describe the bug

The example src/stories/Page.tsx component includes this at the top:

import React from 'react';

import { Header } from './Header';
import './page.css';

The contents of page.css are:

section {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  padding: 48px 20px;
  margin: 0 auto;
  max-width: 600px;
  color: #333;
}

section h2 {
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 4px;
  display: inline-block;
  vertical-align: top;
}
// Omitted for brevity

I've just noticed that my own component's story which uses <section> was picking up those styles: Head:

Component affected:

I can just delete the examples, and all is well. Not a high priority problem. It does raise the question though, why would that be required? Can that initial import be a scoped page.module.css to avoid having to remove docs that are helpful to new developers in the future?

To Reproduce

Interestingly, I can't reproduce using a basic stack blitz, even clicking through to Page and back to ComponentA doesn't have the effect. It's reliable on my local though.

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.13.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: ^7.2.1 => 7.2.1 
    @storybook/addon-interactions: ^7.2.1 => 7.2.1 
    @storybook/addon-links: ^7.2.1 => 7.2.1 
    @storybook/blocks: ^7.2.1 => 7.2.1 
    @storybook/react: ^7.2.1 => 7.2.1 
    @storybook/react-vite: ^7.2.1 => 7.2.1 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

コントリビューターガイド