css variable/pseudo element doesn't update between pages

[thiskevinwang]

🐛 Bug

CSS Variable in <style jsx>... doesn't update between pages

Tiny Demo Repo + Deployment

• https://github.com/thiskevinwang/next-content-bug
• https://next-content-bug.vercel.app/

Expected

The UI should display

on /

• HOME HOME

and on /other

• OTHER OTHER

Observed

The CSS variable / pseudo-element doesn't update on route change

on /

• HOME HOME

on /other

• HOME OTHER

Notes

A Browser-refresh updates the --content css variable accordingly

Workaround

It's possible to fix this issue if the const itself has a different name, per page

// index.js
const one = "HOME"

// other.js
- const one = "OTHER"
+ const two = "OTHER"

but this seems weird/unnecessary