scancss
A robust CSS stylesheet statistics collector and analyzer
Table of contents
-
- 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
Installation
npm install scancss --save
yarn add scancss --save
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.
Report Structure
See Report Structure for more details.
Examples
See examples folder with stylesheets and their corresponding reports.
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
License
MIT © Alex Orekhov @everget