scancss

A robust CSS stylesheet statistics collector and analyzer

Table of contents

1. Installation

2. Usage

3. Report Structure

4. Examples

5. Options

   • size
   • comments
   • atRules
   • rules
   • selectors
   • selectorsUsage
   • selectorComplexityThreshold
   • specificityGraph
   • declarations
   • uniqueDeclarationsList
   • properties
   • engineTriggerProperties
   • performanceHacks
   • displays
   • positions
   • zIndices
   • floats
   • borderRadiuses
   • widths
   • heights
   • letterSpacings
   • fonts
   • colors
   • backgroundColors
   • allColors
   • transitionsAndAnimations
   • functions
   • filters
   • gradients
   • units
   • variables
   • dataUris
   • browserHacks

6. License

Installation

npm install scancss --save

yarn add scancss --save

Back to top

Usage

import scancss from 'scancss';
// or const scancss = require('scancss');

const stylesheet = `
    .selector {
        display: inline-block;
        position: relative;
        width: 40px;
        height: 40px;
        background-color: #123123;
        color: #fff;
    }

    @media screen and (max-width: 480px) {
        .selector {
            width: 20px;
            height: 20px;
            background-color: #456456;
            color: #000;
        }
    }
`;

// Switching off some metrics
const report = scancss(
    stylesheet,
    {
        atRules: false,
        selectorsUsage: false,
        dataUris: false,
    }
);

NOTE: Without provided options object scancss will use defaults. See available Options.

Back to top

Report Structure

See Report Structure for more details.

Back to top

Examples

See examples folder with stylesheets and their corresponding reports.

Back to top

Options

size

Use this flag to fill .size metric

• Default: true

comments

Use this flag to fill .comments metric

• Default: true

atRules

Use this flag to fill .atRules, .mediaQueries, .keyframes, .imports metrics

• NOTE: Disabling this flag you will disable counting browser hacks in @supports and @media at-rules

• Default: true

rules

Use this flag to fill .rules and .selectors metrics

• NOTE: Disabling this flag you will disable counting all .selectors metrics

• Default: true

selectors

Use this flag to fill .selectors metric

• NOTE: Disabling this flag you will disable counting all .selectors metrics

• Default: true

selectorsUsage

Use this flag to fill .selectors.usage metric

• Default: true

attributesUsage

Use this flag to fill .selectors.attributesUsage metric

• Default: true

selectorComplexityThreshold

Use this value to set a threshold of the base parts of a selector to consider the selector as complex and to count in .selectors.complex metric

• Default: 4

specificityGraph

Use this flag to fill .selectors.specificity.graphData metric

• Default: false

declarations

Use this flag to fill .declarations metric

• NOTE: Disabling this flag you will disable counting all .declarations metrics

• Default: true

uniqueDeclarationsList

Use this flag to fill .declarations.list metric

• Default: false

properties

Use this flag to fill .properties metric

• NOTE: Disabling this flag you will disable counting .properties.engineTriggers and .properties.performanceHacks

• Default: true

engineTriggerProperties

Use this flag to fill .properties.engineTriggers metric

• Default: true

performanceHacks

Use this flag to fill .properties.performanceHacks metric

• Default: true

displays

Use this flag to fill .displays metric

• Default: true

positions

Use this flag to fill .positions metric

• Default: true

zIndices

Use this flag to fill .zIndices metric

• Default: true

floats

Use this flag to fill .floats metric

• Default: true

borderRadiuses

Use this flag to fill .borderRadiuses metric

• Default: true

widths

Use this flag to fill .widths metric

• Default: true

heights

Use this flag to fill .heights metric

• Default: true

letterSpacings

Use this flag to fill .letterSpacings metric

• Default: true

fonts

Use this flag to fill .fontSizes, .lineHeights, .fontFamilies metrics

• Default: true

colors

Use this flag to fill .colors metric

• Default: true

backgroundColors

Use this flag to fill .backgroundColors metric

• Default: true

allColors

Use this flag to fill .allColors metric

• Default: true

transitionsAndAnimations

Use this flag to fill .transitions and .animations metrics

• Default: true

functions

Use this flag to fill .functions metric

• NOTE: Disabling this flag you will disable counting .gradients, .filters, .dataUris, cubic-beziers for .transitions and .animations metrics

• Default: true

filters

Use this flag to fill .filters metric

gradients

Use this flag to fill .gradients metric

• Default: true

units

Use this flag to fill .units metric

• NOTE: Disabling this flag you will disable counting .properties.negativeMargins metric

• Default: true

variables

Use this flag to fill .variables metric

• Default: true

dataUris

Use this flag to fill .dataUris metric

• Default: true

browserHacks

Use this flag to fill .browserHacks metric

• Default: true

Back to top

License

MIT © Alex Orekhov @everget

Back to top