nib + css3pie : compilation shoud just copy/paste unknown prefixed properties

[domi-papin]

On my latest project, i use concurrently stylus and css3pie. sidenote : css3pie adds support of CSS3 properties to IE7-9.

Due to IE internals, PIE cannot support background rules as-is. So one has to add a prefixed rule specific to PIE.

        background linear-gradient(top, 0% #46BFD3, 4% #3398B7, 100% #287790)
        -pie-background linear-gradient(top, 0% #46BFD3, 4% #3398B7, 100% #287790)

Unfortunately the -pie-background rule is compiled by nib into

  -pie-background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6799b9), color-stop(0.04, #6799b9), color-stop(0.05, #5188ab), color-stop(1, #0e537e));
  -pie-background: -webkit-linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);
  -pie-background: -moz-linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);
  -pie-background: linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);

which is useless.... i know i can wrap the rule in @css {} but compiler should just ignore my -pie- rules and copy it to output..

Note: i still want to use nib to generate background-gradient for moz/webkit/o browser and even for future ms-ie10 browser which supports it. CSS3PIE is only there to support old IE (ie. IE6-9)

thoughts ?

http://twitter.com/signap

[RwwL]

I would also be interested in seeing the -pie-background rule supported somehow in nib, but I wouldn't want want to see those rules ignored completely if it meant I couldn't use variable names for the color values in the -pie-background's gradient.

[walling]

I think it would be awesome if Nib added -pie-background automagically (in cases for background that makes sense). This feature should be enabled by a global config variable use-css3pie.

[walling]

The above pull request fixes this issue. Possible quick fix:

// css3pie.styl file:

css3pie-path = "PIE.htc"

pie()
  if css3pie-path
    behavior url(css3pie-path)

pie-linear-gradient(start, stops...)
  background linear-gradient(start, stops)
  -pie-background unquote("linear-gradient(%s, %s)" % (start stops))

// Usage:

body
  pie-linear-gradient top, 0% #46BFD3, 4% #3398B7, 100% #287790
  pie()

.fancy-box
  border-radius 5px
  pie()