[Bug] variables do not recognize in calc

[zenstorage]

Bug Report

Bug Description

Variables not recognized as numbers in calc()

Screenshots

CSS Code

html body ytd-app {
	top: 100;
	transform: translateY(- navbar em);
}

#player-theater-container {
	min-height: calc(100vh em - navbar em)!important;
}

System Information

• OS: Windows
• Browser: Firefox 112
• Stylus Version: 1.5.30

Additional Context

[pabli24]

This is a stylus preprocessor bug
workaraunds:

val = 10em
.example1 {
    --val: val
    height: calc(100vh - var(--val))
}
.example2 {
    height: 'calc(100vh - %s)' % val
}
.example3 {
    height: unquote('calc(100vh - '+ val +')')
}

[pabli24]

stylus/stylus#1766

[zenstorage]

stylus/stylus#1766

thanks

[vednoc]

I just wrote my own calc mixin. It handles most downsides of the built-in version as long as you escape operators—which is what makes this mixin work in the first place. If you don't escape the operators, Stylus-lang will evaluate them and pass down a single argument, resulting in bad behavior (as per case 1 and 2).

calc() {
    x = ''
    for v, k in arguments {
        x += (k > 0) ? ' %s' % v : '%s' % v
    }
    return 'calc(%s)' % unquote(x)
}

x = 16px
y = 16rem
z = var(--n)

:root {
    // bad
    --case1: calc(x - y)
    --case2: calc(x * y)

    // good
    --case3: calc(x \- y \- z)
    --case4: calc(x \* y \+ 8px)    
}

:root {
    /* bad */
    --case1: calc(0px);
    --case2: calc(256px);

    /* good */
    --case3: calc(16px - 16rem - var(--n));
    --case4: calc(16px * 16rem + 8px);
}

[pabli24]

Or even simpler👍

calc(a) {s('calc(%s)',a)}

x = 16px
y = 16rem
z = var(--n)

:root {
    --case3: calc(x \- y \- z)
    --case4: calc(x \* y \+ 8px)
}

[vednoc]

Awesome! I find it interesting how output is exactly the same. It might be better to keep arguments instead of passing additional argument a, though it probably doesn't matter at all.