oddbird / oddbird/css-anchor-positioning
Allow original styleheet to remain in head
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 493
- Forks
- 18
- Avg merge
- 12h 37m
- Merged PRs (30d)
- 5
Description
Is your feature request related to how this polyfill works? Please describe.
Thanks for this great polyfill (and others)! This is definitely not a bug in the package, but I'm trying to figure out how to make this polyfill work with turbo. Since turbo tracks the contents of the head and adds/removes elements on changes (or does a full page reload if configured), this seems to break the polyfill.
I made a minimal reproduction with some of the options I explored: https://github.com/robbevp/anchor-polyfull-turbo
Describe the solution you'd like
Would it be an option to not remove the original link-element once it is polyfilled? I would think that as long as the link-element is above the inline styles in the head, that the polyfilled styles would be used rather. (But I might be missing something here)
If the original element was left in the head, we could just not use data-turbo-track at all and both the original and polyfilled styles would be in the head. (We'd need another way to track when the assets changed and we actually need a full page reload, but I'm sure that is solvable in some way)
I imagine that this also means that the polyfill needs to track what elements were already transformed and skip those when the function runs again
Describe alternatives you've considered
In my reproduction, I think using data-turbo-track="dynamic" and re-applying the polyfill after every navigation comes closest, but this seems like a lot of redundant work. I think we could limit the amount of work the polyfill would need to do on every navigation, by placing all styles using anchor in their own stylesheet and limiting the polyfill to those)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal reproduction, anchor-polyfull-turbo, and compare its Turbo navigation behavior with the polyfill's handling of original link elements. Define how original stylesheets should remain in the head, how already transformed elements are recognized, and how repeated runs avoid redundant work; the issue names no repository files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100