Preserving importance for everything

lib/nib/border.styl

@@ -4,8 +4,8 @@
  * border: ...
  */
 
-border(color)
+border(color, args...)
   if color is a 'color'
-    border: 1px solid color
+    border: 1px solid color args
   else
     border: arguments

lib/nib/flex.styl

@@ -2,12 +2,12 @@
  * Vendor "display: flex" support with fallback to obsolete versions.
  */
 
-display(type)
+display(type, args...)
   if flex == type || inline-flex == type
-    display: vendor-value(box, only: moz ms webkit)
-    display: vendor-value(type, only: webkit official) // overwrites old webkit
+    display: vendor-value(box args, only: moz ms webkit)
+    display: vendor-value(arguments, only: webkit official) // overwrites old webkit
   else
-    display: type
+    display: arguments
 
 /*
  * New syntax for browsers like Google Chrome.
@@ -39,14 +39,14 @@ align-items(align)
   else if flex-end == align
     align = end
   vendor('box-align', align, ignore: official)
-  
-  // new 
+
+  // new
   vendor('align-items', arguments, only: webkit official)
 
 flex(growth)
   // obsolete
   vendor('box-flex', growth)
-  
+
   // new
   vendor('flex', arguments, only: webkit official)
 
@@ -58,28 +58,28 @@ flex-direction(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)
 
 flex-flow(direction)
   // obsolete
   if row-reverse == direction || column-reverse == direction || wrap-reverse == direction
     vendor('box-direction', 'reverse', ignore: official)
-  
+
   // new
   vendor('flex-flow', arguments, only: webkit official)
 
 flex-grow(growth)
   // obsolete
   vendor('box-flex', growth)
-  
+
   // new
   vendor('flex-grow', arguments, only: webkit official)
 
 order()
   // obsolete
   vendor('box-ordinal-group', arguments, ignore: official)
-  
+
   // new
-  vendor('order', arguments, only: webkit official)
+  vendor('order', arguments, only: webkit official)

lib/nib/vendor.styl

@@ -479,23 +479,24 @@ text-overflow()
  * Helper for border-radius().
  */
 
--apply-border-radius(pos)
+-apply-border-radius(pos, importance)
   if length(pos) == 3
     // border-radius: <top | buttom> <left | right> <n>
     y = pos[0]
     x = pos[1]
-    vendor('border-radius-%s%s' % pos, pos[2], only: moz)
-    vendor('border-%s-%s-radius' % pos, pos[2], ignore: moz)
+    // We don't use moz for simple boder-radius anymore
+    // vendor('border-radius-%s%s' % pos, pos[2], only: moz)
+    vendor('border-%s-%s-radius' % pos, pos[2] importance, only: webkit official)
   else if pos[0] in (top bottom)
     // border-radius: <top | bottom> <n>
-    -apply-border-radius(pos[0] left pos[1])
-    -apply-border-radius(pos[0] right pos[1])
+    -apply-border-radius(pos[0] left pos[1], importance)
+    -apply-border-radius(pos[0] right pos[1], importance)
   else if pos[0] in (left right)
     // border-radius: <left | right> <n>
     unshift(pos, top);
-    -apply-border-radius(pos)
+    -apply-border-radius(pos, importance)
     pos[0] = bottom
