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

[lancegliser]

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

[imballinst]

This seems to be fixed already, I guess (?) https://codesandbox.io/p/devbox/eloquent-golick-h5md9w?file=%2Fsrc%2Fstories%2Fpage.css%3A6%2C18

It seems like the section selector is now changed to .storybook-page.