Improve sizes handling for mobile-first
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
As v.0.4.9, we need to specify a size for every type of screen even if the size is the same.
E.g. for an image that is always 100% of the screen : sizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw 2xl:100vw"
If not, only the srcset of the specified screen will be generated.
We could automatically generate other srcset with a mobile-first rule.
For exemple:
If we specify only sizes="100vw", we loop through every screens size to generate appropriate srcset.
If we specify sizes="100vw xl:400px", we loop through every screens size under xl to generate srcset with screen width and then for xl and larger we generate 400px srcset.
etc
Would it make sense ?
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
No file or test is named. Start by locating the existing sizes parsing and srcset generation entry points, then trace how values such as 100vw and xl:400px are handled. Done means mobile-first rules generate srcsets for every relevant screen size while preserving the explicitly specified breakpoint behavior, with tests covering the examples in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100