oddbird / oddbird/css-anchor-positioning
Apply polyfill to styles in CSS @imports
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.
When fetching styles to be polyfilled, we currently are not following any @import rules. This means that any anchor positioning-related rules in imported stylesheets will not be polyfilled.
Describe the solution you'd like
Before applying the polyfill, we would need to recursively parse all stylesheets for @import rules.
Alternatively, could we use document.stylesheets to do the initial gathering step for us? I'm unsure if imported stylesheets are included, and we'd need to find a solution that works for Shadow documents as well.
Additional context
#324 only addresses part of the issue, by allowing polyfilled stylesheets to import other stylesheets.
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 by tracing how stylesheets are fetched and how CSS @import rules are currently handled. Compare recursive parsing with using document.stylesheets, including the Shadow documents case, and account for the limitation described in #324. Done means imported stylesheets are gathered and their anchor-positioning rules are polyfilled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100