This repository was archived by the owner on Feb 18, 2022. It is now read-only.
This repository was archived by the owner on Feb 18, 2022. It is now read-only.
Investigate support for media-query scoped properties #9
Closed
Description
See: reworkcss/rework-vars#17. I still think this is inherently problematic (like plugins that consolidate media queries), but worth exploring to get an answer.
Example input:
:root { --fontSize: 2em; }
.Section { font-size: var(--fontSize); }
@media (min-width: 64em) {
:root { --font-size: 3em; }
}
Example output:
.Section { font-size: 2em; }
@media (min-width: 64em) {
.Section { font-size: 3em; }
}
Complications could include:
- inlined
@import
statements in media queries - not knowing the relationship between different media queries (might generate extra CSS rules that aren't needed, e.g., what if the MQ is
@media screen (min-width:0)
?) - generating large amounts of extra CSS
- specificity/cascade issues - moving/generating rules is always going to hit the problem where earlier styles are unintentionally overridden.
<div class="One Two">Text</div>
Input:
:root { --fontSize: 2em; }
.One { font-size: var(--fontSize); }
.Two { font-size: 6em; }
@media (min-width: 64em) {
:root { --font-size: 3em; }
}
Output (notice One
now overrides Two
, which it would not with a native solution):
.One { font-size: 2em; }
.Two { font-size: 6em; }
@media (min-width: 64em) {
.One { font-size: 3em; }
}
Metadata
Metadata
Assignees
Labels
No labels