specificity-graph

    0.1.7 • Public • Published

    Specificity Graph (for CSS)

    NPM version Build Status

    Idea by Harry Roberts

    The generated graph Generate an interactive line graph showing the specificity in your stylesheet. Uses d3, css-parser, and specificity.

    Installation

    npm install specificity-graph

    Usage

    specifity-graph can be used in different ways:

    CLI

    specificity-graph <cssFile> [options]

    Creates a directory containing

    • json file with specificity data for your CSS
    • html file with interactive specificity graph for CSS
    • necessary JS files to run graph

    Options

    Flag Description
    -o --output name for generated directory (default: specificity-graph)
    -b --browser auto launch browser to view generated chart
    -h --help Help

    Node module

    var specificityGraph = require('specificity-graph');
    
    specificityGraph(directory, css, function(directory){
      console.log('specificity-graph files created in ' + directory);
    });
    

    Via JavaScript

    First get the specificityGraph accessible in your code:

    Using Browserify (or similar)

    Just require('specificity-graph').

    Standalone (no module loader)

    Add <script src="specificity-graph-standalone.js"></script>, this will expose specificityGraph as a global variable.

    Methods

    • specificityGraph.create(css, options)
    • specificityGraph.createFromData(specificityData, options),
    • specificityGraph.update(css)
    Options
    Name Description
    css String with css to generate specificity graph for
    specificityData JSON object with css specificity data. CLI write a JSON in this format, as does the lib/lineChart's create function'
    Create options
    Create option name Description
    svgSelector Selector for svg element to draw specificity graph inside. Defaults to .js-graph.
    width default 1000. You should set a viewBox value on the SVG element to match width and height, f.e. viewbox='0 0 1000 4000'.
    height default 400
    showTicks Boolean. Show scale and ticks. Default false.
    xProp (possible values: 'selectorIndex', 'line'). What to base the x dimension, 'location in stylesheet' in graph on: index of selector in CSS, or line number for selector in CSS. Default 'selectorIndex'.
    yProp default 'specificity'

    Install

    npm i specificity-graph

    DownloadsWeekly Downloads

    128

    Version

    0.1.7

    License

    MIT

    Last publish

    Collaborators

    • pocketjoso