Skip to content

projectwallace/css-code-quality

Repository files navigation

CSS Code Quality calculator

Analyzer logo
Calculate the Code Quality score of your CSS based on a range of different quality guards.

This package analyzes your CSS on a high level and comes up with a score, divided into three areas:

  • Maintainability: how difficult is it for someone looking at the CSS from a high level to find the exact spot to fix a bug?
  • Complexity: how difficult is it for someone to make a change and be confident that they can make that change without side effects?
  • Performance: How likely is the CSS to have a negative impact on performance, based on high-level metrics? (Not including using hardware accelerated transforms and the like, because other tools are more suited for that.)

Installation

npm install @projectwallace/css-code-quality

Usage

import { calculate } from "@projectwallace/css-code-quality"; let css = `my_css { /* ... */ }`; let result = calculate(css); /* The result shape looks something like this:  {  "violations": [ ],  "passes": [ ],  "performance": {  "score": 90,  "violations": [ ],  "passes": [ ]  },  "maintainability": {  "score": 100,  "violations": [ ],  "passes": [ ]  },  "complexity": {  "score": 97,  "violations": [ ],  "passes": [ ]  } }  Each `passes` or `violations` array contains an object that looks like this:  {  "id": "EmptyRules",  "score": 0,  "value": 0 }, {  "id": "AverageSelectorsPerRule",  "score": 0,  "value": 1.5,  "actuals": [  2,  1  ] }  etc. etc.  */

Related projects

  • CSS Analyzer - A CSS Analyzer that goes through your CSS to find all kinds of relevant statistics.
  • Wallace CLI - CLI tool for @projectwallace/css-analyzer
  • Constyble - CSS Complexity linter
  • Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity

About

Calculate the Code Quality score of your CSS based on a range of different quality guards.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published