Skip to content

feat(dashboard): Add additionalStylesheets option to vendureDashboa…#4765

Open
tbouliere-datasolution wants to merge 1 commit into
vendurehq:masterfrom
tbouliere-datasolution:feat-css-in-dashboard
Open

feat(dashboard): Add additionalStylesheets option to vendureDashboa…#4765
tbouliere-datasolution wants to merge 1 commit into
vendurehq:masterfrom
tbouliere-datasolution:feat-css-in-dashboard

Conversation

@tbouliere-datasolution
Copy link
Copy Markdown
Contributor

@tbouliere-datasolution tbouliere-datasolution commented May 21, 2026

Description

Adds an additionalStylesheets option to vendureDashboardPlugin so that projects embedding the dashboard can inject their own CSS file(s) into the dashboard's main stylesheet declaratively, instead of having to hand-roll a custom Vite transform plugin that splices an @import into app/styles.css.

Each provided path is injected as an @import statement right after @import 'tailwindcss';. This is the conventional spot for user CSS in a Tailwind v4 setup — it keeps the CSS valid (imports must precede rules) and lets the file participate in Tailwind's build pipeline, so projects can use @source, @theme, @apply, @utility, custom variants, etc. inside it.

The option accepts either a single string or an array. Paths may be absolute or relative to process.cwd(); backslashes are normalized to forward slashes so the generated @import is valid on Windows. Duplicate imports are deduped, so the transform is idempotent.

  plugins: [
    vendureDashboardPlugin({
      // ...
      additionalStylesheets: [resolve(__dirname, 'src/dashboard.css')],
    }),
  ],

Breaking changes

None. additionalStylesheets is fully optional and defaults to undefined,
so projects that don't set it behave exactly as before.


View with Codesmith Autofix with Codesmith
Need help on this PR? Tag @codesmith with what you need. Autofix is disabled.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
vendure-storybook Ready Ready Preview, Comment May 21, 2026 10:26am

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 21, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 34475bf7-c4de-4bf8-a5c6-fa6093c3d579

📥 Commits

Reviewing files that changed from the base of the PR and between c2b48fc and 0cf4c2f.

📒 Files selected for processing (3)
  • packages/dashboard/vite/tests/plugin-hooks.spec.ts
  • packages/dashboard/vite/vite-plugin-theme.ts
  • packages/dashboard/vite/vite-plugin-vendure-dashboard.ts

📝 Walkthrough

Walkthrough

This PR adds a new additionalStylesheets option to the Vendure dashboard's theme plugin, allowing users to inject additional CSS files into the theme system. The implementation normalizes provided stylesheet paths to absolute, forward-slash form and injects corresponding @import statements immediately after the Tailwind import during CSS transformation. The feature prevents duplicate imports and integrates with the existing plugin architecture through the main dashboard plugin configuration.

Suggested reviewers

  • michaelbromley
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: adding an additionalStylesheets option to vendureDashboardPlugin, which matches the primary focus of the changeset.
Description check ✅ Passed The description covers all required template sections: a comprehensive summary of changes, explicit statement of no breaking changes, and a checklist that demonstrates thoughtful preparation (though unchecked items appear incomplete).
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant