- Issue created by @woldtwerk
Media Query Level 5 allows usage of custom media queries. https://www.w3.org/TR/mediaqueries-5/#custom-mq
I think this feature would pair very nicely with Drupals Breakpoint module.
Replace custom media queries in CssOptimizer with values defined by breakpoints.yml files
unocss.md:
label: md
mediaQuery: "all and (min-width: 768px)"
weight: 0
multipliers:
- 1x
- 2x
group: un-screen
unocss.lg:
label: lg
mediaQuery: "all and (min-width: 1024px)"
weight: 0
multipliers:
- 1x
- 2x
group: un-screen
@media (--un-screen-md) {
:root {
background-color: red;
}
}
@media (--un-screen-lg) {
:root {
background-color: blue;
}
}
becomes:
@media all and (min-width: 768px) {
:root {
background-color: red;
}
}
@media all and (min-width: 1024px) {
:root {
background-color: blue;
}
}
This would allow to reference breakpoints defined in Drupal in our css files.
Active
11.0 🔥