zmoazeni/csscss

A CSS redundancy analyzer that analyzes redundancy.

csscss's Issues

Asset pipeline / Sprockets support

Wouldn't it be nice if the gem was just able to remove all redundancy from from all stylesheets in the final compiled css file? Maybe that approach would be more usable / effortless, instead of the manual scan in each file.

Find unused CSS

IT will be a great add-on to be able to specify an HTML and a CSS, and allow the script to tell which bits of CSS are unused in that HTML.

Of course it cannot handle partials in rails, or other framework specific use-cases.

But one can still live with the entire source of the result file and the included CSS file/files

Bourbon support in Rails project

When parsing scss files referencing the bourbon mixin, I receive error:

File to import not found or unreadable: bourbon. (Sass::SyntaxError)

SASS/SCSS parsing

This would be a fantastic addition to the toolkit if it parsed SASS/SCSS files. Clearly we'd have to exclude things like looping, etc.

What about checking for just duplicated rules?

I personally disagree with csscss's implied suggestion that I refactor
something like

h1 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

h2 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h2.png) no-repeat right top;
}

to

h1, h2 {
    padding: 2px 0px;
    margin: 2px 0px;
    background-repeat: no-repeat;
    background-position: right top;
}

h1 {
    background-image: url(../img/h1.png)
}

h2 {
    background-image: url(../img/h2.png)
}

As stylesheets get more complex, it becomes harder to determine
all the styles for a given selector. I would rather keep all the properties for
each selector together, and use a preprocessor like Less or SCSS/Sass to
eliminate the duplication via variables. However, csscss is silent with input
like this:

h1 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

