I am trying to increase the performance of my site by getting past render blocking css. Only one file seems to be a problem, and thats a minified bootstrap stylesheet I get from a CDN. I have tried multiple different approaches, but nothing has worked. I would like to have a copy of the Bootstrap CDN stylesheet in my project, and edit it so it only has the css I am currently using on my site. Is there a way to serialize your site, and remove any styles from a stylesheet that aren't being used ? I have read about several different takes on it, but most of them don't work in browsers besides Chrome, and break when hitting media queries in the stylesheet.
There are multiple critical css tools on github and npm. The biggest one is probably https://github.com/addyosmani/critical - you can define a grunt build task for doing exactly what you want: open a html page and figure out which styles are used, then create a stylesheet based on that.
Yes most of these tools do have some issues with advanced css stuff, but this one seems to support mediaqueires. There are many issues being discussed on that github repo but they seem to be for very specific things so one can count that as a good sign - it’s popular and maintained.