Détail du package

scancss

everget59MIT1.5.0

A robust CSS stylesheet statistics collector and analyzer

css, scan, scanner, stats

readme

scancss

A robust CSS stylesheet statistics collector and analyzer

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

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[1.5.0]

Added

Added properties.autoKeyword metric
Added mediaQueries.features.deprecated metric
Added mediaQueries.types.deprecated metric
Added properties.uniqueRatio metric
Added properties.shorthandsRatio metric
Added atRules.descriptors metric
Added units.unknown metric

Changed

Reorganized properties.explicitDefaultingKeywords to:

properties {
  inheritKeyword,
  initialKeyword,
  revertKeyword,
  unsetKeyword,
}

Renamed .styleSheetSize metric to .size
Renamed stylesheetSize flag to size

Fixed

Corrected handling of declarations in at-rules
Added counting of functions in at-rules params and declarations

[1.4.2]

Fixed

Corrected colors matching
Corrected all functions matching
Corrected units matching
Corrected performance hacks matching
Corrected named timing functions matching
Corrected explicit defaulting keywords matching
Reduce module install size

[1.4.1]

Fixed

Fixed typo and unexpected behavior of selectorsUsage flag when options argument is not an object

[1.4.0]

Added

Added rules.withoutTrailingSemicolon metric
Added comments.sizeRatioPercent metric
Added selectors.sizeRatioPercent metric
Added declarations.sizeRatioPercent metric
Added dataUris.sizeRatioPercent metric
Added selectors.attributesUsage metric
Added attributesUsage flag
Added imports metric
Added widths metric
Added widths flag
Added heights metric
Added heights flag
Added selectors.specificity.highest10 metric
Added selectors.maxPerRuleList metric
Added keyframes.definedAnimations metric
Added animations.withoutDefinitions metric

Fixed

Corrected selectors.specificity.average metric
Corrected selectors.unique metric counting when selectorsUsage flag is false
Corrected transition and animation longhand handling
Corrected vendor-prefixed transition- and animation- properties handling
Corrected counting of vendor prefixes it @supports at-rule
Corrected declarations.inAtRules counting when declarations flag is set to false

[1.3.2]

Fixed

Fixed counting of comma-separated media queries
Fixed counting of invalid named timing functions in transitions.invalidTimingFunctions and animations.invalidTimingFunctions
Fixed counting of steps and frames timing functions in functions, transitions.timingFunctions, transitions.invalidTimingFunctions, animations.timingFunctions, animations.invalidTimingFunctions
Fixed case-insensitive counting of system colors, currentColors and transparent colors
Added missed discrete and range media features
Added missed future, current, drop, focus-visible, local-link, nth-col, nth-last-col, past, playing, paused, something, target-within, user-invalid pseudo classes

[1.3.1]

Fixed

Fixed counting of rgb(), rgba(), hsl(), hsla(), hwb() functions with whitespace syntax
Fixed counting of rgb(), rgba(), hsl(), hsla(), hwb() functions with decimal numbers and exponential notations
Fixed counting of data URIs with <svg> syntax
Added missed -moz-border-top-colors and -moz-border-left-colors for handling as colorable properties
Added missed stop-color, flood-color and lighting-color for handling as colorable properties

[1.3.0]

Added

Added properties option
Added displays option
Added positions option
Added zIndices option
Added floats option
Added borderRadiuses option
Added letterSpacings option

Added fontSizes.keywords metric:

keywords: {
  total,
  unique,
  usage,
}

Changed

Simplified all options flag names

Reorganized atRules.unknown to:

unknown: {
  total,
  unique,
  usage,
}

Reorganized mediaQueries.types to:
```
types: {
  total,
  unique,
  usage,
}
```

Reorganized vendorPrefixes.unknown to:

unknown: {
  total,
  unique,
  usage,
}

Reorganized units to:

units: {
  total,
  unique,
  usage,
  excessive: {
      total,
      unique,
      usage,
  },
},

Reorganized selectors specificity metrics to:

selectors: {
  specificity: {
      total,
      highest,
      highestSelector,
      average,
      graphData,
  }
}

Reorganized selectors length metrics to:

selectors: {
  length: {
      total,
      longest,
      longestSelector,
      average,
  }
}

Reorganized declarations length metrics to:

declarations: {
  length: {
      total,
      longest,
      longestDeclaration,
      average,
  },
}

Reorganized dataUris length metrics to:

dataUris: {
  length: {
      total,
      longest,
      longestDataUri,
      average,
  },
}

Reorganized comments length metrics to:

comments: {
  length: {
      total,
      longest,
      shortest,
      average,
  },
}

Renamed styleSheetSize metrics to:

styleSheetSize: {
  source,
  gzipSource,
}

Fixed

Fixed bugs with incorrect selectors specificity calculations
Fixed considering variables or calc functions in z-index values as invalid
Fixed inconsistent flags location

[1.2.0]

Added

Added keyframes.longestStepsChainAnimation
Added keyframes.shortestStepsChainAnimation
Added filters metrics and new flag collectFiltersData
```
filters: {
  total,
  unique,
  usage,
}
```

Changed

Renamed mediaQueries.onlyKeywords to mediaQueries.onlyKeyword
Renamed *.vendorPrefixed to *.prefixed

Reorganized mediaQueries.features to:

features: {
  total,
  unique,
  vendorPrefixed,
  usage,
}

Fixed

Fixed bug with incorrect transitions.invalidTimingFunctions and animations.invalidTimingFunctions counting
Fixed declarations.uniqueRatio calculation

[1.1.0]

Added

Added declarations.uniqueRatio metric
Added declarations.totalByteLength metric
Added declarations.longestByteLength metric
Added declarations.longestByteLengthDeclaration metric
Added declarations.averageByteLength metric
Added declarations.sizeRatio metric
Added animations.total metric
Added animations.unique metric
Added animations.usage metric
Added functions.vendorPrefixed metric
Added background-image to colorable properties

Changed

Excluded @font-face descriptors from handling as declarations
Corrected counting of vendor-prefixed functions
Set collectSpecificityGraphData flag to false by default
Set collectUniqueDeclarationsList flag to false by default

[1.0.1]

Fixed

Fixed isNumber predicate function

Détail du package

readme

scancss

Table of contents

Installation

Usage

Report Structure

Examples

Options

size

comments

atRules

rules

selectors

selectorsUsage

attributesUsage

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

License

changelog

Changelog

[1.5.0]

Added

Changed

Fixed

[1.4.2]

Fixed

[1.4.1]

Fixed

[1.4.0]

Added

Fixed

[1.3.2]

Fixed

[1.3.1]

Fixed

[1.3.0]

Added

Changed

Fixed

[1.2.0]

Added

Changed

Fixed

[1.1.0]

Added

Changed

[1.0.1]

Fixed