Skip to content

Nextjs Vite: Add runtime check for malformed postcss config #31184

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.

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

Merged

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Apr 22, 2025

Relates #31373

What I did

I've added a runtime check to make sure that Next.js users are aware that Storybook does not support Next.js' custom postcss format.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Added runtime validation for PostCSS configurations in Next.js projects using Vite, ensuring compatibility between Next.js array-based and Vite object-based plugin formats.

  • Added IncompatiblePostCssConfigError in code/core/src/server-errors.ts with clear guidance on config format conversion
  • Added PostCSS config validation in code/frameworks/nextjs-vite/src/preset.ts to catch and handle malformed configurations
  • Added postcss-load-config dependency in code/frameworks/nextjs-vite/package.json for config validation
  • Improved error messaging to help users transform array-based to object-based PostCSS configs

@valentinpalkovic valentinpalkovic added bug nextjs ci:daily Run the CI jobs that normally run in the daily job. labels Apr 22, 2025
@valentinpalkovic valentinpalkovic self-assigned this Apr 22, 2025
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile

Copy link
Member

@yannbf yannbf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link

nx-cloud bot commented Apr 22, 2025

View your CI Pipeline Execution ↗ for commit 889ec64.

Command Status Duration Result
nx affected -t check -c production --parallel=7 ✅ Succeeded <1s View ↗
nx run-many -t build -c production --parallel=3 ✅ Succeeded 3m 56s View ↗

☁️ Nx Cloud last updated this comment at 2025-04-22 10:46:53 UTC

@valentinpalkovic valentinpalkovic merged commit a4a4cfc into next Apr 22, 2025
86 of 97 checks passed
@valentinpalkovic valentinpalkovic deleted the valentin/transform-nextjs-postcss-malformed-config branch April 22, 2025 11:23
@github-actions github-actions bot mentioned this pull request Apr 22, 2025
28 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug ci:daily Run the CI jobs that normally run in the daily job. nextjs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy