Skip to content
This repository
Browse code

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 Holowaychuk authored
1  lib/nib/index.styl
@@ -7,7 +7,6 @@
7 7 @import 'overflow'
8 8 @import 'iconic'
9 9 @import 'gradients'
10   -@import 'box'
11 10 @import 'color-image'
12 11 @import 'border'
13 12 @import 'image'
59 lib/nib/vendor.styl
@@ -7,6 +7,53 @@
7 7 no-wrap = unquote('nowrap')
8 8
9 9 /*
  10 + * Helper to find out is the list of arguments have commas
  11 + */
  12 +
  13 +is-comma-list()
  14 + return match('\), \(', ''+arguments)
  15 +
  16 +/*
  17 + * Literal joining
  18 + */
  19 +
  20 +literal-join(string, literals)
  21 + result = unquote('')
  22 + first = true
  23 + for args in literals
  24 + subresult = unquote('')
  25 + for arg in args
  26 + subresult = subresult arg
  27 + if first
  28 + result = subresult
  29 + first = false
  30 + else
  31 + result = s('%s%s%s', result, unquote(string), subresult)
  32 + return result
  33 +
  34 +/*
  35 + * Replacing one value with another
  36 + */
  37 +
  38 +replace-args(args,argument,val)
  39 + result = ()
  40 + // Checking if there are values divided by comma
  41 + if is-comma-list(args)
  42 + for subargs in args
  43 + subresult = ()
  44 + for arg in subargs
  45 + arg = unquote(val) if arg == argument
  46 + push(subresult, arg)
  47 + subresult = literal-join(' ', subresult) if length(subresult) > 1
  48 + push(result, subresult)
  49 + result = literal-join(', ', result)
  50 + else
  51 + for arg in args
  52 + arg = unquote(val) if arg == argument
  53 + push(result, arg)
  54 + return result
  55 +
  56 +/*
10 57 * Vendor support for the given prop / arguments,
11 58 * optionally specifying the only prefixes to utilize,
12 59 * or those which should be ignored.
@@ -18,7 +65,11 @@ vendor(prop, args, only = null, ignore = null)
18 65 if official == prefix
19 66 {prop}: args
20 67 else
21   - {'-' + prefix + '-' + prop}: args
  68 + newargs = args
  69 + // Adjusting the args if needed
  70 + if prop in ('transition' 'transition-property')
  71 + newargs = replace-args(args, transform, '-' + prefix + '-transform')
  72 + {'-' + prefix + '-' + prop}: newargs
22 73
23 74 /*
24 75 * Vendorize the given value.
@@ -118,9 +169,9 @@ legacy-bg-values(property, args)
118 169 for subargs in args
119 170 for arg in subargs
120 171 if arg in (border-box padding-box content-box)
121   - arg = border if arg == border-box
122   - arg = padding if arg == padding-box
123   - arg = content if arg == content-box
  172 + arg = unquote('border') if arg == border-box
  173 + arg = unquote('padding') if arg == padding-box
  174 + arg = unquote('content') if arg == content-box
124 175 if arg != '!important'
125 176 push(legacy_args,arg)
126 177 else
8 test/cases/vendor.css
@@ -92,6 +92,14 @@ section {
92 92 column-gap: 2em;
93 93 }
94 94 button {
  95 + -webkit-background-origin: border, padding;
  96 + -moz-background-origin: border, padding;
  97 + background-origin: border-box, padding-box;
  98 + -webkit-background-clip: border, padding;
  99 + -moz-background-clip: border, padding;
  100 + background-clip: border-box, padding-box;
  101 +}
  102 +button {
95 103 -o-transition: all 0.1s ease-in-out 1s;
96 104 -webkit-transition: all 0.1s ease-in-out 1s;
97 105 -moz-transition: all 0.1s ease-in-out 1s;
4 test/cases/vendor.styl
@@ -53,6 +53,10 @@ section
53 53 prepend(vendor-prefixes, o)
54 54
55 55 button
  56 + background-origin: border-box, padding-box;
  57 + background-clip: border-box, padding-box;
  58 +
  59 +button
56 60 transition: all 0.1s ease-in-out 1s
57 61 backface-visibility: hidden
58 62
56 test/cases/vendor.values.css
... ... @@ -0,0 +1,56 @@
  1 +button {
  2 + -webkit-transition: -webkit-transform;
  3 + -moz-transition: -moz-transform;
  4 + -o-transition: -o-transform;
  5 + -ms-transition: -ms-transform;
  6 + transition: transform;
  7 +}
  8 +button {
  9 + -webkit-transition: -webkit-transform 0.3s 0.2s linear;
  10 + -moz-transition: -moz-transform 0.3s 0.2s linear;
  11 + -o-transition: -o-transform 0.3s 0.2s linear;
  12 + -ms-transition: -ms-transform 0.3s 0.2s linear;
  13 + transition: transform 0.3s 0.2s linear;
  14 +}
  15 +button {
  16 + -webkit-transition: -webkit-transform cubic-bezier(1, 1, 1);
  17 + -moz-transition: -moz-transform cubic-bezier(1, 1, 1);
  18 + -o-transition: -o-transform cubic-bezier(1, 1, 1);
  19 + -ms-transition: -ms-transform cubic-bezier(1, 1, 1);
  20 + transition: transform cubic-bezier(1, 1, 1);
  21 +}
  22 +button {
  23 + -webkit-transition: -webkit-transform 2s, width 0.3s linear, height;
  24 + -moz-transition: -moz-transform 2s, width 0.3s linear, height;
  25 + -o-transition: -o-transform 2s, width 0.3s linear, height;
  26 + -ms-transition: -ms-transform 2s, width 0.3s linear, height;
  27 + transition: transform 2s, width 0.3s linear, height;
  28 +}
  29 +button {
  30 + -webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
  31 + -moz-transition: height, -moz-transform 2s, width 0.3s linear;
  32 + -o-transition: height, -o-transform 2s, width 0.3s linear;
  33 + -ms-transition: height, -ms-transform 2s, width 0.3s linear;
  34 + transition: height, transform 2s, width 0.3s linear;
  35 +}
  36 +button {
  37 + -webkit-transition: -webkit-transform 1s !important;
  38 + -moz-transition: -moz-transform 1s !important;
  39 + -o-transition: -o-transform 1s !important;
  40 + -ms-transition: -ms-transform 1s !important;
  41 + transition: transform 1s !important;
  42 +}
  43 +button {
  44 + -webkit-transition: -webkit-transform, height !important;
  45 + -moz-transition: -moz-transform, height !important;
  46 + -o-transition: -o-transform, height !important;
  47 + -ms-transition: -ms-transform, height !important;
  48 + transition: transform, height !important;
  49 +}
  50 +button {
  51 + -webkit-transition: -webkit-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
  52 + -moz-transition: -moz-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
  53 + -o-transition: -o-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
  54 + -ms-transition: -ms-transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
  55 + transition: transform 1s, width 2s linear, cubic-bezier(1, 1, 1);
  56 +}
26 test/cases/vendor.values.styl
... ... @@ -0,0 +1,26 @@
  1 +
  2 +@import 'nib/vendor'
  3 +
  4 +button
  5 + transition: transform
  6 +
  7 +button
  8 + transition: transform .3s .2s linear
  9 +
  10 +button
  11 + transition: transform cubic-bezier(1,1,1)
  12 +
  13 +button
  14 + transition: transform 2s, width .3s linear, height
  15 +
  16 +button
  17 + transition: height, transform 2s, width .3s linear
  18 +
  19 +button
  20 + transition: transform 1s !important
  21 +
  22 +button
  23 + transition: transform, height !important
  24 +
  25 +button
  26 + 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.