[BUG] Failing to collect selectors with declaration that only has custom properties

[jonrohan]

I'm not exactly sure what's incorrect but given these inputs, I'm not finding the css grouping that includes :root,[data-attribute="foo"] on cssstats v4.0.2 This started happening when I upgraded from 3.3.0 to 4.0.2

test.css

[data-attribute] {
  color: var(--color-foo);
}
:root,
[data-attribute="foo"] {
  --color-foo: #000;
}

cli command

cssstats test.css

output

{
  "size": 50,
  "gzipSize": 69,
  "humanizedSize": "50B",
  "humanizedGzipSize": "69B",
  "rules": {
    "total": 1,
    "size": {
      "graph": [
        1
      ],
      "max": 1,
      "average": 1
    },
    "selectorByRuleSizes": [
      {
        "selector": "[data-attribute]",
        "declarations": 1
      }
    ]
  },
  "selectors": {
    "total": 1,
    "type": 0,
    "class": 0,
    "id": 0,
    "pseudoClass": 0,
    "pseudoElement": 0,
    "values": [
      "[data-attribute]"
    ],
    "specificity": {
      "max": 10,
      "average": 10
    }
  },
  "declarations": {
    "total": 1,
    "unique": 1,
    "uniqueToTotalRatio": 1,
    "properties": {
      "color": [
        "#fff"
      ]
    }
  },
  "mediaQueries": {
    "total": 0,
    "unique": 0,
    "values": [],
    "contents": []
  }
}

[jonrohan]

Found a workaround. This is breaking not because of the selector but all the properties inside of the call are variables. I guess somewhere in the stack when the input is empty it doesn't count them. This hack fixes the issue though:

test_hack.css

[data-attribute] {
  color: var(--color-foo);
}
:root,
[data-attribute="foo"] {
  --color-foo: #000;
  /* bar */
}

output

{
  "size": 82,
  "gzipSize": 85,
  "humanizedSize": "82B",
  "humanizedGzipSize": "85B",
  "rules": {
    "total": 2,
    "size": {
      "graph": [
        1,
        0
      ],
      "max": 1,
      "average": 0.5
    },
    "selectorByRuleSizes": [
      {
        "selector": "[data-attribute]",
        "declarations": 1
      },
      {
        "selector": ":root,\n[data-attribute=\"foo\"]",
        "declarations": 0
      }
    ]
  },
  "selectors": {
    "total": 3,
    "type": 0,
    "class": 0,
    "id": 0,
    "pseudoClass": 1,
    "pseudoElement": 0,
    "values": [
      "[data-attribute]",
      ":root",
      "[data-attribute=\"foo\"]"
    ],
    "specificity": {
      "max": 10,
      "average": 10
    }
  },
  "declarations": {
    "total": 1,
    "unique": 1,
    "uniqueToTotalRatio": 1,
    "properties": {
      "color": [
        "#000"
      ]
    }
  },
  "mediaQueries": {
    "total": 0,
    "unique": 0,
    "values": [],
    "contents": []
  }
}

[johno]

Thanks for the detailed response!

I'm guessing this has to do with custom property handling. That plugin runs before our stats aggregation so rulesets end up empty and are ignored or potentially even removed.

[johno]

We knew custom property resolution would be a breaking change, hence the major version, but this is indeed buggy behavior we should fix.