Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: CSS vars in theme throw errors with "Show Code" #28781

Open
UltimateGG opened this issue Aug 1, 2024 · 2 comments · May be fixed by #29063
Open

[Bug]: CSS vars in theme throw errors with "Show Code" #28781

UltimateGG opened this issue Aug 1, 2024 · 2 comments · May be fixed by #29063
Labels
bug needs triage

Comments

@UltimateGG
Copy link

Describe the bug

When using CSS vars in the docs container theme, everything works fine until you click 'Show Code' and an error is thrown, the page goes blank.

Reproduction link

https://stackblitz.com/edit/github-lyvshn-myigje?file=.storybook%2Fpreview.tsx

Reproduction steps

  1. Go to a story
  2. Observe the orangeish background color
  3. Click "Show Code" on a story, check the console

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-interactions: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-links: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-onboarding: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/blocks: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/react: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/react-vite: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/test: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    storybook: ^8.3.0-alpha.3 => 8.3.0-alpha.3

Additional context

No response
@greptile-apps Greptile Apps
Copy link
Contributor

greptile-apps bot commented Aug 1, 2024

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To resolve the issue with CSS vars in the theme throwing errors when 'Show Code' is clicked, ensure that the theme object passed to Storybook's theming API does not contain any CSS variables directly. Instead, resolve the CSS variables to their actual values before passing them to the theme. Update your theme configuration in .storybook/YourTheme.js to use static values or resolve the CSS variables programmatically.

References

/.github/DISCUSSION_TEMPLATE/help.yml
/.github/comments/invalid-link.md
/.github/DISCUSSION_TEMPLATE/ideas.yml
/code/core/src/server-errors.ts
/code/core/src/manager/components/notifications/NotificationItem.tsx
/docs/_snippets/configure-mock-provider-with-story-parameter.md
/code/core/src/preview-errors.ts
/.github/DISCUSSION_TEMPLATE/rfc.yml
/.github/comments
/code/addons/docs/template/stories/docspage
/code/core/src/manager/components/sidebar/Brand.tsx
/code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts
/docs/_snippets/storybook-canvas-doc-block-story.md
/code/core/scripts/helpers/modifyThemeTypes.ts
/code/core/src/theming/convert.ts
/docs/configure/user-interface/theming.mdx
/docs/_snippets/your-theme.md
/test-storybooks/server-kitchen-sink/stories/html_content/styles.stories.json
/code/renderers/server/template/cli/button.stories.json
/code/core/src/theming/themes/light.ts
/code/addons/interactions/src/components/InteractionsPanel.tsx
/docs/_snippets/storybook-preview-extended-theme-variables.md
/code/addons/themes/package.json
/code/core/src/preview-api/Errors.stories.tsx
/code/core/src/components/components/Modal/Modal.styled.tsx

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 · Edit Issue Bot Settings

@UltimateGG
Copy link
Author

Even stranger, the error ONLY happens when basing off of the dark theme.
...themes.dark line 13 of preview.tsx being set as light theme will not cause it.

pocka added a commit that referenced this issue Sep 6, 2024
@pocka
Avoid crash when theme contains non-color strings
46ee717 
This patch fixes runtime crash reported in,

* <#28781>
* <#25092>

This patch skips color modification against theme properties if the
property is color and a value is not valid color strings Polished
accepts. While this wouldn't be exactly what users would expect, program
is usable at least.

I've added two public functions `transparentize` and `opacify` to enable
internal components to access those wrapped ones. I have not added
`@internal` JSDoc tag because:

* that JSDoc tag is not common in this codebase, and
* users would benefit from this.

(I'm not proud of the number of changed files...but this is the minimal
atomic change without losing context I can think of)
@pocka pocka linked a pull request Sep 6, 2024 that will close this issue
Open
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Core: Avoid crash when theme contains non-color strings storybookjs/storybook
1 participant
@UltimateGG