CodeKit2
CodeKit2 copied to clipboard
bdkjones
Request: UnCSS
How about adding UnCSS ( https://github.com/giakki/uncss ) in the special language section to check and remove if there is unnecessary and unused css in your stylesheets in the post processing. Would be a nice addition to the already present Autoprefixer there. Best regards Ralf
this would be AMAZING. It would allow us to work with big giant css libraries without worrying about the stuff we don't end up using.
It would be awesome if you included uncss in the next release. I understand it wont be easy, but thats what you are known for :)
+1
This is the one thing missing from Codekit for me. Love Codekit and would love to have something like uncss included.
It's been over a year on this request, are there any updates on this you would like to share?
Yea, it's something I'm still considering. I recall looking into the speed gains from "uncss-ing" stuff and finding that they were not statistically significant—doing this makes virtually no difference in page load times. As such, I questioned whether implementing it was a good idea.
I did request this feature only last October, but I have since realised it really has no place in CodeKit (in my opinion). It's not a development tool, but part of a deployment process; it takes a considerable amount of time to run a pass on larger sites.
Not saying a "Let's Get Ready for Production" button wouldn't be cool, but... I just run my stylesheet through Gulp when I need to. Also, like you said, the benefit is negligible unless you use a large "framework" like Bootstrap or Foundation.
Just my five cents, or whatever the expression is. :)
When we're using a large framework like Bootstrap or Foundation, it's always recomended to use it in a modular way. I mean, we can manually include or exclude the module by using @import (we're talking about CSS preprocessor, right?). And by doing that, we're automatically reduce our CSS file size.
What if CodeKit have an unCSS ability? It would be nice but I think it's not necessary. And, I think my +1 on last November is just an impulsivity. :p
We don’t need this feature, If we gzip on the server end, we don’t need to worry about much as long as we compress. And if your CSS does include loads of css that you’re not using, it might be worth looking at the source and manually figuring out why there’s unused CSS.
On 5 May 2015, at 20:23, bravocado [email protected] wrote:
When we're using a large framework like Bootstrap or Foundation, it's always recomended to use it in a modular way. I mean, we can manually include or exclude the module by using @import (we're talking about CSS preprocessor, right?). And by doing that, we're automatically reduce our CSS file size. What if CodeKit have an unCSS ability? It would be nice but I think it's not necessary. And, I think my +1 on last November is just an impulsivity. :p
— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/306#issuecomment-99192936.
Yea, this is roughly the same conclusion I've reached. I do think this thing has a place in a deployment workflow (which might be coming to CodeKit). But as a step in compiling an individual file, I'm less convinced.
When using massive frameworks like Bootstrap or Foundation, I think the right approach is to @import only the modules you need. Foundation makes that super easy. I believe Bootstrap does as well.
I think this discussion is pretty great. After reading through, I'd agree that:
- UnCSS doesn't belong in Dev
- CodeKit is in desperate need of a deployment process
On Wed, May 6, 2015 at 3:01 AM Bryan Jones [email protected] wrote:
Yea, this is roughly the same conclusion I've reached. I do think this thing has a place in a deployment workflow (which might be coming to CodeKit). But as a step in compiling an individual file, I'm less convinced.
When using massive frameworks like Bootstrap or Foundation, I think the right approach is to @import only the modules you need. Foundation makes that super easy. I believe Bootstrap does as well.
— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/306#issuecomment-99203712.
While the comments about deployment vs development are certainly correct, I still think that this feature would be useful. The reason is that there is no such thing as a bug free tool (that's not a knock on uncss, just a fact). So in order to avoid surprises and weird effects, I would like to have the development output as close to possible to the deployment output, and uncss would be part of both. Thanks for your consideration.
Very valid points all around, I agree that UnCSS should be apart of the deployment and it would be great if CodeKit had this as a workflow option. To be honest, I was hoping that this would of been a jumpstart to allow for 3rd party extensions to run as part of the CodeKit process, like sass extensions without the need for the ruby config file.
Codekit has hooks though – Can you not hook a gulp process?
On 6 May 2015, at 15:36, Chris Edwards [email protected] wrote:
Very valid points all around, I agree that UnCSS should be apart of the deployment and it would be great if CodeKit had this as a workflow option. To be honest, I was hoping that this would of been a jumpstart to allow for 3rd party extensions to run as part of the CodeKit process, like sass extensions without the need for the ruby config file.
— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/306#issuecomment-99493706.
After consideration, I don't think that this is desirable in CodeKit. Actually, I'm not sure it's desirable in the way that I built apps at all.
I downloaded the trial yesterday to assess for refactoring some Wordpress/Woocommerce CSS ~5000 lines across ~10 files ( a commercial theme plus... ). PSI mobile is hurting re UnusedCSS above the fold. Ditto minify / concatenate CSS ( yup theres a plugin for that https://wordpress.org/plugins/bwp-minify/ )
I was expecting more CSS pre/post processing to be honest. CodeKit and the UI is great when you don't want to learn / setup NPM, Gulp etc ( nor have the time ) but lacks CSS processing IMHO.
So yes to UnCSS please, but CSSLint, CSSMinify first for plain old CSS files. Envisioning
/sass /css /dist ( the optimised theme style.css )
... unless I am missing some CodeKit functionality ?
@philval
You're describing a very difficult task. Bryan would either need implement a Node environment within CodeKit or instruct users to set it up themselves and hook it into CodeKit. Then CodeKit would need to parse dozens to hundreds of pages, neither of which are static HTML files on disk. If you run it on a limited sample you'll lose styles you need.
I'm a bit out of my depth here talking about the process involved, but from my limited understanding of how it works, it sounds terribly complicated and resource intense. Ultimately we, the developers, need to write flexible and maintainable code. We can't run everything through a mill.
What would be super-cool is PostCSS support. Like GUI configuration for some common tasks, and perhaps even support for custom tasks if you write the snippets. Would still require magic, but an interesting thought.
I must admit this would be a very handy inclusion. I'm currently using it with Gulp but it would be nice to have it all handled in one place.
I was toying around today with uncss (npm install -g uncss) and managed to get it to work with Codekit's hooks. Although not the perfect solution, as we need to pass the url by hand. I tried to create a bash script to loop through the results but got no luck. I'll try via AppleScript later, using http://www.mousedown.net/mouseware/JSON_Examples.html
The hook to app.scss is:
sleep 5
uncss http:/localhost/about/ > ~/Sites/scss/uncss.scss
I'm exporting to .scss as uncss unminify the css. To Codekit will generate uncss.css after that.
It seems that UnCSS is using PostCSS now: https://github.com/giakki/uncss/blob/master/package.json#L44
Would be a great feature, especially if you work with framework (foundation, bootstrap) scss.
@bdkjones What are the chance you could do a YouTube video walkthrough of achieving this utilizing Codekit's hooks? I've seen the docs on hooks but would find a video with Grunt or Gulp examples very helpful. I'm hoping to use this with a Wordpress theme as others have recommended.
You would not use Grunt or gulp. Just install uncss with npm, then take a look at its CLI instructions. Your hook calls the CLI just like if you were running uncss from the terminal. Except that you’ll want to use those special variables CodeKit makes available to Hooks for the input and output file paths.
Sent from my iPhone
On Sep 28, 2017, at 14:39, Jay Holtslander [email protected] wrote:
@bdkjones What are the chance you could do a YouTube video walkthrough of achieving this utilizing Codekit's hooks? I've seen the docs on hooks but would find a video with Grunt or Gulp examples very helpful. I'm hoping to use this with a Wordpress theme as others have recommended.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.