Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: Allow Spliting the CSS bundle by Media Queries

See original GitHub issue

I’m submitting a…

[x ] Feature request

Current behavior

All CSS are bundled in one CSS (with --extract-css tag).

Expected behavior

Laverage a webpack module, to split CSS to multiple bundles like core.css [media-query].css

to generate multiple CSS bundles and load them with <link rel="[media-query].css" media="[media-query]">

to effective load only those CSS rules that are needed (based on the platform)

What is the motivation / use case for changing the behavior?

Better code splitting - load performance, smaller “rendering gap”.

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

trotylcommented, Nov 10, 2018

Component styles has nothing to do with the css bundle, they’re used as JavaScript string and being processed at runtime.

1reaction

VagrantAI-ccommented, Nov 9, 2018

So, this is a pretty valuable feature, since google search now relies on site speed

Top Results From Across the Web

Using media queries - CSS: Cascading Style Sheets | MDN

Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such...

Combine CSS files by using media queries breaks CSS - Drupal

When 'Combine CSS files by using media queries' is turned on, Advagg produces the correct amount of CSS files, but only displays my...

https://www.presidio.gov/Shared%20Documents/Menu/s...

scss/_root.scss","dist/css/bootstrap.css",". ... scss/_media.scss",". ... n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n ...

A Practical Guide to CSS Media Queries - Stack Diary

CSS Media queries - @media - allow you to style multiple versions of a single site depending on the type of device on...

How to split media queries under webpack config?

I had no luck searching for webpack config that can split queries or at least let me manually specify which css entry should...