fix(vite-plugin-angular): remove duplicate hmr option

[benpsnyder]

PR Checklist

Related:

• Tailwind stylesheet pipeline overhaul analogjs/analog#2226
• RFC: Tailwind stylesheet pipeline overhaul analogjs/analog#2229
• Tailwind root stylesheet support analogjs/analog#2227

Affected scope

• Primary scope: vite-plugin-angular
• Secondary scopes: platform, storybook-angular, docs, create-analog, nx-plugin

Recommended merge strategy for maintainer [optional]

• Squash merge
• Rebase merge
• Other

What is the new behavior?

This PR is now the narrow Tailwind follow-up to Tailwind stylesheet pipeline overhaul analogjs/analog#2226 and the closeout direction from RFC: Tailwind stylesheet pipeline overhaul analogjs/analog#2229.

Against the current analogjs/alpha tip, the intended branch diff now does three things:

• removes the duplicate Analog hmr option from @analogjs/vite-plugin-angular, @analogjs/platform, and @analogjs/storybook-angular, and keeps liveReload as the Angular compilation/HMR flag
• makes the Angular plugin rely on Vite's server.hmr setting for transport behavior instead of exposing a second Analog-owned hmr flag
• narrows the Tailwind docs to the Analog-owned integration seam while keeping the low-risk generator/plugin-order cleanup (analog() before tailwindcss())

The docs no longer present a dual-plugin Tailwind install as an Analog-owned contract. They now point readers to Tailwind's own install docs and only document the extra Analog config needed for Angular component styles:

• tailwindCss.rootStylesheet
• component stylesheet @apply
• automatic @reference injection
• prefixes
• generated plugin order

Current diff in this PR

Live reload / HMR API cleanup:

• packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
• packages/vite-plugin-angular/src/lib/live-reload-plugin.ts
• packages/platform/src/lib/options.ts
• packages/platform/src/lib/platform-plugin.ts
• packages/storybook-angular/src/types.ts
• packages/storybook-angular/src/lib/preset.ts
• related unit test updates for vite-plugin-angular and storybook-angular

Tailwind docs and README cleanup:

• apps/docs-app/docs/integrations/tailwind/index.md
• apps/docs-app/docs/guides/migrating.md
• apps/docs-app/docs/integrations/storybook/index.md
• apps/docs-app/docs/packages/create-analog/overview.md
• apps/docs-app/docs/packages/vite-plugin-angular/css-preprocessors.md
• packages/vite-plugin-angular/README.md
• packages/storybook-angular/README.md

Generator alignment:

• packages/create-analog/template-latest/vite.config.ts
• packages/nx-plugin/src/generators/app/files/template-angular*/vite.config.ts__template__
• scaffold test and snapshot updates for those templates

Test plan

• nx format:check
• pnpm build
• pnpm test
• Targeted verification

Targeted verification run for this version:

• pnpm exec prettier --check on the touched code/docs files
• pnpm nx test vite-plugin-angular
• pnpm nx test storybook-angular
• pnpm nx build platform
• pnpm nx build docs-app

The docs build passed. Docusaurus still reports unrelated pre-existing broken-anchor warnings elsewhere in the site.

Does this PR introduce a breaking change?

• Yes
• No

Breaking change on the current v3 alpha API surface: the duplicate Analog hmr option is removed from the Analog/plugin/Storybook options covered by this PR. Use liveReload for Angular compilation/HMR behavior and Vite's server.hmr for transport configuration.

Other information

This PR should be reviewed as a small follow-up to Tailwind stylesheet pipeline overhaul analogjs/analog#2226, not as a second implementation pass on the Tailwind pipeline itself.

[netlify]

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	792e785
🔍 Latest deploy log	https://app.netlify.com/projects/analog-blog/deploys/69de6d0b3daad400085262e3
😎 Deploy Preview	https://deploy-preview-2204--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	792e785
🔍 Latest deploy log	https://app.netlify.com/projects/analog-app/deploys/69de6d0b0981a0000806c97f
😎 Deploy Preview	https://deploy-preview-2204--analog-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a new Tailwind CSS v4 integration guide and updates multiple documentation pages (docs-app Tailwind guide, create-analog overview, vite-plugin-angular CSS preprocessors doc, and vite-plugin-angular README) to document a supported Tailwind setup (single root stylesheet importing tailwindcss, @tailwindcss/vite enabled in vite.config.ts, postcss.config.mjs using @tailwindcss/postcss, and tailwindCss.rootStylesheet configuration). Updates scaffolding and Vite config templates (create-analog template and nx-plugin Angular templates for v17–v19 and base) to insert analog() earlier in the plugins array, which in several templates results in analog() appearing twice. Corresponding tests were updated to expect analog() before tailwindcss() in generated vite.config.ts outputs.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title does not match the actual changes; the PR is primarily about Tailwind documentation and plugin ordering, not about removing a duplicate HMR option.	Revise the title to reflect the primary focus, such as 'docs: document supported Tailwind v4 setup and align plugin order' or similar, following Conventional Commit style.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, documenting the intent to clean up Tailwind v4 documentation, align Vite plugin ordering, and remove duplicate HMR options.

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[benpsnyder]

@coderabbitai resume

[coderabbitai]

✅ Actions performed

Reviews resumed.

[brandonroberts]

If we need a difference between dev/prod, we shouldn't recommend the @tailwindcss/vite plugin. It should be either/or, not both

[github-actions]

This PR touches multiple package scopes: create-analog, nx-plugin, platform, storybook-angular, vite-plugin-angular.

