Nefarious Pomegranate Magnate

    @projectwallace/css-analyzer
    TypeScript icon, indicating that this package has built-in type declarations

    5.6.0 • Public • Published

    CSS Analyzer

    Analyzer logo
    A CSS analyzer that goes through your CSS to find all kinds of relevant statistics.

    Features

    • Extremely detailed (150+ metrics)
    • Super fast
    • Supports both NodeJS and browsers

    Install

    npm install @projectwallace/css-analyzer

    Usage

    Analyzing CSS

    import { analyze } from '@projectwallace/css-analyzer'
    
    const result = analyze(`
    	p {
    		color: blue;
    		font-size: 100%;
    	}
    
    	.component[data-state="loading"] {
    		background-color: whitesmoke;
    	}
    `)
    More examples output can be found in the fixtures folder and looks roughly like this:
    {
      "stylesheet": {
        "sourceLinesOfCode": 5,
        "linesOfCode": 8,
        "size": 113,
        "comments": {
          "total": 0,
          "size": 0
        }
      },
      "atrules": {
        "fontface": {
          "total": 0,
          "totalUnique": 0,
          "unique": [],
          "uniquenessRatio": 1
        },
        "import": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "media": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "charset": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "supports": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "keyframes": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "prefixed": {
            "total": 0,
            "totalUnique": 0,
            "unique": {},
            "uniquenessRatio": 0,
            "ratio": null
          }
        },
        "container": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        }
      },
      "rules": {
        "total": 2,
        "empty": {
          "total": 0,
          "ratio": 0
        },
        "selectors": {
          "min": 1,
          "max": 1,
          "mean": 1,
          "mode": 1,
          "median": 1,
          "range": 0,
          "sum": 2,
          "items": [
            1,
            1
          ]
        },
        "declarations": {
          "min": 1,
          "max": 2,
          "mean": 1.5,
          "mode": 1.5,
          "median": 1.5,
          "range": 1,
          "sum": 3,
          "items": [
            2,
            1
          ]
        }
      },
      "selectors": {
        "total": 2,
        "totalUnique": 2,
        "uniquenessRatio": 1,
        "specificity": {
          "sum": [
            0,
            2,
            1
          ],
          "min": [
            0,
            0,
            1
          ],
          "max": [
            0,
            2,
            0
          ],
          "mean": [
            0,
            1,
            0.5
          ],
          "mode": [
            0,
            1,
            0.5
          ],
          "median": [
            0,
            1,
            0.5
          ],
          "items": [
            [
              0,
              0,
              1
            ],
            [
              0,
              2,
              0
            ]
          ]
        },
        "complexity": {
          "min": 1,
          "max": 3,
          "mean": 2,
          "mode": 2,
          "median": 2,
          "range": 2,
          "sum": 4,
          "total": 2,
          "totalUnique": 2,
          "unique": {
            "1": 1,
            "3": 1
          },
          "uniquenessRatio": 1,
          "items": [
            1,
            3
          ]
        },
        "id": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        },
        "accessibility": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        },
        "keyframes": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        }
      },
      "declarations": {
        "total": 3,
        "unique": {
          "total": 3,
          "ratio": 1
        },
        "importants": {
          "total": 0,
          "ratio": 0,
          "inKeyframes": {
            "total": 0,
            "ratio": 0
          }
        }
      },
      "properties": {
        "total": 3,
        "totalUnique": 3,
        "unique": {
          "color": 1,
          "font-size": 1,
          "background-color": 1
        },
        "uniquenessRatio": 1,
        "prefixed": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        },
        "custom": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        },
        "browserhacks": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "ratio": 0
        }
      },
      "values": {
        "colors": {
          "total": 2,
          "totalUnique": 2,
          "unique": {
            "blue": 1,
            "whitesmoke": 1
          },
          "uniquenessRatio": 1,
          "itemsPerContext": {
            "color": {
              "total": 1,
              "totalUnique": 1,
              "unique": {
                "blue": 1
              },
              "uniquenessRatio": 1
            },
            "background-color": {
              "total": 1,
              "totalUnique": 1,
              "unique": {
                "whitesmoke": 1
              },
              "uniquenessRatio": 1
            }
          }
        },
        "fontFamilies": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "fontSizes": {
          "total": 1,
          "totalUnique": 1,
          "unique": {
            "100%": 1
          },
          "uniquenessRatio": 1
        },
        "zindexes": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "textShadows": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "boxShadows": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "animations": {
          "durations": {
            "total": 0,
            "totalUnique": 0,
            "unique": {},
            "uniquenessRatio": 0
          },
          "timingFunctions": {
            "total": 0,
            "totalUnique": 0,
            "unique": {},
            "uniquenessRatio": 0
          }
        },
        "prefixes": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0
        },
        "units": {
          "total": 0,
          "totalUnique": 0,
          "unique": {},
          "uniquenessRatio": 0,
          "itemsPerContext": {}
        }
      },
      "__meta__": {
        "parseTime": 4,
        "analyzeTime": 5,
        "total": 10
      }
    }

    Comparing specificity

    import { compareSpecificity } from '@projectwallace/css-analyzer'
    
    const result = [
      [0,1,1],
      [2,0,0],
      [0,0,1],
    ].sort((a, b) => compareSpecificity(a, b))
    
    // => result:
    // [
    //   [2,0,0],
    //   [0,1,1],
    //   [0,0,1],
    // ]
    
    const isSpecificityEqual = compareSpecificity(
      [0,1,0],
      [0,1,0]
    ) === 0
    // => isSpecificityEqual: true

    Related projects

    • CSS Code Quality Analyzer - A Code Quality analyzer that tells you how maintainable, complex and performant your CSS is
    • Wallace CLI - CLI tool for @projectwallace/css-analyzer
    • Constyble - CSS Complexity linter
    • Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity
    • CSS Diff Github Action - A GitHub action that comments on your PR to tell you how your code quality has changed

    Install

    npm i @projectwallace/css-analyzer

    DownloadsWeekly Downloads

    169

    Version

    5.6.0

    License

    MIT

    Unpacked Size

    375 kB

    Total Files

    12

    Last publish

    Collaborators

    • bartveneman