h1 {
    padding: 6px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

I'd like to know that I have some redundant declarations for the same
selector, as well as a conflicting declaration.

Are there plans for csscss to handle both these cases, or am I looking
for a different kind of tool?

`gem_original_require': no such file to load -- json (LoadError)

Installed on Ruby 1.8.7 & Mac OS X 10.7.5, I get this error when trying to use csscss

/Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `gem_original_require': no such file to load -- json (LoadError)
    from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `require'
    from /Library/Ruby/Gems/1.8/gems/csscss-1.0.0/lib/csscss.rb:3
    from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `require'
    from /Library/Ruby/Gems/1.8/gems/csscss-1.0.0/bin/csscss:3
    from /usr/bin/csscss:23:in `load'
    from /usr/bin/csscss:23

Implement "--require path/to/file.rb" to allow the user to customize requires/setup

Related to #40 (sort of).

Not sure how high priority this should have, but the ability to in the call to the gem give a number of gems that are being used in the file(s), like the following:

csscss --compass --gems [breakpoint, bourbon, sass-getunicode]

This would for instance be useful if one does what I do: compile Sass through Grunt. I don't have a config.rb, all of my options are set in my Gruntfile.js, so the theory is that if there was support for supplying required gems, grunt-csscss could fetch requirements from the file.

Installation fails with openssl error

$ gem install csscss
ERROR: Loading command: install (LoadError)
cannot load such file -- openssl
ERROR: While executing gem ... (NoMethodError)
undefined method `invoke_with_build_args' for nil:NilClass

I do have openssl installed

My ruby version
$ ruby -v
ruby 2.0.0p111 (2013-04-08 revision 40208) [x86_64-linux]

Add option to not expand mixins in SCSS

When run on SCSS mode, CSSCSS expands mixins before running the redundancy check. For instance, two of my selectors both include three of the same mixins, which end up expanding into 23 rules, and CSSCSS reports 25 shared rules between them.

I would think that using mixins should also count as having eliminated redundancy. A simple solution would be to ignore them, or more ideally the redundancy check could treat mixins just as a normal rule, so that it could detect using the same set of mixins in multiple places as redundancy.

zmoazeni on HN:

My initial opinion is that even though your SCSS code is consolidated, the resulting CSS code is still duplicated all over the place. To me, that is a code smell. Particularly when I need to debug from the web developer tools.

Even though SCSS mixins end up being duplicated in the compiled CSS file, I think that it is more important to make the source code more readable and object-oriented. Consider the CSS to make text unselectable. This ends up being seven rules due to vendor prefixes. The three options for dealing with this style are:

1. Add a class "unselectable". This is an okay solution but it breaks semantic CSS and the "unselectable" class ends up proliferating all over your markup.
2. Make a gigantic CSS selector that selects everything that you want to be unselectable by class or ID. This is obviously untenable in a large project.
3. Add an "unselectable" mixin that is included in every element style that should be unselectable. This is the best solution because it keeps style in the CSS file where it belongs, promotes modularity, and allows chains of mixins, for instance making the primary button mixin automatically include the unselectable mixin.

It is true that the resulting CSS code ends up duplicated. I don't think it's a code smell because I consider the CSS output from SCSS to be akin to the output from a C compiler: necessary for things to work, but it doesn't have to be pretty. I'll admit there is a performance impact, but a complementary tool like CSSO should be able to deal with that.

I'm not sure why duplicated rules would be a problem in a web debugger. I would think it would actually be beneficial since you can tweak the styles for individual elements more easily, while in a deduplicated setting tweaking one element would affect others that happen to share the style.

Output in Windows

{←[0;31;49m#comments←[0m} AND {←[0;31;49m.page-template-default #content .hentry
, .page-template-template-fullwidth-php #content .hentry,
.single #content .hentry←[0m} share ←[0;31;49m6←[0m rules

Problem parsing inline base64 encoded images

.test {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACECAYAAABRaEHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUeNqkUjESwCAIw+T/X/UHansdkLTQDnXgCAHNEW2tZbDz/Aq994bzqoY5Z8wEwiEcmmfwiRK+EGOMTVBrtz4mY9kEAyz6+E3sJ7MWBs1PaUy1lHLLmgTqElltNxLiINTBbWi0Vj5DZC9CaqZEOwQYAPhxY/7527NfAAAAAElFTkSuQmCC);
}

gives

Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 1 char 1.
- Expected at least 1 of COMMENT / NESTED_RULESET / RULESET at line 1 char 1. - Expected one of [COMMENT, NESTED_RULESET, RULESET] at line 1 char 1.
|- Failed to match sequence (SPACE? '/' (!'/' .){0, } '_/' SPACE?) at line 1 char 1.
| - Expected "/_", but got ".t" at line 1 char 1. |- Failed to match sequence ('@' [^{}]{1, } '{' (COMMENT / RULESET){0, } '}' SPACE?) at line 1 char 1. | - Expected "@", but got "." at line 1 char 1.
\- Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 2 char 38. - Expected "}", but got "b" at line 2 char 38.

Write up CONTRIBUTING.md

I have some specific things that I'd like PRs to hit. I should document that so people have an idea pre-review.

Unable to parse jQuery UI.

Error is:

$ export CSSCSS_DEBUG=true
$ csscss -v jquery-ui.css 
Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 798 char 52.
`- Don't know what to do with "*/;\n\tfont-" at line 798 char 52.

Example properties which cause the parse error:

.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;     
    font-size: 1.1em/*{fsDefault}*/;
}

Steps to reproduce:

• Grab the latest stable jQuery UI
• Unzip and cd to themes/base
• run the csscss tool.

@import rules aren't respected

Currently csscss doesn't do anything for @import. Need to figure out if we should follow the chain and parse the resulting file too.

Colorized output

It'd be slick to colorize the output so it's easier on the eyes.

Some rules aren't consolidated

I'm still working on an issue where some rules aren't consolidated correctly.

Output file names and line numbers along with selectors

This originally came from #9 from @ahmedelgabri

Lastly, I think the output will be very helpful if it has line numbers, right now it looks like this

{.selector} AND {#selector} share 10 rules
-moz-border-radius: 2px 0px 0px 2px
another: rule;
another-rule;
...

Maybe something like this will be better

L:20 {.selector} AND L:45 {#selector} share 10 rules
-moz-border-radius: 2px 0px 0px 2px
another: rule;
another-rule;
...

I agree that would be helpful. If we do this we'll need to also match up "line n from file x" since we accept multiple files.

csscss quits with ruby error

Terminal output:

 $ csscss CSSCSS_DEBUG=true stylesheet.css
/usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `initialize': No such file or directory - CSSCSS_DEBUG=true (Errno::ENOENT)
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `open'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `open'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:42:in `block in execute'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `map'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `execute'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:15:in `run'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:142:in `run'
    from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/bin/csscss:4:in `<top (required)>'
    from /usr/local/opt/ruby/bin/csscss:23:in `load'
    from /usr/local/opt/ruby/bin/csscss:23:in `<main>'

Ruby/RubyGems version 2

SASS support

Earlier discussion: oyvindeh/ucss#12

Improve non-JSON verbose output.

Currently, when using csscss -v to output to STDOUT, the text comes out like:

{#x} AND {#y} share 7 rules
  - display: none
  - padding-left: 0.8em
  - padding-right: 0.8em
  [... and so on ...]

To assist with refactoring, it might be nicer if the following conditions were met:

• add semi-colons to the end of each rule (eg: - display: none;)
• remove the hyphen from being prefixed to each rule (eg: display: none)
• the final result would be a valid CSS rule (eg: display: none;)

Rationale:
#x and #y are similar. To refactor them, it might be prudent to add a new class to both of them, call it .z - the easiest way of doing this would be to copy-paste the csscss output into a new class definition (or scss mixin/placeholder/whatever) and update the HTML. Currently that still involves tidying up each line, when the tool could basically do the work for us.

As I don't know if there's a specific reason for the formatting to be as it currently is, this may be best served as an additional flag to be passed to the cli csscss

Don't know what to do with body:before

csscss had trouble with an Opera fix for a sticky footer:

Had a problem parsing the css at line: 88, column: 1 Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 88 char 1. - Don't know what to do with "body:befor" at line 88 char 1.`

Here is the fix in question:

/*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ }

Not work with mixin functions, sprite images

It doesn't work with mixin functions or sprite images in SASS gem. For example: I have small snippet sass:

@import "icons/*.png";

#campaigns-container {
  .campaign_row {
    @include image-box();
    display: block;
    margin-bottom: 20px;
    padding: 15px 10px;
    border: 1px solid #CCC;
    border-radius: 12px;
  }
}

It will create exception at @import... and image-box.

Thanks for your contribution.

Incorrectly reporting duplicate declarations when using media queries

I have something similar to the following:

@media (min-width: 30em) {
  .m-label {
    display: block;
  }
}

/* because less than IE9 
 * doesn't support media queries */
.lt-ie9 .m-label {
  display: block;
}

Although they are sharing the same declaration, there is no way around that as they are only sharing it if the media query applies.

Would it make more sense for the parser to report duplicated declarations outside media queries separately from those inside media queries?

Better parse errors

line_and_column might be helpful.

May want to have a "DEBUG" switch to output parslet error.

Don't know what to do with "@media onl" at line 3401 char 1.

So I'm using Foundation 4 for a project and am trying to run csscss against the whole shebang and I'm encountering the following error:

new-host-9:Prototype matthewforr$ csscss sass/app.scss --compass-with-config config.rb --show-parser-errors
Had a problem parsing the css at line: 3401, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 3401 char 1.
`- Don't know what to do with "@media onl" at line 3401 char 1.

I don't have a @media onl line anywhere in my project which leads me to think that the output is possibly being truncated. Is this possible? Is there a way I could log the file that is generated?

Let me know and I can investigate. Thanks.

Path to folder

Usually CSS is separated in multiple files for development and than merged for production. It will be great if we could run csscss to compare all files from one folder by giving path to folder.

Slurp css from web

open-uri against http://localhost:3000/assets/application.css

Does not recognize SCSS variables

The parser gives an error (pasted below) whenever it hits an SCSS variable declaration.

Code to reproduce:

$foo:#666;

Error output:

Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 1 char 1.
`- Expected at least 1 of COMMENT / NESTED_RULESET / RULESET at line 1 char 1.
   `- Expected one of [COMMENT, NESTED_RULESET, RULESET] at line 1 char 1.
      |- Failed to match sequence (SPACE? '/*' (!'*/' .){0, } '*/' SPACE?) at line 1 char 1.
      |  `- Premature end of input at line 1 char 1.
      |- Failed to match sequence ('@' [^{}]{1, } '{' (COMMENT / RULESET){0, } '}' SPACE?) at line 1 char 1.
      |  `- Premature end of input at line 1 char 1.
      `- Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 1 char 1.
         `- Expected at least 1 of [^{}] at line 1 char 1.
            `- Premature end of input at line 1 char 1.

Extraneous property separator (semicolon) causes parsing error.

I have a rule set that gained an extra semicolon somewhere along the way.
.danger { color: red;; }

csscss gets an error on that line:

Had a problem parsing the css
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 3 char 1.
`- Don't know what to do with ".danger { " at line 3 char 1.

I don't know if the duplicated semicolon is valid CSS, but the rest of the stack hasn't complained. The CSS specification mentions ignoring invalid declarations; I'm not sure the extra semicolon qualifies. The PHP-CSS-Parser project had a similar issue: MyIntervals/PHP-CSS-Parser#42

Thanks to csscss, I've found some duplication already! 😉

Parser treats import statements as selectors

Given this CSS:

@import url("f1/reset.css");
@import url("f1/base.css");

div.app-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-edit.png) no-repeat right top;
}

div.app-ide {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide.png) no-repeat right top;
}

div.app-ide-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide-edit.png) no-repeat right top;
}

csscss 1.2.0 -v gives this output:

{@import url("f1/reset.css");
@import url("f1/base.css");

div.app-edit}, {div.app-ide} AND {div.app-ide-edit} share 4 rules
  - background-position: right top
  - background-repeat: no-repeat
  - margin: 2px 0px
  - padding: 2px 0px

No parsing errors with --show-parsing-errors

Error when running against scss files using compass' `inline-image` data helper

If I run this tool against any of my SCSS files that use background-image: inline-image(...), I get the error listed below.

The compass option was enabled, and if I remove inline-image rules, the file gets processed without issue.

Edit: Here's the exact line of code causing the problem: background-image: inline-image('texture.png');

/usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/functions/inline_image.rb:5:in `join': can't convert nil into String (TypeError)
        from /usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/functions/inline_image.rb:5:in `inline_image'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/funcall.rb:106:in `_perform'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/node.rb:40:in `perform'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `block in visit_import'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `map'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `visit_import'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:7:in `visit'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/root_node.rb:20:in `render'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:315:in `_render'
        from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:262:in `render'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:32:in `block in execute'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `map'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `execute'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:15:in `run'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:142:in `run'
        from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/bin/csscss:4:in `<top (required)>'
        from /usr/local/bin/csscss:23:in `load'
        from /usr/local/bin/csscss:23:in `<main>'

Future UI: User Needs

Sorry in advance, because code and programming is a vast, confusing mystery to me -- but I wanted to start thinking about a user interface for this potentially great tool with a bit of UX rigor.

1. What issues do you most have with your CSS code, structurally? (Examples would be having to manually find duplicate classes and ids; wanting to find deprecated or unused CSS code; wanting revision control of CSS within your uploaded or staged files; sharing CSS snippets but keeping track of what was used where.)
2. How do you currently face these issues?
3. How are you using CSSCSS?
4. What did you use before to approximate this functionality?

No feedback when redundancies are not found.

When I tried this out for the very first time I just so happen to use a css file that didn't have any redundancies. The result? I thought I was either doing something wrong or that there was something wrong with csscss. Took me a while to realize everything was absolutely fine.

csscss terminates with syntax error

I have no knowledge of Ruby, but csscss terminates on my machine with the following error:

/usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require': /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:29: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '(' (SyntaxError)
          sass_options = {cache:false}
                                ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:45: syntax error, unexpected ':', expecting ')'
...ontents).redundancies(minimum:           @minimum,
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:46: syntax error, unexpected ':', expecting '='
...           ignored_properties: @ignored_properties,
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:47: syntax error, unexpected ':', expecting '='
...            ignored_selectors:  @ignored_selectors)
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:63: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '('
...eport(verbose:@verbose, color:true)
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:67: syntax error, unexpected kRESCUE, expecting kEND
    rescue Parslet::ParseFailed => e
          ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:67: syntax error, unexpected tASSOC
    rescue Parslet::ParseFailed => e
                                  ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:79: syntax error, unexpected kDO_BLOCK, expecting kEND
      opts = OptionParser.new do |opts|
                                ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:83: syntax error, unexpected kDO_BLOCK, expecting kEND
        opts.on("-v", "--[no-]verbose", "Display each rule") do |v|
                                                               ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:87: syntax error, unexpected kDO_BLOCK, expecting kEND
        opts.on("--[no-]color", "Colorizes output") do |c|
                                                      ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:91: syntax error, unexpected kDO_BLOCK, expecting kEND
...many rules. Defaults to 3") do |n|
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:95: syntax error, unexpected kDO_BLOCK, expecting kEND
...ties when finding matches") do |ignored_properties|
                              ^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:99: syntax error, unexpected kDO_BLOCK, expecting $end
...tors when finding matches") do |ignored_selectors|
                              ^
        from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
        from /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss.rb:11
        from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
        from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
        from /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/bin/csscss:3
        from /usr/bin/csscss:19:in `load'
        from /usr/bin/csscss:19

I installed via sudo gem install csscss, and Sass was already there.

Errors

I have some feedback on the error messages.

After installing it & I was debugging an old CSS file & I got this error

I runned csscss -v body.css I got this `Had a problem parsing the css at line: 1, column: 1
Run with CSSCSS_DEBUG=true for verbose parser errors'

I would prefer if the debug feature is a flag something like --debug or --debug=true instead cause when I wrote this csscss --help it didn't say anything about how can I turn debug on.

secondly, after I tweeted you & you replied back that I need to run the command like this CSSCSS_DEBUG=true csscss -v body.css I got another error Had a problem parsing the css at line: 1, column: 1 Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET) {1, }) SPACE?) at line 1957 char 1. - Don't know what to do with "p.contactu" at line 1957 char 1.

actually the selector was p.contactussubheading excuse the bad selector name, apparently that's why I needed this tool so I can debug this file :) The problem actually was at line 1964.

Lastly, I think the output will be very helpful if it has line numbers, right now it looks like this

{.selector} AND {#selector} share 10 rules -moz-border-radius: 2px 0px 0px 2px another: rule; another-rule; ...

Maybe something like this will be better

L:20 {.selector} AND L:45 {#selector} share 10 rules -moz-border-radius: 2px 0px 0px 2px another: rule; another-rule; ...

0 without units issue

there is no difference with 0 with and without units so they should be treated as duplicates

example css:

.foo {
    padding: 0px;
}

.bar {
    padding: 0;
}

doesn't return any duplicates

Doesn't include vendor/GEM/lib/assets/stylesheets in Rails projects

In RE to Zach's comment In reference to http://stackoverflow.com/questions/11161595/can-the-sass-minifier-remove-duplicate-styles/16020605?noredirect=1#comment22896233_16020605

Including csscss in the development profile of a Gemfile, along with something like the bootstrap-sass gem, the following include doesn't pick up the Bootstrap sass files:

@include "bootstrap/variables";

Gives the following error

test.css.scss:6: File to import not found or unreadable: bootstrap/variables. (Sass::SyntaxError)
Load path: testproject/app/assets/stylesheets/
from testproject/vendor/ruby/1.9.1/gems/sass-3.2.5/lib/sass/tree/import_node.rb:67:in `rescue in import'

Ignore certain properties

I should let the users ignore certain properties they don't care about being duplicated.

Does this support Less?

grunt hook

Feature request
To have a grunt hook for for this project to allow automated checking of ones css during the code build process.

csscss online?

Anyone got this available as a web app? Or looking to port to PHP or python? not a big Ruby guy but looks really handy!

Parser picks up end of comment as part of next selector

Given this CSS:

@import url("f1/reset.css");
@import url("f1/base.css");

/*
div.x {
    padding: 3px;
}
*/

div.app-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-edit.png) no-repeat right top;
}

div.app-ide {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide.png) no-repeat right top;
}

