Using flexbox causes an error

[wlepinski]

00:05:17 web.1  |     9| //    - http://www.w3.org/TR/css3-flexbox/#flex-containers
00:05:17 web.1  |    10| //
00:05:17 web.1  |    11| display(type, args...)
00:05:17 web.1  |    12|   if flex == type || inline-flex == type
00:05:17 web.1  |  > 13|     display: vendor-value(box args, only: moz ms webkit) if box in flex-version
00:05:17 web.1  |    14|     display: vendor-value(arguments, only: webkit official) if flex in flex-version // overwrites old webkit
00:05:17 web.1  |    15|   else
00:05:17 web.1  |    16|     display: arguments
00:05:17 web.1  | "in" given invalid right-hand operand, expecting an expression

What I'm doing wrong?

I'm using it this way:

#content-wrapper
    display: flex
    flex-flow: row nowrap
    justify-content: flex-start
    align-content: center
    align-items: flex-start

    #main-sidebar
        order: 1
        flex: 1 1
        align-self: auto
        min-width: auto
        min-height: auto

    #main-content
        order: 2
        flex: 4
        align-self: auto
        min-width: auto
        min-height: auto

[notslang]

using stylus 0.33.1 and nib 0.9.2 I get the following output:

#content-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -o-box-lines: single;
  -ms-box-lines: single;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: center;
  align-content: center;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
#content-wrapper #main-sidebar {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -o-box-ordinal-group: 1;
  -ms-box-ordinal-group: 1;
  -webkit-order: 1;
  order: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1;
  flex: 1 1;
  -webkit-align-self: auto;
  align-self: auto;
  min-width: auto;
  min-height: auto;
}
#content-wrapper #main-content {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -o-box-ordinal-group: 2;
  -ms-box-ordinal-group: 2;
  -webkit-order: 2;
  order: 2;
  -webkit-box-flex: 4;
  -moz-box-flex: 4;
  -o-box-flex: 4;
  -ms-box-flex: 4;
  box-flex: 4;
  -webkit-flex: 4;
  flex: 4;
  -webkit-align-self: auto;
  align-self: auto;
  min-width: auto;
  min-height: auto;
}

...try npm update -g.

[wlepinski]

Probably because asset-rack is using the version 0.32.1 of stylus. Do you know if there's anyway to bypass a module dependency passing a updated version instead?

[notslang]

umm... fork asset-rack, fix their package,json to use ~0.33.1, and PR it back in... and just use your fork till the PR gets accepted & shippped

[wlepinski]

This is what I thought. :( Well.. thanks for your help @slang800.