A CSS redundancy analyzer that analyzes redundancy.

Related tags

CSS csscss
Overview

Build Status Code Climate

What is it?

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

What is it for?

One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It's not a silver bullet, but it sure helps.

To do that, you need to have all the rulesets in your head at all times. That's hard, csscss is easy. Let it tell you what is redundant.

How do I use it?

First you need to install it. It is currently packaged as a ruby gem:

$ gem install csscss

Note: csscss only works on ruby 1.9.x and up. It will have trouble with ruby 1.8.x.

Then you can run it in at the command line against CSS files.

$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules

Run it in a verbose mode to see all the duplicated styles.

$ csscss -v path/to/styles.css

Run it against remote files by passing a valid URL.

$ csscss -v http://example.com/css/main.css

You can also choose a minimum number of matches, which will ignore any rulesets that have fewer matches.

$ csscss -n 10 -v path/to/style.css # ignores rulesets with < 10 matches

If you prefer writing in Sass, you can also parse your sass/scss files.

$ gem install sass
$ csscss path/to/style.scss

Sass users may be interested in the --ignore-sass-mixins experimental flag that won't match duplicate declarations from including mixins.

If you prefer writing in LESS, you can also parse your LESS files.

$ gem install less
$ csscss path/to/style.less

LESS requires an additional javascript runtime. v8/therubyracer on most rubies, and therubyrhino on jruby.

Are there any community extensions?

Please submit an issue if you know of any others.

Why doesn't csscss automatically remove duplications for me?

I have been asked this a lot, but csscss is intentionally designed this way. Check out this post for my reasoning.

I found bugs

This is still a new and evolving project. I heartily welcome feedback. If you find any issues, please report them on github.

Please include the smallest CSS snippet to describe the issue and the output you expect to see.

I'm a dev, I can help

Awesome! Thanks! Here are the steps I ask:

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Make sure the tests pass (bundle exec rake test)
  5. Push to the branch (git push origin my-new-feature)
  6. Create new Pull Request
