zmoazeni / csscss

A CSS redundancy analyzer that analyzes redundancy.
http://zmoazeni.github.io/csscss/
MIT License
2.92k stars 151 forks source link

Does this support Less? #10

Closed hallodom closed 11 years ago

zmoazeni commented 11 years ago

@hallodom csscss doesn't currently support less. I'm not sure if it will. Less depends on node.js and I don't have a great idea on how to resolve that dependency chain. Sass was an easy win since that was already in ruby.

Hopefully running against the css result will be good enough. It will also download the css from http if that helps.

That said, I'd welcome some pull requests or ideas on how to add less support without it becoming an installation or maintenance burden.

hallodom commented 11 years ago

Hey thanks for the response. Shame it doesn't support less, a lot of tools are missing around Less like this. If I had more experience with node I'd be sure to give it a go but unfortunately have only briefly played with it.

Great tool though! Still helps on the outputted css but doesn't have much luck on minified CSS files where all selectors are on one line, get the following error:

Had a problem parsing the css at line: 1, column: 1 Run with CSSCSS_DEBUG=true for verbose parser errors

hallodom commented 11 years ago

^ Actually just tried it on another single line minified css file and it worked :/ must be something up with my CSS!

zmoazeni commented 11 years ago

@hallodom it could still be a bug in the parser. If it is good in a validator please send me a snippet that csscss breaks on so I can fix it.

hallodom commented 11 years ago

Hi, I ran both the one which worked and the one which didn't work in the validator and they both fail but one worked in csscss and the other didn't:

This one worked in csscss: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.landofjoy.co.uk%2Fwp-content%2Fthemes%2Flandofjoy%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

This one did not: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.maitreyarelictour.com%2Fwp-content%2Fthemes%2Frelic-tour%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

hallodom commented 11 years ago

Sorry I can't be of much more help

zmoazeni commented 11 years ago

Looks like the issue is with css expressions.

.icon-glass{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ' ')}

This is the first I've seen css expressions. Sounds like they were only available in IE versions up to 8, so I won't extend the parser for them.

hallodom commented 11 years ago

Cool, that's from Font Awesome stuff.

http://fortawesome.github.io/Font-Awesome/#icon/icon-glass

hallodom commented 11 years ago

Thanks for taking a look!

Mte90 commented 11 years ago

i have see this http://rubygems.org/gems/less can be help for resolve this issues?

zmoazeni commented 11 years ago

@Mte90 Oh thanks. I didn't see that. Perhaps I can use it in the same way I'm using sass and compass. Thanks for pointing it out!

tobiastom commented 11 years ago

+1 for less support.

eddievlagea commented 11 years ago

IMHO it's better to run it against the final CSS file. I have 14 different .less files in the project that I'm currently working on and running csscss against them would be such a hassle.

hallodom commented 11 years ago

I assumed that csscss would be smart enough to figure out the imports and tell you what duplicates are in which less files?? Haven't tried it with Sass so not sure if it works this way.

zmoazeni commented 11 years ago

@creativityhurts @hallodom I'll experiment with hitting the LESS preprocessor first. In theory you should be able to pass csscss multiple files but I think I found an issue with that in #16

tobiastom commented 11 years ago

@creativityhurts With the final result you would again have the problem that sourcemaps try to solve. You get an error in a file, but do not know which file (and line) is really references.

jasonsee commented 11 years ago

+1 LESS support as well.

zmoazeni commented 11 years ago

For what it's worth, source maps will also be an issue for displaying line numbers which has been a recurring request.

Is LESS much like SASS in that it translates source files into a 1:1 css file? (ignoring included partials stuff). It might still straightforward to implement, but yeah the line numbers are going to be awkward. Reminds me of debugging a javascript error in the browser and having to flip back to the coffeescript source.

jasonsee commented 11 years ago

Indeed. And my current workflow is to segment out classes by sections; in other words the same class might appear three or more times in the same LESS file: In positioning section, typography section and presentation section. I could see how line number references would make this more valuable to me. Once the LESS is minified, it compiles all classes and mixins - making the line numbering obsolete.

mekka commented 11 years ago

I just added LESS support and sent Zach a pull request. Feel free to give it a whirl. It would be great to get some some real world testing to know if this works for you guys.

zmoazeni commented 11 years ago

All set in master and will go out in the next release. Thanks @mekka!

zmoazeni commented 11 years ago

Released in v1.2.0

hallodom commented 11 years ago

Awesome thanks @mekka!

tobiastom commented 11 years ago

Thank you. I'll try it as soon as possible.