div.app-ide-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide-edit.png) no-repeat right top;
}

csscss 1.2.0 -v gives this output:

{*/

div.app-edit}, {div.app-ide} AND {div.app-ide-edit} share 4 rules
  - background-position: right top
  - background-repeat: no-repeat
  - margin: 2px 0px
  - padding: 2px 0px

Incorrectly reporting duplicate declarations when using @font-face

When using something similar to the following:

@font-face {
  font-family: 'Museo Sans Rounded';
  src: url('../fonts/museosansrounded-300-mmm.eot');
  src: url('../fonts/museosansrounded-300-mmm.eot?#iefix') format('embedded-opentype'),
       url('../fonts/museosansrounded-300-mmm.woff') format('woff'),
       url('../fonts/museosansrounded-300-mmm.ttf') format('truetype'),
       url('../fonts/museosansrounded-700-mmm.svg#museo') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  src: url('../fonts/museosansrounded-500-mmm.eot');
  src: url('../fonts/museosansrounded-500-mmm.eot?#iefix') format('embedded-opentype'),
       url('../fonts/museosansrounded-500-mmm.woff') format('woff'),
       url('../fonts/museosansrounded-500-mmm.ttf') format('truetype'),
       url('../fonts/museosansrounded-700-mmm.svg#museo') format('svg');
  font-weight: 500;
  font-style: normal;
}

