Nepotistic Pontifex Maximus

    gulp-css-count

    0.2.0 • Public • Published

    Count CSS selectors, nesting depth, declarations and rules in CSS files.

    • To monitor simplicity of CSS files (depth/nesting of selectors and etc.)

    Getting Started

    This plugin requires Gulp. You may install the plugin with this command:

    npm install gulp-css-count --save-dev

    Sample Output

    /var/www/html/site/style.css 32.05 kB
    Selectors: 17 | Declr: 16 | Rules: 11 | S/R: 1.5 | D/R: 1.5
    D1: 7 (41%) | D2: 3 (18%) | D3: 4 (24%) | D4: 2 (12%) | * 4
    

    Line 1: Location and size of the CSS file being counted.

    Line 2: General statistics of the file.

    S/R: selectors to rules ratio, D/R: declarations to rules ratio

    Line 3: Depth of selectors (nesting count) and number of used global CSS selectors (*).

    Nesting depth explanation:

    D1: .selector-1 { ... }

    D2: .selector-1 .selector-2 { ... }

    D3: .selector-1 .selector-2 .selector-3 { ... }

    ...

    Example

    Gulp 3 config (gulpfile.js) containing the css-count task. Gulp 4 one is similar.

    var gulp = require('gulp');
    var gulp_css_count = require('gulp-css-count');
     
    gulp.task('csscount', function() {
      return gulp.src('./css/**/*.css')
        .pipe(gulp_css_count());
    });

    Credits

    Install

    npm i gulp-css-count

    DownloadsWeekly Downloads

    76

    Version

    0.2.0

    License

    (MIT OR Apache-2.0)

    Unpacked Size

    8.42 kB

    Total Files

    8

    Last publish

    Collaborators

    • orlinbox