-    -apply-border-radius(pos)
+    -apply-border-radius(pos, importance)
 
 /*
  * border-radius supporting vendor prefixes and
@@ -515,6 +516,8 @@ text-overflow()
 border-radius()
   pos = ()
   augmented = false
+  importance = arguments[length(arguments) - 1] == !important ? !important : unquote('')
+
   for args in arguments
     for arg in args
       if arg is a 'ident'
@@ -523,6 +526,6 @@ border-radius()
       else
         append(pos, arg)
         if augmented
-          -apply-border-radius(pos)
+          -apply-border-radius(pos, importance)
           pos = ()
   vendor('border-radius', pos, only: webkit official) unless augmented

test/cases/border.css

@@ -1,5 +1,6 @@
 .foo {
   border: none;
   border: 1px solid #f00;
+  border: 1px solid #0f0 !important;
   border: 1px solid #f00;
-}
+}

test/cases/border.styl

@@ -4,4 +4,5 @@
 .foo
   border: none
   border: red
-  border: 1px solid red
+  border: lime !important
+  border: 1px solid red

test/cases/flex.css

@@ -17,7 +17,18 @@ section div {
   -moz-box-flex: 1;
   -o-box-flex: 1;
   -ms-box-flex: 1;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -ms-box-flex: 1;
   box-flex: 1;
   -webkit-flex: 1 0;
   flex: 1 0;
 }
+section {
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-box !important;
+  display: -webkit-flex !important;
+  display: box !important;
+  display: flex !important;
+}

test/cases/flex.styl

@@ -5,6 +5,9 @@
 section
   display: flex
   flex-direction: row
-  
+
   div
-    flex: 1 0
+    flex: 1 0
+
+section
+  display: flex !important

test/cases/importance.css

@@ -0,0 +1,144 @@
+.test {
+  position: relative !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 0 !important;
+  float: left !important;
+  clear: left !important;
+  display: none !important;
+  visibility: hidden !important;
+  overflow: hidden !important;
+  overflow-x: scroll !important;
+  overflow-y: auto !important;
+  clip: auto !important;
+  -webkit-box-sizing: border-box !important;
+  -moz-box-sizing: border-box !important;
+  box-sizing: border-box !important;
+  margin: 0 !important;
+  margin-top: 0 !important;
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 0 !important;
+  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-height: 0 !important;
+  max-width: 0 !important;
+  outline: 0 !important;
+  border-collapse: collapse !important;
+  border-spacing: 0 !important;
+  border-color: #000 !important;
+  border-top-color: #000 !important;
+  border-right-color: #000 !important;
+  border-bottom-color: #000 !important;
+  border-left-color: #000 !important;
+  border-style: solid !important;
+  border-top-style: solid !important;
+  border-right-style: solid !important;
+  border-bottom-style: solid !important;
+  border-left-style: solid !important;
+  border-width: 0 !important;
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+  border: 1px !important;
+  border-top: 1px !important;
+  border-right: 1px !important;
+  border-bottom: 1px !important;
+  border-left: 1px !important;
+  -webkit-border-radius: 50% !important;
+  border-radius: 50% !important;
+  border-top-right-radius: 50% !important;
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+  -webkit-border-image: none !important;
+  -moz-border-image: none !important;
+  -o-border-image: none !important;
+  border-image: none !important;
+  background-attachment: fixed !important;
+  background-color: #f00 !important;
+  background-image: none !important;
+  background-position-x: 0 !important;
+  background-position-y: 0 !important;
+  background-position: 0 !important;
+  background-repeat: no-repeat !important;
+  -webkit-background-clip: border !important;
+  -moz-background-clip: border !important;
+  background-clip: border-box !important;
+  -webkit-background-origin: padding !important;
+  -moz-background-origin: padding !important;
+  background-origin: padding-box !important;
+  -webkit-background-size: 0 !important;
+  -moz-background-size: 0 !important;
+  background-size: 0 !important;
+  background: none !important;
+  -webkit-box-shadow: 0 1px 0 #000 !important;
+  box-shadow: 0 1px 0 #000 !important;
+  color: rgba(0,0,0,0.5) !important;
+  table-layout: fixed !important;
+  caption-side: top !important;
+  empty-cells: hide !important;
+  list-style-image: none !important;
+  list-style-position: inside !important;
+  list-style-type: disc !important;
+  list-style: none !important;
+  quotes: none !important;
+  content: "lol" !important;
+  counter-increment: none !important;
+  counter-reset: none !important;
+  vertical-align: middle !important;
+  text-align: center !important;
+  text-align-last: right !important;
+  text-decoration: none !important;
+  text-indent: 0 !important;
+  text-justify: auto !important;
+  text-outline: none !important;
+  text-transform: capitalize !important;
+  text-wrap: normal !important;
+  -o-text-overflow: ellipsis !important;
+  text-overflow: ellipsis !important;
+  text-shadow: 0 1px 0 0 #fff !important;
+  line-height: 1.5 !important;
+  white-space: nowrap !important;
+  word-spacing: normal !important;
+  word-wrap: normal !important;
+  word-break: normal !important;
+  -moz-tab-size: 4 !important;
+  -o-tab-size: 4 !important;
+  -webkit-hyphens: manual !important;
+  -moz-hyphens: manual !important;
+  -ms-hyphens: manual !important;
+  hyphens: manual !important;
+  letter-spacing: normal !important;
+  font-family: Monaco, monospace !important;
+  font-size: 21px !important;
+  font-style: italic !important;
+  font-variant: small-caps !important;
+  font-weight: bold !important;
+  font-size-adjust: none !important;
+  font-stretch: condensed !important;
+  font: normal 16px/1.25 Arial, sans-serif !important;
+  opacity: 0.5 !important;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
+  filter: alpha(opacity=50) !important;
+  resize: both !important;
+  cursor: pointer !important;
+  unicode-bidi: normal !important;
+  direction: rtl !important;
+  break-before: auto !important;
+  break-after: auto !important;
+  break-inside: none !important;
+  orphans: 3 !important;
+  widows: 3 !important;
+  zoom: 1 !important;
+}