Skip to content

Unbreak Docker build: switch to @tailwindcss/vite + pin vite^7#1158

Closed
elemdos wants to merge 1 commit into
mainfrom
fix/docker-build-vite8-on-main
Closed

Unbreak Docker build: switch to @tailwindcss/vite + pin vite^7#1158
elemdos wants to merge 1 commit into
mainfrom
fix/docker-build-vite8-on-main

Conversation

@elemdos
Copy link
Copy Markdown
Collaborator

@elemdos elemdos commented Jun 2, 2026

Summary

  • Swap @tailwindcss/postcss@tailwindcss/vite so the Tailwind v4 entry never goes through Vite's postcss-import (broken on vite 8).
  • Add an overrides block pinning vite to ^7.3.3 and @sveltejs/vite-plugin-svelte to ^6.2.4 so Vite 8's lightningcss-by-default minifier doesn't reject @keyframes inside Svelte scoped CSS.
  • Delete the now-unused postcss.config.cjs.

Two vite 8 regressions break docker compose build against Dockerfile:

  1. vite 8's bundled postcss-import can't resolve bare specifiers, so @import 'tailwindcss'; errors with ENOENT for /app/tailwindcss.
  2. vite 8 defaults cssMinify to lightningcss, which rejects @keyframes inside Svelte's scoped CSS selectors.

Originally landed on fix/vite8-tailwind-postcss-import but stayed unmerged; this branch ports the same fix onto current main so the recent dependabot bumps (sveltekit 2.61.1, tiptap 3.24.0, pocketbase 0.27.0, tailwindcss/postcss 4.3.0) are preserved.

Reported by Juri on Discord.

Test plan

  • rm -rf node_modules package-lock.json && npm install succeeds
  • npx svelte-kit sync && npx vite --config common.config.js build && npx vite --config app.config.js build all succeed locally with vite 7.3.5
  • CI Docker build green

Summary by CodeRabbit

  • Chores
    • Updated Tailwind CSS build integration to streamline the styling pipeline.
    • Pinned build tool versions for improved consistency and stability.

Two bugs in vite 8 break the SvelteKit Docker build:

1. vite 8's bundled postcss-import can't resolve bare specifiers, so
   `@import 'tailwindcss';` errors with ENOENT for `/app/tailwindcss`.
2. vite 8 defaults cssMinify to lightningcss, which rejects @Keyframes
   inside Svelte's scoped CSS selectors.

Use @tailwindcss/vite (canonical Tailwind v4 + Vite setup) so the
Tailwind entry never touches vite's broken postcss-import. Pin vite to
^7.3.3 and vite-plugin-svelte to ^6.2.4 via npm overrides to dodge the
lightningcss minify regression until upstream lands a fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 2, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f034c977-d9db-4c76-afe0-b924cb69800c

📥 Commits

Reviewing files that changed from the base of the PR and between 5f7dc57 and 6583a84.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (3)
  • app.config.js
  • package.json
  • postcss.config.cjs
💤 Files with no reviewable changes (1)
  • postcss.config.cjs

📝 Walkthrough

Walkthrough

The PR migrates the Tailwind CSS integration from the PostCSS plugin to Vite by adding the @tailwindcss/vite dependency, importing and registering the Vite plugin in app.config.js, pinning Vite and SvelteKit plugin versions, and removing the PostCSS configuration.

Changes

Tailwind Vite Plugin Integration

Layer / File(s) Summary
Tailwind Vite dependencies and version constraints
package.json
@tailwindcss/vite is added at ^4.3.0; vite and @sveltejs/vite-plugin-svelte are pinned to ^7.3.3 and ^6.2.4 respectively via an overrides block.
Vite configuration with Tailwind plugin
app.config.js
The Tailwind CSS Vite plugin is imported and registered in the Vite plugins array alongside the existing SvelteKit plugin.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Poem

🐰 Tailwind now flows through Vite's swift streams,
No PostCSS config haunts our dreams—
One plugin to bind them all with care,
Build times faster, lighter air! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: switching to @tailwindcss/vite and pinning vite^7 to fix Docker build issues, directly addressing the primary objective.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/docker-build-vite8-on-main

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.

@elemdos
Copy link
Copy Markdown
Collaborator Author

elemdos commented Jun 2, 2026

Duplicate of #1150 — force-pushed the rebased fix there. Closing this.

@elemdos elemdos closed this Jun 2, 2026
@elemdos elemdos deleted the fix/docker-build-vite8-on-main branch June 2, 2026 03:16
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