Comments
  • Problem parsing inline base64 encoded images

    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.

    bug 
    opened by damkraw 14
  • csscss terminates with syntax error

    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.

    wontfix ruby-setup 
    opened by Boldewyn 13
  • Errors

    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; ...

    enhancement 
    opened by ahmedelgabri 13
  • Implement

    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.

    pomodoro 
    opened by Melindrea 12
  • Not work with mixin functions, sprite images

    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.

    opened by tamvm 10
  • undefined method `downcase'

    undefined method `downcase'

    Not sure why I'm getting this.

    Same issue with ruby-1.9.3-p547 and ruby-2.1.2

    $ csscss Sites/kio/css/master.css
    
    /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/types.rb:11:in `from_parser': undefined method `downcase' for 1027:Fixnum (NoMethodError)
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/parser/css.rb:118:in `block in <class:Transformer>'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:195:in `instance_eval'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:195:in `call_on_match'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:213:in `block in transform_elt'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:210:in `each'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:210:in `transform_elt'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:163:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `block in recurse_array'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `map'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `recurse_array'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:168:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:225:in `block in recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `each'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `inject'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:166:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:225:in `block in recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `each'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `inject'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:166:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `block in recurse_array'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `map'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:232:in `recurse_array'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:168:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:225:in `block in recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `each'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `inject'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:224:in `recurse_hash'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/parslet-1.6.1/lib/parslet/transform.rb:166:in `apply'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/parser/css.rb:8:in `parse'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/redundancy_analyzer.rb:14:in `redundancies'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/cli.rb:40:in `execute'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/cli.rb:17:in `run'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/lib/csscss/cli.rb:200:in `run'
      from /Users/user/.rvm/gems/ruby-2.1.2/gems/csscss-1.3.2/bin/csscss:4:in `<top (required)>'
      from /Users/user/.rvm/gems/ruby-2.1.2/bin/csscss:23:in `load'
      from /Users/user/.rvm/gems/ruby-2.1.2/bin/csscss:23:in `<main>'
      from /Users/user/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `eval'
      from /Users/user/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `<main>'
    
    bug 
    opened by jackmcpickle 8
  • csscss quits with ruby error

    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

    wontfix 
    opened by nvartolomei 8
  • Include SASS files from the cli

    Include SASS files from the cli

    I often have separate files for mixins and variables which are them put together by rails asset pipeline, so there are files that use these variables, but do not include the file with the definitions.

    It would be nice to be able to include them from the cli. Is this possible?

    opened by zamith 7
  • undefined method `add_import_path`

    undefined method `add_import_path`

    When trying to use CSSCSS on a .scss file that has an additional import path, it exits with a NoMethodError:

    config.rb:14:in `<top (required)>': undefined method `add_import_path' for main:Object (NoMethodError)
    from /home/marie/.rvm/gems/ruby-1.9.3-p194/gems/csscss-1.3.1/lib/csscss/cli.rb:110:in `load'
    from /home/marie/.rvm/gems/ruby-1.9.3-p194/gems/csscss-1.3.1/lib/csscss/cli.rb:110:in `block (2 levels) in parse'
    

    My config.rb looks like the following:

    require "breakpoint"
    
    # Set this to the root of your project when deployed:
    http_path = "/"
    css_dir = ".tmp"
    sass_dir = "app/styles"
    images_dir = "app/styles/images"
    javascripts_dir = "app/scripts"
    fonts_dir = "app/styles/fonts"
    add_import_path "app/components"
    

    These are part of the Compass Configuration. In particular, I'm using it to import files from the folder bower installs in.

    One work-around I just found is that if I instead of add_import_path use additional_import_paths = ["app/components"] it works, or at least appears to.

    bug 
    opened by Melindrea 7
  • Failed to parse base64 encoded SVG.

    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;
    }
    
    bug 
    opened by mrDarcyMurphy 7
  • Path to folder

    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.

    enhancement 
    opened by kopipejst 7
  • Requirement of saas Gem

    Requirement of saas Gem

    The saas gem has now been deprecated and users have been advised to switch to the saasc gem. Unfortunately, the saas gem is a dependency to csscss. Any plans to use the saasc gem for this?

    opened by AshNaz87 0
  • charset followed by comment with code inside raises error

    charset followed by comment with code inside raises error

    Running the following

    @charset "UTF-8";
    /**{void}*/
    .grid__row {
      display: block;
      width: 102.27273%;
      margin-left: -1.13636%;
      margin-right: -1.13636%;
    }
    

    with command
    csscss --show-parser-errors styles.css

    gives following

    Had a problem parsing the css at line: 1, column: 1 Failed to match sequence (SPACE? blocks:((COMMENT / IMPORT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 1 char 1. - Expected at least 1 of COMMENT / IMPORT / NESTED_RULESET / RULESET at line 1 char 1.- Expected one of [COMMENT, IMPORT, NESTED_RULESET, RULESET] at line 1 char 1. |- Failed to match sequence (SPACE? '/' (!'/' .){0, } '/' SPACE?) at line 1 char 1. | - Expected "/*", but got "@c" at line 1 char 1. |- Failed to match sequence ('@' [Ii] [Mm] [Pp] [Oo] [Rr] [Tt] [^;]{1, } ';' SPACE?) at line 1 char 2. |- Failed to match [Ii] at line 1 char 2. |- Failed to match sequence ('@' [^{}]{1, } '{' SPACE? (COMMENT / RULESET / NESTED_RULESET){1, } '}' SPACE?) at line 2 char 5. | - Expected at least 1 of COMMENT / RULESET / NESTED_RULESET at line 2 char 5. |- Expected one of [COMMENT, RULESET, NESTED_RULESET] at line 2 char 5. | |- Failed to match sequence (SPACE? '/' (!'/' .){0, } '/' SPACE?) at line 2 char 5. | | - Expected "/*", but got "vo" at line 2 char 5. | |- Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((MIXIN_ATTRIBUTES / COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 2 char 9. | |- Expected "{", but got "}" at line 2 char 9. | - Failed to match sequence ('@' [^{}]{1, } '{' SPACE? (COMMENT / RULESET / NESTED_RULESET){1, } '}' SPACE?) at line 2 char 5. |- Expected "@", but got "v" at line 2 char 5. - Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((MIXIN_ATTRIBUTES / COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 2 char 5.- Expected "}", but got "v" at line 2 char 5.

    opened by bryanrasmussen 0
  • Comments/charset declarations are included in selectors

    Comments/charset declarations are included in selectors

    Hi,

    I encountered the problem that the CSS parser includes comments in selector names. Example CSS:

    /* A comment before a selector*/
    h1 {
       /* 
         some redundant selectors here
         ...
       */ 
    }
    

    Let's assume h1 contains redundancy and ends up in the JSON structure. This JSON structure now contains a selector in the list called "/* A comment before a selector*/h1", while the correct selector is just "h1".

    The same problem occurs when having a @charset declaration just before a selector.

    Thanks in advance!

    opened by tomdenbraber 0
  • Community extension: csscssbeauty

    Community extension: csscssbeauty

    I was just cleaning up an extension that was initially developed two years ago: https://www.npmjs.com/package/csscssbeauty

    It spawns a server, reads the output from csscss and displays it on the website in a beautified format. The server will reload when the watched files change to always have the latest results.

    Feel free to add csscssbeauty to the list of community extensions.

    opened by garthenweb 0
  • added reporting exact selector matches with a test

    added reporting exact selector matches with a test

    @zmoazeni @icijavon @carsonmcdonald @prsimp @laserlemon @viveksachdeva resolve #94 resolve #93 This could use some code review. First time with ruby, thanks to @icijavon. Tried to match the style you had in the files. I'm easy about changes so feel free to kill this in Code Review and I'll fix it up.

    I could use some help finding out how to identify selectors that are nested(ex. @media) to have a accurate report. Is any variable set to identify what nested area a selector is in?

    Test instructions 1)gem install bundle 2)pull branch 3)Install dependencies: bundle install 4) Run tests: bundle exec rake test 5) to test your own css file run: bundle exec csscss my_css_file

    opened by aunueget 4
  • Multiple Rulesets with exact same Selector

    Multiple Rulesets with exact same Selector

    @zmoazeni Thanks for the great tool Is there anything that does this? If not I would be interested contributing this.

    Example css file:

    .pizza{
        font-size: 16px;
        color: #ff0000;
        display: none;
    }
    
    .pizza {
        overflow: auto;
        padding: 1em;
    }
    

    If i run csscss on the above file i would like to get something like:

    2 rule sets with same selector ".pizza"  at Lines: 1 , 7
    
    enhancement 
    opened by aunueget 2
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
Functional css for humans

TACHYONS Functional CSS for humans. Quickly build and design new UI without writing CSS. Principles Everything should be 100% responsive Everything sh

null 11.3k Jan 4, 2023
The CSS design system that powers GitHub

Primer CSS The CSS implementation of GitHub's Primer Design System Migrating ?? If you currently use the primer or primer--prefixed npm packages, plea

Primer 11.6k Jan 3, 2023
A minimalist CSS framework.

A minimalist CSS framework. Why it's awesome Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipp

Milligram 9.9k Jan 4, 2023