Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #95 from kizu/vendor-properties-values

Working with vendor prefixes and values
  • Loading branch information...
commit 67f964d63aa91ed7635c50bac375939888a38915 2 parents ce03edf + 4cd9f4d
@tj authored
View
1  lib/nib/index.styl
@@ -7,7 +7,6 @@
@import 'overflow'
@import 'iconic'
@import 'gradients'
-@import 'box'
@import 'color-image'
@import 'border'
@import 'image'
View
59 lib/nib/vendor.styl
@@ -7,6 +7,53 @@
no-wrap = unquote('nowrap')
/*
+ * Helper to find out is the list of arguments have commas
+ */
+
+is-comma-list()
+ return match('\), \(', ''+arguments)
+
+/*
+ * Literal joining
+ */
+
+literal-join(string, literals)
+ result = unquote('')
+ first = true
+ for args in literals
+ subresult = unquote('')
+ for arg in args
+ subresult = subresult arg
+ if first
+ result = subresult
+ first = false
+ else
+ result = s('%s%s%s', result, unquote(string), subresult)
+ return result
+
+/*
+ * Replacing one value with another
+ */
+
+replace-args(args,argument,val)
+ result = ()
+ // Checking if there are values divided by comma
+ if is-comma-list(args)
+ for subargs in args
+ subresult = ()
+ for arg in subargs
+ arg = unquote(val) if arg == argument
+ push(subresult, arg)
+ subresult = literal-join(' ', subresult) if length(subresult) > 1
+ push(result, subresult)
+ result = literal-join(', ', result)
+ else
+ for arg in args
+ arg = unquote(val) if arg == argument
+ push(result, arg)
+ return result
+
+/*
* Vendor support for the given prop / arguments,
* optionally specifying the only prefixes to utilize,
* or those which should be ignored.
@@ -18,7 +65,11 @@ vendor(prop, args, only = null, ignore = null)
if official == prefix
{prop}: args
else
- {'-' + prefix + '-' + prop}: args
+ newargs = args
+ // Adjusting the args if needed
+ if prop in ('transition' 'transition-property')
+ newargs = replace-args(args, transform, '-' + prefix + '-transform')
+ {'-' + prefix + '-' + prop}: newargs
/*
* Vendorize the given value.
@@ -118,9 +169,9 @@ legacy-bg-values(property, args)
for subargs in args
for arg in subargs
if arg in (border-box padding-box content-box)
- arg = border if arg == border-box
- arg = padding if arg == padding-box
- arg = content if arg == content-box
+ arg = unquote('border') if arg == border-box
+ arg = unquote('padding') if arg == padding-box
+ arg = unquote('content') if arg == content-box
if arg != '!important'
push(legacy_args,arg)
else
View
8 test/cases/vendor.css
@@ -92,6 +92,14 @@ section {
column-gap: 2em;
}
button {
+ -webkit-background-origin: border, padding;
+ -moz-background-origin: border, padding;
+ background-origin: border-box, padding-box;
+ -webkit-background-clip: border, padding;
+ -moz-background-clip: border, padding;
+ background-clip: border-box, padding-box;
+}
+button {
-o-transition: all 0.1s ease-in-out 1s;
-webkit-transition: all 0.1s ease-in-out 1s;
-moz-transition: all 0.1s ease-in-out 1s;
View
4 test/cases/vendor.styl
@@ -53,6 +53,10 @@ section
prepend(vendor-prefixes, o)
button
+ background-origin: border-box, padding-box;
+ background-clip: border-box, padding-box;
+
+button
transition: all 0.1s ease-in-out 1s
backface-visibility: hidden
View
56 test/cases/vendor.values.css
@@ -0,0 +1,56 @@
+button {
+ -webkit-transition: -webkit-transform;
+ -moz-transition: -moz-transform;
+ -o-transition: -o-transform;
+ -ms-transition: -ms-transform;
+ transition: transform;
+}
+button {
+ -webkit-transition: -webkit-transform 0.3s 0.2s linear;
+ -moz-transition: -moz-transform 0.3s 0.2s linear;
+ -o-transition: -o-transform 0.3s 0.2s linear;
+ -ms-transition: -ms-transform 0.3s 0.2s linear;
+ transition: transform 0.3s 0.2s linear;
+}
+button {
+ -webkit-transition: -webkit-transform cubic-bezier(1, 1, 1);
+ -moz-transition: -moz-transform cubic-bezier(1, 1, 1);
+ -o-transition: -o-transform cubic-bezier(1, 1, 1);
+ -ms-transition: -ms-transform cubic-bezier(1, 1, 1);
+ transition: transform cubic-bezier(1, 1, 1);
+}
+button {
+ -webkit-transition: -webkit-transform 2s, width 0.3s linear, height;
+ -moz-transition: -moz-transform 2s, width 0.3s linear, height;
+ -o-transition: -o-transform 2s, width 0.3s linear, height;
+ -ms-transition: -ms-transform 2s, width 0.3s linear, height;
+ transition: transform 2s, width 0.3s linear, height;
+}
+button {
+ -webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
+ -moz-transition: height, -moz-transform 2s, width 0.3s linear;
+ -o-transition: height, -o-transform 2s, width 0.3s linear;
+ -ms-transition: height, -ms-transform 2s, width 0.3s linear;
+ transition: height, transform 2s, width 0.3s linear;
+}
+button {
+ -webkit-transition: -webkit-transform 1s !important;
+ -moz-transition: -moz-transform 1s !important;
+ -o-transition: -o-transform 1s !important;
+ -ms-transition: -ms-transform 1s !important;
+ transition: transform 1s !important;
+}
+button {
+ -webkit-transition: -webkit-transform, height !important;
+ -moz-transition: -moz-transform, height !important;
+ -o-transition: -o-transform, height !important;
+ -ms-transition: -ms-transform, height !important;
+ transition: transform, height !important;
+}
+button {
+ -webkit-transition: -webkit-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
+ -moz-transition: -moz-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
+ -o-transition: -o-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
+ -ms-transition: -ms-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
+ transition: transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
+}
View
26 test/cases/vendor.values.styl
@@ -0,0 +1,26 @@
+
+@import 'nib/vendor'
+
+button
+ transition: transform
+
+button
+ transition: transform .3s .2s linear
+
+button
+ transition: transform cubic-bezier(1,1,1)
+
+button
+ transition: transform 2s, width .3s linear, height
+
+button
+ transition: height, transform 2s, width .3s linear
+
+button
+ transition: transform 1s !important
+
+button
+ transition: transform, height !important
+
+button
+ transition: transform 1s, width 2s linear, cubic-bezier(1,1,1)

0 comments on commit 67f964d

Please sign in to comment.
Something went wrong with that request. Please try again.