Skip to content

fix(ui): replace dead ui.contentstack.com CDN styles with local sources - #1130

Open
umesh-more-cstk wants to merge 1 commit into
devfrom
bugfix/ui-legacy-cdn-shim
Open

fix(ui): replace dead ui.contentstack.com CDN styles with local sources#1130
umesh-more-cstk wants to merge 1 commit into
devfrom
bugfix/ui-legacy-cdn-shim

Conversation

@umesh-more-cstk

@umesh-more-cstk umesh-more-cstk commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

🔗 Jira Ticket

CMG-1098


📋 PR Type

  • 🐛 Bug Fix

📝 Description

What changed?

  • Removed the three dead ui.contentstack.com CDN tags from ui/index.html (contentstack.min.css, bootstrap.min.js, contentstack.min.js).
  • Added bootstrap@^5.3.6 as a local dependency and import bootstrap-grid.min.css + bootstrap-utilities.min.css in App.tsx, which covers the grid/utility half of what the CDN stylesheet provided (d-flex, vh-100, row/col-*, spacing).
  • Added ui/src/scss/legacy-cdn-shim.scss for the non-utility rules that had no other source — Contentstack's brand layer: anchor/link colour, .btn base, .pt-6, .card heading colour, .body-4/.body-6, and .link-basic-icon (its arrow icon inlined as a data URI so nothing external is needed).
  • All three imports sit above the venus stylesheet, exactly where the CDN <link> used to be, so venus keeps winning the same specificity conflicts it won before.

Why?

https://ui.contentstack.com/contentstack.min.css now returns HTTP 402 (DEPLOYMENT_DISABLED). The app was loading its grid, utility, and brand styles from that host at runtime, so with it down the UI loses layout and Contentstack styling entirely. This restores the same rules from local sources.


🧩 Affected Areas

  • ui — React frontend

🧪 How to Test

  1. cd ui && npm ci && npm run dev
  2. Load the app with the network tab open — confirm there are no requests to ui.contentstack.com and no 402s.
  3. Walk the main screens (home / migration steps / cards) and compare against the previous build.

Expected result: layout and styling are unchanged from before the CDN went down; no external requests to ui.contentstack.com.


📸 Screenshots / Recordings

Before After

✅ Author Checklist

  • Branch follows naming convention: feature/, bugfix/, or hotfix/ + 5–30 lowercase chars
  • Jira ticket linked above
  • Self-reviewed the diff — no debug logs, commented-out code, or TODOs left in
  • .env / example.env updated if new environment variables were added — n/a
  • No sensitive credentials or secrets committed
  • npm run build passes locally in ui
  • New tests written (or not applicable) — n/a, CSS-only restoration of previously CDN-served rules

👀 Reviewer Notes

  • The shim's declarations are copied verbatim from an archived copy of the dead stylesheet and limited to classes this app actually uses — the intent is to be visually neutral, not to restyle anything.
  • .btn is only used by one element (<Link className="btn primary-btn"> on Home, wrapping a venus <Button>), where it contributes only padding. It's a reasonable thing to delete separately; it's restored here so this PR stays visual-neutral.

https://ui.contentstack.com/contentstack.min.css now returns HTTP 402
(DEPLOYMENT_DISABLED), so the app lost its grid, utility and brand styles
at runtime.

- drop the three dead CDN tags from index.html
- add bootstrap@^5.3.6 and import bootstrap-grid + bootstrap-utilities,
  covering the grid/utility half of the old stylesheet
- add scss/legacy-cdn-shim.scss for the non-utility brand rules that had
  no other source (link colour, .btn base, .pt-6, .card headings,
  .body-4/.body-6, .link-basic-icon with its arrow inlined as a data URI)

All imports stay above the venus stylesheet, where the CDN <link> used to
sit, so venus keeps winning the same conflicts it won before.
@umesh-more-cstk
umesh-more-cstk requested a review from a team as a code owner July 31, 2026 13:37
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.

2 participants