search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.49k stars 9.29k forks source link

[Bug]: Weird CSS added that affects docs styling #28866

Open jakubmazanec opened 2 months ago

jakubmazanec commented 2 months ago

Describe the bug

In my Storybook, there is following CSS added to some iframes that shows a docs page:

.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) {
  font-family:
    "Nunito Sans",
    -apple-system,
    ".SFNSText-Regular",
    "San Francisco",
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-overflow-scrolling: touch;
}

The selector has high specificity, so it makes styling divs more difficult, and also the font styles are inherited, so I have to needlessly add classes to override that - but those classes won't be needed when I use the components elsewhere.

Reproduction link

https://666f2dc8033dde8c47f6a278-exnfuvkrwz.chromatic.com/?path=/docs/forms--docs

Reproduction steps

  1. Open the reproduction link.
  2. On Forms page, inspect label "Name"
  3. See that I have to needlessly specify font-family (via font-sans Tailwind class), because otherwise styling is inherited from the weird CSS described above.

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5825U with Radeon Graphics
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (127.0.2651.74)

Additional context

No response

greptile-apps[bot] commented 2 months ago

Disclaimer This information might be inaccurate, due to it being generated automatically To address the issue of the overly specific CSS selector affecting docs styling, you can modify the CSS in the lib/components/src/typography/DocumentFormatting.tsx file. Specifically, you should adjust the selector to reduce its specificity and prevent unwanted inheritance of styles. Here are the steps:

  1. Open lib/components/src/typography/DocumentFormatting.tsx.
  2. Locate the CSS rule that matches .css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)).
  3. Modify the selector to reduce its specificity, for example:
.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled)) {
  font-family: inherit;
  font-size: inherit;
  margin: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: inherit;
  -webkit-overflow-scrolling: inherit;
}

This change will help prevent the unwanted inheritance of styles and reduce the need for additional classes to override them.

References

/.github/DISCUSSION_TEMPLATE/ideas.yml /.github/DISCUSSION_TEMPLATE/help.yml /.github/comments/invalid-link.md /test-storybooks/server-kitchen-sink/stories/html_content/styles.stories.json /docs/configure/styling-and-css.mdx /code/lib/cli/src/automigrate/fixes/vta.ts /test-storybooks/external-docs/styles /.github/comments /code/lib/cli/src/automigrate/fixes/addon-postcss.ts /code/core/src/manager/components/notifications/NotificationItem.tsx /code/core/src/manager/components/sidebar/Brand.tsx /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /.github/DISCUSSION_TEMPLATE/rfc.yml /code/frameworks/sveltekit/README.md /code/chromatic.config.json /docs/contribute/how-to-reproduce.mdx /code/lib/cli/rendererAssets/common/page.css /test-storybooks/server-kitchen-sink/public /code/addons/docs/docs/faq.md /code/addons/docs/template/stories/docspage/extract-description.stories.ts /code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css /code/lib/cli/rendererAssets/common /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /code/addons/outline/README.md /code/frameworks/web-components-webpack5/README.md

#### About Greptile This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)
dsanders1234 commented 1 month ago

It seems like this selector should NOT apply to any div under the .sb-unstyled div, but that does not seem to be the case.

image

image