Support pseudo selectors and media queries
- Dominant language
- TypeScript
- Stars
- 414
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
Pseudo selectors and media queries are an important part of CSS, but cannot be inlined with `style` props.
## Details
As a solution, a `` element with deterministic class name should be used, as suggested in #4. Later, rules may be hoisted in the `<head>` element with [React Portals](https://reactjs.org/docs/portals.html). Hashing makes it possible to define each rule only once and reuse it over time.
Also, consider [warning developers](https://github.com/styled-components/styled-components/blob/94df8bb57c8ba01cd33268b65df93499a7961cb2/packages/styled-components/src/utils/createWarnTooManyClasses.js) when too many classes are created dynamically.
Contributor guide
Research direction
No file, test, or entry point is named. Begin by reading issue #4 and the linked React Portals and styled-components warning references, then map the existing styling implementation. Done means pseudo selectors and media queries work through deterministic, reusable classes and a style element, with a decision on dynamic-class warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100