Conditional flex output

stylus · Nov 24, 2012 · 956bae9 · 956bae9
1 parent 9266c8b
commit 956bae9
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 30 deletions.
diff --git a/lib/nib/flex.styl b/lib/nib/flex.styl
@@ -2,10 +2,12 @@
  * Vendor "display: flex" support with fallback to obsolete versions.
  */
 
+flex-version ?= box flex
+
 display(type, args...)
   if flex == type || inline-flex == type
-    display: vendor-value(box args, only: moz ms webkit)
-    display: vendor-value(arguments, only: webkit official) // overwrites old webkit
+    display: vendor-value(box args, only: moz ms webkit) if box in flex-version
+    display: vendor-value(arguments, only: webkit official) if flex in flex-version // overwrites old webkit
   else
     display: arguments
 
@@ -15,71 +17,89 @@ display(type, args...)
  */
 
 align-content()
-  vendor('align-content', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('align-content', arguments, only: webkit official)
 
 align-self()
-  vendor('align-self', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('align-self', arguments, only: webkit official)
 
 flex-basis()
-  vendor('flex-basis', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-basis', arguments, only: webkit official)
 
 flex-shrink()
-  vendor('flex-shrink', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-shrink', arguments, only: webkit official)
 
 flex-wrap()
-  vendor('flex-wrap', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-wrap', arguments, only: webkit official)
 
 justify-content()
-  vendor('justify-content', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('justify-content', arguments, only: webkit official)
 
 align-items(align)
   // obsolete
-  if flex-start == align
-    align = start
-  else if flex-end == align
-    align = end
-  vendor('box-align', align, ignore: official)
+  if box in flex-version
+    if flex-start == align
+      align = start
+    else if flex-end == align
+      align = end
+    vendor('box-align', align, ignore: official)
 
   // new
-  vendor('align-items', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('align-items', arguments, only: webkit official)
 
 flex(growth)
   // obsolete
-  box-flex growth
+  if box in flex-version
+    box-flex growth
 
   // new
-  vendor('flex', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex', arguments, only: webkit official)
 
 flex-direction(direction)
   // obsolete
-  if row-reverse == direction || column-reverse == direction
-    vendor('box-direction', reverse, ignore: official)
-  if row == direction || row-reverse == direction
-    vendor('box-orient', horizontal, ignore: official)
-  else if column == direction || column-reverse == direction
-    vendor('box-orient', vertical, ignore: official)
+  if box in flex-version
+    if row-reverse == direction || column-reverse == direction
+      vendor('box-direction', reverse, ignore: official)
+    if row == direction || row-reverse == direction
+      vendor('box-orient', horizontal, ignore: official)
+    else if column == direction || column-reverse == direction
+      vendor('box-orient', vertical, ignore: official)
 
   // new
-  vendor('flex-direction', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-direction', arguments, only: webkit official)
 
 flex-flow(direction)
   // obsolete
-  if row-reverse == direction || column-reverse == direction || wrap-reverse == direction
-    vendor('box-direction', 'reverse', ignore: official)
+  if box in flex-version
+    if row-reverse == direction || column-reverse == direction || wrap-reverse == direction
+      vendor('box-direction', 'reverse', ignore: official)
 
   // new
-  vendor('flex-flow', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-flow', arguments, only: webkit official)
 
 flex-grow(growth)
   // obsolete
-  vendor('box-flex', growth)
+  if box in flex-version
+    vendor('box-flex', growth)
 
   // new
-  vendor('flex-grow', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('flex-grow', arguments, only: webkit official)
 
 order()
   // obsolete
-  vendor('box-ordinal-group', arguments, ignore: official)
+  if box in flex-version
+    vendor('box-ordinal-group', arguments, ignore: official)
 
   // new
-  vendor('order', arguments, only: webkit official)
+  if flex in flex-version
+    vendor('order', arguments, only: webkit official)
diff --git a/test/cases/flex.css b/test/cases/flex.css
@@ -29,3 +29,40 @@ section {
   display: box !important;
   display: flex !important;
 }
+section {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-box;
+  display: box;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -o-box-orient: horizontal;
+  -ms-box-orient: horizontal;
+}
+section div {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+}
+section {
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-box !important;
+  display: box !important;
+}
+section {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+section div {
+  -webkit-flex: 1 0;
+  flex: 1 0;
+}
+section {
+  display: -webkit-flex !important;
+  display: flex !important;
+}
diff --git a/test/cases/flex.styl b/test/cases/flex.styl
@@ -11,3 +11,29 @@ section
 
 section
   display: flex !important
+
+// Obsolete property conditional rendering
+flex-version = box
+
+section
+  display: flex
+  flex-direction: row
+
+  div
+    flex: 1 0
+
+section
+  display: flex !important
+
+// New property conditional rendering
+flex-version = flex
+
+section
+  display: flex
+  flex-direction: row
+
+  div
+    flex: 1 0
+
+section
+  display: flex !important