search

open-design-kit / opendesignkit

Open Design Kit is a living toolkit for designing with distributed collaborators.
http://opendesignkit.org
Creative Commons Attribution 4.0 International
194 stars 79 forks source link

Critical css not minified? #279

Open davelab6 opened 6 years ago

davelab6 commented 6 years ago

I see the critical.css file that is minified but I couldn't see the nonminified source for that?

davelab6 commented 6 years ago

@iamjessklein I wonder if you might be able to answer this :)

susanjrobertson commented 6 years ago

I'm fairly sure that @wilto set something up to grab the critical.css from the non critical file, but I'm not sure exactly what he did.

davelab6 commented 6 years ago

OK :)

Wilto commented 6 years ago

Actually, I think this one was @deathbearbrown. Absent Grunt or Gulp or the like, it looks like we’re just committing the generated/minified critical styles—I’m not sure what we used to extract them.

deathbearbrown commented 6 years ago

I seriously do not remember...

deathbearbrown commented 6 years ago

You can see the non minified version in the source history https://github.com/open-design-kit/opendesignkit/commit/c4dbf3126e0e2fdcc5ef34537103daa2e45d8993#diff-4920e6deb4b48af59d23169b190bb2c2

davelab6 commented 6 years ago

Thank you all :)

iamjessklein commented 6 years ago

@davelab6 can we close this ticket or is there more info that you need?

xuv commented 6 years ago

@deathbearbrown I have a question on that particular commit you are pointing to. Indeed the CSS there is less minified. But it's still in a form that looks like compressed to me. Now, we can certainly work from there. But if you remember a little bit the context there, that could be useful...

Another question I would have is what is the difference between critical and non-critical, if you remember. Thx.

toolness commented 6 years ago

Another question I would have is what is the difference between critical and non-critical, if you remember.

This is a very good question and I think helps answer this post!

I believe "Critical CSS" refers to the practice of taking only the most important CSS from a stylesheet and putting it into the <head> of a webpage as an inline style, at which point the rest of the CSS can be loaded later on. This improves page performance, because the browser doesn't have to block on loading a big stylesheet before showing the page.

I think the crux here is that "non-critical CSS" might actually be a misnomer in this case: I could be mistaken, but non-critical.css actually appears to be both the critical CSS and the rest of the styles on the page. You can verify this by finding any styles in critical.css and noting that they are actually also defined somewhere in non-critical.css.

So really, non-critical.css should perhaps be renamed to all-styles.css. The non-minified critical CSS is inside that file, and some part of the build process extracts that critical CSS, minifies it, and puts it in critical.css.