Report LOC

[bartveneman]

Need to determine what LOC for CSS means exactly, but it would be a useful global metric to use for quick comparisons.

Resources

• https://en.wikipedia.org/wiki/Source_lines_of_code
• https://adactio.com/journal/14574 by @adactio
• https://csswizardry.com/2015/04/cyclomatic-complexity-logic-in-css/ by @csswizardry

Proposed LOC counting

/* 1 LOC (1 selector identifier) */
.selector {}

/* 1 LOC (2 selector identifiers) */
.selector #withId {}

/* 2 LOC (2 selectors with 1 identifier) */
.selector1,
.selector2 {}

/* 2 LOC (1 selector identifier, 1 declaration) */
.selector {
  property: value;
}

/* 2 LOC (1 selector, 1 declaration) */
.selector {
  background: -moz-linear-gradient(#aaaaaa, #bbbbbb);
}

/* 3 LOC (1 @media rule, 1 selector, 1 declaration)  */
@media (min-width: 400px) {
  .selector {
    color: #ff0000;
  }
}

/**
 * 7 LOC
 * ------
 * 1 @keyframes rule
 * 3 'selectors'
 * 3 declarations
 */
@keyframes -webkit-i-like-to-move-it-move-it {
  from {
    color: red;
  }

  50% {
    color: blue;
  }

  100% {
    color: green;
  }
}

Proposed report

{
  "stylesheets.lines": 9000, // css.split('\n')
  "stylesheets.linesOfCode": 5000,
  "rules.linesOfCode.average": 20.3, // total selectors/identifiers + total declarations
  "rules.linesOfCode.max.count": 45, // total selectors + total declarations
  "rules.linesOfCode.max.value": {
    "selectors": [{
      "value": "#my .super [selector]",
      "identifiers": ["#my", ".super", "[selector]"],
      "specificity": {"a": 0, "b": 1, "c": 2, "d": 0}
    }],
    "declarations": [{
      "property": "background",
      "value": "-moz-linear-gradient(#aaaaaa, #bbbbbb)",
      "important": false
    }]
}