search

noprompt / garden

Generate CSS with Clojure
1.34k stars 87 forks source link

Garden breaks calc(50% + 100px) #115

Open prathyvsh opened 8 years ago

prathyvsh commented 8 years ago

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 commented 7 years ago

+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 commented 7 years ago

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

noprompt commented 7 years ago

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 commented 7 years ago

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

prathyvsh commented 7 years ago

Awesome. Thanks!

noprompt commented 7 years ago

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

noprompt commented 7 years ago

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

paulkoegel commented 5 years ago

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