I wasn't sure where to open this issue, so I decided to here. Please update the issue info or redirect me to a better place for this discussion (I feel like this has to have come up somewhere else!). Thanks!
So the crux of this issue is I want to to use the theme breakpoints as media queries when including CSS files in the library. To setup breakpoints in a theme you do:
my_theme.global:
label: global
mediaQuery: ''
weight: 0
multipliers:
- 1x
my_theme.narrow:
label: narrow
mediaQuery: 'all and (min-width: 740px) and (min-device-width: 740px)'
weight: 1
multipliers:
- 1x
my_theme.normal:
label: normal
mediaQuery: 'all and (min-width: 980px) and (min-device-width: 980px)'
weight: 2
multipliers:
- 1x
- 1.5x
my_theme.wide:
label: wide
mediaQuery: 'all and (min-width: 1300px)'
weight: 3
multipliers:
- 1x
- 2x
To setup a CSS file as a library you use the following setup:
global-styles:
version: VERSION
css:
theme:
css/global.css: {}
css/narrow.css: {media: all and (min-width: 740px) and (min-device-width: 740px)}
css/normal.css: {media: all and (min-width: 980px) and (min-device-width: 980px)}
css/wide.css: {media: all and (min-width: 1300px)}
I would like to use the breakpoints as the "media" option for the CSS files. For example:
global-styles:
version: VERSION
css:
theme:
css/global.css: {}
css/narrow.css: {breakpoint: narrow}
css/normal.css: {breakpoint: normal}
css/wide.css: {breakpoint: wide}
Is this being instituted in core at all? Are there any plans to? I haven't been able to find anything.
Postponed: needs info
11.0 🔥
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
Moving to asset library system.
Not sure about this one, because it would result in a lot more aggregates and hence http requests. e.g. if a file has a breakpoint specified and is in between two files that don't, you would end up with three aggregates instead of one. The extra overhead of the http requests would then counteract the size saving.