Garden breaks calc(50% + 100px)

[prathyvsh]

Garden removes the space from calc(50% + 100px) and renders it as calc(50%+100px) – without space – which is not valid according to the spec: https://www.w3.org/TR/css3-values/#calc-syntax

Tested it out without pretty printing and it was fixed. Seems the culprit is Garden's dependency on YUI Compressor and it's an unsorted out issue there: https://github.com/yui/yuicompressor/issues/59

The current hacky fix is mentioned by @jamespero Use: calc(X% - -Xpx) instead of using a +

[groundedsage]

+1

I am using calc to create fluid typography. https://www.smashingmagazine.com/2016/05/fluid-typography/

Using this rule is impossible even using the negative negative hack as mentioned above.

[:h1 {:font-size "calc(1.602em + (2.441 - 1.602) * (100vw - 25em)/(62.5 - 25))"}]

For now I have separated out my typography into plain css.

[prathyvsh]

@CommonCreative There seems to be another hack with parentheses. Did you try that one? https://github.com/yui/yuicompressor/issues/59#issuecomment-249556592

[noprompt]

Just a heads up this will be fixed in the 2.0.0 branch soon. Two things are happening there.

1. I'm dropping the dependency on the YUI compressor which is partly responsible for this issue.
2. I'm providing a calc macro which will allow you to write calc expressions like so.

(calc (* (+ (em 1.602)
            (- 2.441 1.602))
         (/ (- (vw 100) (em 25))
            (- 62.5 25))))

[groundedsage]

Thanks for the heads up. Really appreciate your work. It has been a joy using Garden to style my website.

[prathyvsh]

Awesome. Thanks!

[noprompt]

This is patched on the v2.0.0 branch now. Getting closer to having a solid alpha available for consumption.

[noprompt]

https://github.com/noprompt/garden/blob/v2.0.0/test/garden/compiler_test.cljc#L200-L203

[paulkoegel]

This worked for me as a workaround for Garden version 1.3.6:

My aim:

.some-class { width: calc(50% + 490px); }

Workaround for production build:

[:.some-class {:width "calc((50%) - -490px)"}]

Gets compiled to this after YUI compression:

.some-class{width:calc((50%) - -490px);}

see: https://stackoverflow.com/a/46689824