scancss

A robust CSS stylesheet statistics collector and analyzer

   

   

    

Table of contents

1. Installation

1. Usage

1. Report Structure

1. Examples

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

1. License

Installation

``
npm install scancss --save
`

`
yarn add scancss --save
`

Back to top

Usage

`js
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