Skip to content

feat: adopt Tailwind CSS utility classes for styling - #6

Draft
nicomiguelino wants to merge 1 commit into
developmentfrom
chore/adopt-tailwind-css
Draft

feat: adopt Tailwind CSS utility classes for styling#6
nicomiguelino wants to merge 1 commit into
developmentfrom
chore/adopt-tailwind-css

Conversation

@nicomiguelino

Copy link
Copy Markdown
Contributor

Summary

  • Rework index.html to use Tailwind utility classes (arbitrary-value bracket syntax for exact px/rem/color values) instead of custom CSS classes, keeping visual appearance and behavior unchanged.
  • Slim src/css/style.css down to just the design-system import (@layer theme, base, utilities; + the three @imports), per the standard pattern.
  • Bump @screenly/edge-apps to ^1.3.0 (unpublished; ships Tailwind support).
  • The .tradingview-widget-container / .tradingview-widget-container__widget class names on the widget root (TradingView's own embed convention, targeted by their injected script/CSS) are left untouched verbatim; only w-full h-full utilities were added alongside them for sizing, which this app's own CSS previously provided.

Reference PRs used as the pattern for this migration:

Test plan

  • bun run type-check — passes
  • bun test src/ --path-ignore-patterns='**/*.live.test.ts' — 22 pass / 0 fail (no test asserts on CSS class names, only on element IDs and inline style.display, so nothing needed updating)
  • bun run build — succeeds (pre-existing import.meta/iife warnings from @screenly/edge-apps dev-tools are unrelated to this change)
  • bun run screenshots — this repo has never had e2e/screenshots.spec.ts wired up (unlike clock-app/weather-app), so the script fails with "No tests found" even on main/development before this change. This is a pre-existing gap, out of scope for this PR.
  • Manual visual check instead: built the app, served it via vite preview, and used an ad hoc Playwright script (mocking screenly.js the same way the library's screenshot helpers do) to confirm the app's own chrome renders correctly — full-bleed dark (#131722) background behind the TradingView widget, and the error-screen card (with the exact same gap/padding/typography as before) when forcibly triggered. The embedded TradingView chart itself rendered live and correctly in this sandbox (network access was available), confirming the widget container sizing utilities work as expected.

Notes

  • development and origin/main had diverged (development is missing main's icon-update commits Add App Icon #3; main is missing development's @screenly/edge-apps bump commit chore(deps): bump @screenly/edge-apps to 1.2.1 #4). A fast-forward merge wasn't possible, so per migration instructions I left that divergence alone and based this branch on development as-is, rather than forcing a merge.
  • Nothing belonging to the third-party TradingView widget/iframe was touched — only this app's own chrome/layout CSS was converted.

Rework index.html to use Tailwind utility classes instead of custom CSS
classes, keeping visual appearance and behavior unchanged. Slim the CSS
entry point down to just the design-system import. Bump
@screenly/edge-apps to ^1.3.0 for upcoming Tailwind CSS support.

No screenshots/* included: this app never had e2e/screenshots.spec.ts
wired up (bun run screenshots fails with "No tests found" even on
main), so there was nothing to regenerate. Manually verified the app's
own chrome (background, error screen) renders pixel-identical to
before via an ad hoc Playwright check against the built preview.
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