Idea by Harry Roberts

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

npm install specificity-graph

specifity-graph can be used in different ways:

• CLI
• Node module
• Via JavaScript
• Online

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

var specificityGraph = require('specificity-graph');

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

First get the specificityGraph accessible in your code:

const SpecificityGraph = require('specificity-graph')
or
import SpecificityGraph from ''specificity-graph''

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

import SpecificityGraph from 'specificity-graph'
const graph = new SpecificityGraph()

graph.add()

• specificityGraph.create(css, options)
• specificityGraph.createFromData(specificityData, options),
• specificityGraph.update(css)