calc() statistics

[LeaVerou]

• Which properties is calc() most frequently used in?
• Which units is calc() most frequently used with?
• How complex are the calculations?
• Is calc() used to compute constant non-integer values? If so, which ones? (by @crissov)

[Crissov]

Is calc() used to compute constant non-integer values? If so, which ones?

[LeaVerou]

Nice one @Crissov, added it to the list!

[Crissov]

😊 Itʼs not that I desperately want proof to support phi (which is also unlikely to show up because sqrt() is too new). I am generally curious because I think I have seen such calculations in the wild.

[LeaVerou]

For the properties that calc() is used in, it's enough to traverse values and keep track of properties whose value contains calc(.

For the rest, we can either extract uses of calc() and create a parse tree. Hopefully we can repurpose an expression parser (possibly this?), or wing it with regexes.

• For units, we can match [a-z]+ after numbers and keep a tally
• For calculation complexity, it depends on how we define this. We could guesstimate by the number of opening parens and operators, or by the depth of the tree, which we can either directly measure if we're parsing
• Regarding constants, I suppose if there are no var() terms, or dimension tokens, we can conclude this is a constant?

[LeaVerou]

Just pushed JS for this. In addition to the metrics we have discussed, I'm also counting properties in which calc() appears.

Sample output for the Smashing Magazine CSS:

{
    "total": 276,
    "properties": {
        "font-size": 73,
        "width": 40,
        "padding": 23,
        "margin": 17,
        "margin-top": 16,
        "margin-bottom": 16,
        "top": 12,
        "max-width": 9,
        "padding-top": 9,
        "height": 8,
        "margin-left": 7,
        "line-height": 7,
        "padding-left": 7,
        "left": 6,
        "margin-right": 6,
        "min-height": 4,
        "right": 4,
        "bottom": 3,
        "grid-row-gap": 2,
        "transform": 2,
        "max-height": 1,
        "padding-bottom": 1,
        "background-position": 1,
        "background-size": 1,
        "grid-template-columns": 1
    },
    "units": {
        "vw": 220,
        "em": 184,
        "px": 65,
        "%": 43,
        "rem": 22,
        "vh": 21,
        "deg": 2
    },
    "number_of_different_units": {
        "1": 10,
        "2": 262,
        "3": 4
    },
    "operators": {
        "+": 237,
        "-": 68,
        "/": 20,
        "*": 15
    },
    "number_of_operators": {
        "0": 1,
        "1": 230,
        "2": 32,
        "3": 8,
        "4": 4,
        "6": 1
    },
    "number_of_parens": {
        "0": 251,
        "1": 18,
        "2": 6,
        "4": 1
    },
    "constants": []
}