Oriainal StyleStats is a Node.js library to collect CSS statistics!
This gem was port in Ruby
Add this line to your application's Gemfile:
gem 'style_stats'And then execute:
$ bundle
Or install it yourself as:
$ gem install style_stats
$ style_stats path/to/stylesheet.css
┌─────────────────────────────────┬────────────────────────────┐
│ Published │ 2015-08-29 22:56:15 +0900 │
├─────────────────────────────────┼────────────────────────────┤
│ Paths │ path/to/stylesheet.css │
├─────────────────────────────────┼────────────────────────────┤
│ Style Sheets │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Style Elements │ 0 │
├─────────────────────────────────┼────────────────────────────┤
│ Size │ 240B │
├─────────────────────────────────┼────────────────────────────┤
│ Data URI Size │ 0 │
├─────────────────────────────────┼────────────────────────────┤
│ Ratio of Data URI Size │ 0.0% │
├─────────────────────────────────┼────────────────────────────┤
│ Gzipped Size │ 158B │
├─────────────────────────────────┼────────────────────────────┤
│ Rules │ 7 │
├─────────────────────────────────┼────────────────────────────┤
│ Selectors │ 12 │
├─────────────────────────────────┼────────────────────────────┤
│ Simplicity │ 58.3% │
├─────────────────────────────────┼────────────────────────────┤
│ Average of Identifier │ 1.250 │
├─────────────────────────────────┼────────────────────────────┤
│ Most Identifier │ 3 │
├─────────────────────────────────┼────────────────────────────┤
│ Most Identifier Selector │ .foo .bar .baz │
├─────────────────────────────────┼────────────────────────────┤
│ Average of Cohesion │ 1.429 │
├─────────────────────────────────┼────────────────────────────┤
│ Lowest Cohesion │ 2 │
├─────────────────────────────────┼────────────────────────────┤
│ Lowest Cohesion Selector │ .foo │
├─────────────────────────────────┼────────────────────────────┤
│ Total Unique Font Sizes │ 2 │
├─────────────────────────────────┼────────────────────────────┤
│ Unique Font Sizes │ 12px │
│ │ 16px │
├─────────────────────────────────┼────────────────────────────┤
│ Total Unique Font Families │ 0 │
├─────────────────────────────────┼────────────────────────────┤
│ Unique Font Families │ N/A │
├─────────────────────────────────┼────────────────────────────┤
│ Total Unique Colors │ 3 │
├─────────────────────────────────┼────────────────────────────┤
│ Unique Colors │ #333333 │
│ │ #CCCCCC │
│ │ RED │
├─────────────────────────────────┼────────────────────────────┤
│ ID Selectors │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Universal Selectors │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Unqualified Attribute Selectors │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ JavaScript Specific Selectors │ 0 │
├─────────────────────────────────┼────────────────────────────┤
│ Important Keywords │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Float Properties │ 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Properties Count │ color: 4 │
│ │ font-size: 3 │
│ │ margin: 2 │
│ │ float: 1 │
├─────────────────────────────────┼────────────────────────────┤
│ Media Queries │ 0 │
└─────────────────────────────────┴────────────────────────────┘Specified css file will be analyzed.
# Providing multiple input is also supported.
$ style_stats foo.css bar.css baz.cssCSS files in specified directory will be analyzed.
$ style_stats path/to/dirGlob input is supported (quotes are required).
$ style_stats 'path/**/*.css'You can specify a remote CSS file.
$ style_stats http://example.com/css/wisteria.cssIf you specify an HTML page, StyleStats will analyze stylesheets and style elements.
$ style_stats http://example.com/--format option outputs JSON, HTML, Markdown.
$ style_stats foo.css -f <json|html|md>Help:
$ style_stats --help
Usage: style_stats [options] <file ...>
-h, --help output usage information
-V, --version output the version number
-c, --config <path> set configurations
-f, --format <format> set the output format <json|html|md>
-t, --template <path> set the template path for output format
-n, --number show only numeral metrics
-m, --mobile [name] set the mobile user agent
--user-anget <string> set the user agent</string></format></path>Example:
$ style_stats path/to/stylesheet.css -c style_stats.yml
┌────────────────────────────┬────────┐
│ Style Sheets │ 1 │
├────────────────────────────┼────────┤
│ Size │ 19.0KB │
├────────────────────────────┼────────┤
│ Gzipped Size │ 3.7KB │
├────────────────────────────┼────────┤
│ Total Unique Font Families │ 3 │
└────────────────────────────┴────────┘After checking out the repo, run bin/setup to install dependencies. Then, run rake rspec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment. Run bundle exec style_stats to use the gem in this directory, ignoring other installed copies of this gem.
To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.
The gem is available as open source under the terms of the MIT License.