.whatever {
  font-family: 'Museo Sans Rounded';
  font-weight: 300;
}

csscss -n 2 -v /path/to/file.css would report that {@font-face} AND {.whatever} share 2 rules. Yes, they do, but for necessary reasons.

Strange characters

My first try and I got this

{←[0;31;49mpre←[0m} AND {←[0;31;49mtable, td←[0m} share ←[0;31;49m5←[0m rules {←[0;31;49mfieldset←[0m} AND {←[0;31;49mpre←[0m} share ←[0;31;49m4←[0m rules {←[0;31;49m.wp-smiley←[0m} AND {←[0;31;49mlegend←[0m} share ←[0;31;49m3←[0m rule s {←[0;31;49m::-moz-selection←[0m} AND {←[0;31;49m::selection←[0m} share ←[0;31;49 m3←[0m rules {←[0;31;49mhr←[0m} AND {←[0;31;49mtable, td←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49m.wp-caption-text:before←[0m} AND {←[0;31;49mh6, .zeta←[0m} share ←[0; 31;49m3←[0m rules {←[0;31;49mtable, td←[0m} AND {←[0;31;49mth←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49mfieldset←[0m}, {←[0;31;49mlegend←[0m} AND {←[0;31;49mtextarea, select, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[class_="text"]←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49m.wp-caption-text←[0m}, {←[0;31;49mfieldset←[0m}, {←[0;31;49mlabel←[0m } AND {←[0;31;49mtable←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49minput[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, button:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="button"]:focus←[0m}, {←[0;31;49minput[type="file"]:focus, input[type ="file"]:active, input[type="radio"]:focus, input[type="radio"]:active, input[type="checkbox"]:focus, input[type="checkbox"]:active←[0m} AND {←[0;31;49mtextarea, select, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[class_="text"]←[0m} share ←[0;31;49m3←[0m rules

• RUBYGEMS VERSION: 2.0.3
• RUBY VERSION: 1.9.3 (2012-11-10 patchlevel 327) [i386-mingw32]

Filename for sass/scss

It would be great to know in which scss file the duplicate rule is defined in.

{.content ul.outstanding li a} (/some/file/name.scss),
{.navigation ul h2, .navigation ul a} (/file/name._scss)
{h1, h2, h3, h4, h5, h6} (/another/file/name._scss)
share 3 rules

• font-family: "raleway",sans-serif
• font-style: normal
• font-weight: 100

Support for CI Integration

Hey,
prelude -> I'm a JavaScript guy who rarely touched ruby before, so unfortunately I'm not able to implement this on my own :(

Basically, what CSSCSS does, can be considered as Copy & Paste Detection (http://en.wikipedia.org/wiki/Duplicate_code) there are other tools for other languages that can detect & report such issues (https://github.com/sebastianbergmann/phpcpd).

Those tools normally can output the results in a special XML format, that can be consumed by various CI Tools (like Jenkins for example).
They mostly convert it to some nice diagrams & can also fail the build if the
rate of copy-pasted code is above a user defined value.

The defacto standard pmd-cpd XML output would look like this:

<?xml version="1.0" encoding="utf-8"?>
<pmd-cpd>
    <duplication lines="" tokens="5">
        <file line="96" path="/Users/whatever/myproject/css/main.css"/>
        <file line="159" path="/Users/whatever/myproject/css/main.css"/>
        <codefragment><![CDATA[" display: block;
            margin: 20px;
         "]]></codefragment>
    </duplication>
    <duplication lines="" tokens="4">
        <file line="24" path="/Users/whatever/myproject/css/main.css"/>
        <file line="199" path="/Users/whatever/myproject/css/main.css"/>
        <file line="312" path="/Users/whatever/myproject/css/main.css"/>
        <codefragment><![CDATA[" display: none;
            margin: 50px;
         "]]></codefragment>
    </duplication>
    <duplication lines="" tokens="3">
        <file line="64" path="/Users/whatever/myproject/css/main.css"/>
        <file line="111" path="/Users/whatever/myproject/css/main.css"/>
        <codefragment><![CDATA[" h1.my.super.overqualified.selector"]]></codefragment>
    </duplication>
</pmd-cpd>

What do you think, could that reporter be easily integrated into the CSSCSS?
I think a lot people would benefit from this.

Failed to parse base64 encoded SVG.

The rule, cleaned up a little, was as follows. I was simply inlining an icon.

.class.anotherClass > section {
  background: transparent url('data:image/svg+xml;base64,IMGDATAGOESHERE') no-repeat 4px 4px;
}

--no-color doesn't work

Must be a dumb bug by me. Gotta fix it and release an update.

Avoid error for ::selection

Hi,

The tool report the rules for ::selection and ::-moz-selection as duplicate.But for now we need to write the rules for both separately (https://developer.mozilla.org/en/docs/CSS/::selection).
Not a big issues, but thought I could share (awesome project btw and would love to fork but sadly I don't know ruby :( ).

Example with

::-moz-selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}

we get the error:

{::-moz-selection} AND {::selection} share 3 rules`

Problem parsing the css

While running the command: CSSCSS_DEBUG=true csscss -v style.css
I get the following error:

Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 6630 char 1.
`- Don't know what to do with "@media scr" at line 663 char 1.

The css for line 663 looks like the following:
@media screen and (max-width: 800px){

If I remove the whole section it with the media-query parseing works as expected.
What is wrong? Bug? Any feedback/help on this is very much appreciated :)