Please confirm the changes are closely related. Squash merge is highly preferred. If you recommend a non-squash merge, add a brief note explaining why the commit boundaries matter and why this PR should bypass focused changes per package.

[benpsnyder]

@brandonroberts I force-pushed this with rebase merge ready commits. Cleaned it up and refocused it.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/docs-app/docs/integrations/tailwind/index.md`:
- Around line 127-131: Update the "HMR" section to add an explicit
Angular-version caveat: state that Angular HMR support requires Angular v19+ and
that Angular v16–v18 intentionally disable HMR and emit a runtime console
warning; reference the HMR heading in
apps/docs-app/docs/integrations/tailwind/index.md and, if helpful, link or
cross-reference the guidance in apps/docs-app/docs/guides/migrating.md (PR
`#2226`) so readers don’t assume HMR behaves the same across all supported Angular
versions.

In `@packages/vite-plugin-angular/README.md`:
- Line 97: Replace the relative docs link "/docs/integrations/tailwind" in the
README (the markdown link text "Tailwind CSS integration guide") with an
absolute docs URL (e.g.
https://your-docs-site.example/docs/integrations/tailwind) so the link resolves
correctly on GitHub/NPM README renderers; update the markdown link target to the
canonical site URL and verify the live README renders the link correctly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d2615d25-bdd1-4f9c-8523-b85dda81f871

📥 Commits

Reviewing files that changed from the base of the PR and between cf86db8 and 8fb2979.

⛔ Files ignored due to path filters (1)

• packages/nx-plugin/src/generators/preset/__snapshots__/generator.spec.ts.snap is excluded by !**/*.snap and included by packages/**

📒 Files selected for processing (11)

• apps/docs-app/docs/integrations/tailwind/index.md
• apps/docs-app/docs/packages/create-analog/overview.md
• apps/docs-app/docs/packages/vite-plugin-angular/css-preprocessors.md
• packages/create-analog/__tests__/cli.spec.ts
• packages/create-analog/template-latest/vite.config.ts
• packages/nx-plugin/src/generators/app/files/template-angular-v17/vite.config.ts__template__
• packages/nx-plugin/src/generators/app/files/template-angular-v18/vite.config.ts__template__
• packages/nx-plugin/src/generators/app/files/template-angular-v19/vite.config.ts__template__
• packages/nx-plugin/src/generators/app/files/template-angular/vite.config.ts__template__
• packages/nx-plugin/src/generators/app/generator.spec.ts
• packages/vite-plugin-angular/README.md

[benpsnyder]

@brandonroberts good to merge

[brandonroberts]

This is blocked on having both the Vite plugin and postcss plugins.

[brandonroberts]

This should flow through the analog plugin to the Vite plugin.

[brandonroberts]

Having both the Vite plugin and postcss feels like a bad solution. The Tailwind docs mention them as an either/or with the Vite plugin being the primary option.

[brandonroberts]

liveReload and hmr are not mutually exclusive. Keep liveReload as the option

[benpsnyder]

I reworked this to address the review points directly.

• I removed the earlier docs language that treated @tailwindcss/vite + @tailwindcss/postcss as a single supported Analog contract. The new Tailwind guide at apps/docs-app/docs/integrations/tailwind/index.md now starts with Tailwind's own install docs and scopes Analog's docs to the part we actually own: tailwindCss.rootStylesheet, component-style @apply, automatic @reference injection, prefixes, and generator-aligned plugin order.
• I updated the primary config examples to flow through analog({ vite: { tailwindCss: ... } }). I kept the direct @analogjs/vite-plugin-angular example only as the lower-level alternative for users on that package directly.
• I changed the public HMR/live reload docs and option surfaces to keep liveReload as the Analog option and hmr as the compatibility alias. The docs now explicitly say this is separate from Vite's server.hmr, so they are not mutually exclusive. That update is reflected in:
  apps/docs-app/docs/integrations/tailwind/index.md
apps/docs-app/docs/guides/migrating.md
apps/docs-app/docs/integrations/storybook/index.md
packages/storybook-angular/README.md
packages/platform/src/lib/options.ts
packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
packages/storybook-angular/src/types.ts
• I also updated the related normalization/tests so liveReload wins when both liveReload and hmr are provided, while still accepting hmr as the compatibility input.
• I kept the lower-risk generator/template cleanup in place: generated Vite configs now consistently list analog() before tailwindcss(), and the generator tests/snapshots were updated to match.

I also rewrote the package-level docs to match the narrower contract:

• apps/docs-app/docs/packages/create-analog/overview.md
• apps/docs-app/docs/packages/vite-plugin-angular/css-preprocessors.md
• packages/vite-plugin-angular/README.md

Those pages now point people back to Tailwind's install docs for the install path itself, and only document the extra Analog config needed for Angular component styles. If someone only needs Tailwind utilities in templates and global CSS, the docs now tell them to keep the scaffold defaults and skip extra Analog Tailwind config.

Verification I ran on this version:

• pnpm exec prettier --check on the touched docs/code files
• pnpm nx test vite-plugin-angular
• pnpm nx test storybook-angular
• pnpm nx build docs-app

The targeted tests passed, and the docs build passed. Docusaurus still reports unrelated pre-existing broken-anchor warnings elsewhere in the docs site, but there were no new build failures from this change set.

At this point the PR should be much narrower: it no longer tries to define a broader Tailwind installation contract inside Analog docs, and it now matches the liveReload/hmr guidance you called out.