diff --git a/lib/nib/border.styl b/lib/nib/border.styl index 16ca210a..b65ffb43 100644 --- a/lib/nib/border.styl +++ b/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 diff --git a/lib/nib/flex.styl b/lib/nib/flex.styl index 0b72fd2e..4f81e209 100644 --- a/lib/nib/flex.styl +++ b/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,7 +58,7 @@ 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) @@ -66,20 +66,20 @@ 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) \ No newline at end of file + vendor('order', arguments, only: webkit official) diff --git a/lib/nib/vendor.styl b/lib/nib/vendor.styl index 51965d02..08786e99 100644 --- a/lib/nib/vendor.styl +++ b/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: 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: - -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: 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 diff --git a/test/cases/border.css b/test/cases/border.css index 3d3c0563..da89eff2 100644 --- a/test/cases/border.css +++ b/test/cases/border.css @@ -1,5 +1,6 @@ .foo { border: none; border: 1px solid #f00; + border: 1px solid #0f0 !important; border: 1px solid #f00; -} \ No newline at end of file +} diff --git a/test/cases/border.styl b/test/cases/border.styl index 92e5e7b0..f5158aae 100644 --- a/test/cases/border.styl +++ b/test/cases/border.styl @@ -4,4 +4,5 @@ .foo border: none border: red - border: 1px solid red \ No newline at end of file + border: lime !important + border: 1px solid red diff --git a/test/cases/flex.css b/test/cases/flex.css index 70db2345..38c2ccac 100644 --- a/test/cases/flex.css +++ b/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; +} diff --git a/test/cases/flex.styl b/test/cases/flex.styl index 99d18284..39b58e79 100644 --- a/test/cases/flex.styl +++ b/test/cases/flex.styl @@ -5,6 +5,9 @@ section display: flex flex-direction: row - + div - flex: 1 0 \ No newline at end of file + flex: 1 0 + +section + display: flex !important diff --git a/test/cases/importance.css b/test/cases/importance.css new file mode 100644 index 00000000..bf6ae48e --- /dev/null +++ b/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; +} diff --git a/test/cases/importance.styl b/test/cases/importance.styl new file mode 100644 index 00000000..98bcdaa3 --- /dev/null +++ b/test/cases/importance.styl @@ -0,0 +1,138 @@ + +@import 'nib' + +.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 + 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 + 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 + + border-image: none !important + background-attachment: fixed !important + background-color: red !important + background-image: none !important + background-position-x: 0 !important + background-position-y: 0 !important + background-position: 0 !important + background-repeat: no-repeat !important + background-clip: border-box !important + background-origin: padding-box !important + background-size: 0 !important + background: none !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 + 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 + tab-size: 4 !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 + 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 diff --git a/test/cases/vendor.border-radius.css b/test/cases/vendor.border-radius.css index a9d190c1..82ba9816 100644 --- a/test/cases/vendor.border-radius.css +++ b/test/cases/vendor.border-radius.css @@ -3,54 +3,42 @@ button { border-radius: 1px 2px/3px 4px; } button { - -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; - -o-border-top-left-radius: 10px; - -ms-border-top-left-radius: 10px; border-top-left-radius: 10px; } button { - -moz-border-radius-bottomright: 5px; + -webkit-border-top-left-radius: 10px !important; + border-top-left-radius: 10px !important; +} +button { -webkit-border-bottom-right-radius: 5px; - -o-border-bottom-right-radius: 5px; - -ms-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } button { - -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; - -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } button { - -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; - -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } button { - -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; - -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; - -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; - -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } button { - -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; - -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } diff --git a/test/cases/vendor.border-radius.styl b/test/cases/vendor.border-radius.styl index d4f0b256..12be550f 100644 --- a/test/cases/vendor.border-radius.styl +++ b/test/cases/vendor.border-radius.styl @@ -7,6 +7,9 @@ button button border-radius: top left 10px +button + border-radius: top left 10px !important + button border-radius: bottom right 5px @@ -27,4 +30,4 @@ button prepend(vendor-prefixes, ms, o) button - border-radius: 5px \ No newline at end of file + border-radius: 5px