address vuejs#278 v-style with important priority

Author: Evan You

src/directives/style.js

@@ -1,9 +1,4 @@
-var camelRE = /-([a-z])/g,
-    prefixes = ['webkit', 'moz', 'ms']
-
-function camelReplacer (m) {
-    return m[1].toUpperCase()
-}
+var prefixes = ['-webkit-', '-moz-', '-ms-']
 
 /**
  *  Binding for CSS styles
@@ -13,27 +8,28 @@ module.exports = {
     bind: function () {
         var prop = this.arg
         if (!prop) return
-        var first = prop.charAt(0)
-        if (first === '$') {
+        if (prop.charAt(0) === '$') {
             // properties that start with $ will be auto-prefixed
             prop = prop.slice(1)
             this.prefixed = true
-        } else if (first === '-') {
-            // normal starting hyphens should not be converted
-            prop = prop.slice(1)
         }
-        this.prop = prop.replace(camelRE, camelReplacer)
+        this.prop = prop
     },
 
     update: function (value) {
         var prop = this.prop
         if (prop) {
-            this.el.style[prop] = value
+            var isImportant = value.slice(-10) === '!important'
+                ? 'important'
+                : ''
+            if (isImportant) {
+                value = value.slice(0, -10).trim()
+            }
+            this.el.style.setProperty(prop, value, isImportant)
             if (this.prefixed) {
-                prop = prop.charAt(0).toUpperCase() + prop.slice(1)
                 var i = prefixes.length
                 while (i--) {
-                    this.el.style[prefixes[i] + prop] = value
+                    this.el.style.setProperty(prefixes[i] + prop, value, isImportant)
                 }
             }
         } else {

test/unit/specs/directives.js

@@ -659,18 +659,17 @@ describe('Directives', function () {
             var d = mockDirective('style')
             d.arg = 'text-align'
             d.bind()
-            assert.strictEqual(d.prop, 'textAlign')
+            assert.strictEqual(d.prop, 'text-align')
             d.update('center')
             assert.strictEqual(d.el.style.textAlign, 'center')
         })
 
-        it('should apply prefixed style', function () {
+        it('should apply style with !important priority', function () {
             var d = mockDirective('style')
-            d.arg = '-webkit-transform'
+            d.arg = 'font-size'
             d.bind()
-            assert.strictEqual(d.prop, 'webkitTransform')
-            d.update('scale(2)')
-            assert.strictEqual(d.el.style.webkitTransform, 'scale(2)')
+            d.update('100px !important')
+            assert.strictEqual(d.el.style.getPropertyPriority('font-size'), 'important')
         })
 
         it('should auto prefix styles', function () {
@@ -679,12 +678,33 @@ describe('Directives', function () {
             d.bind()
             assert.ok(d.prefixed)
             assert.strictEqual(d.prop, 'transform')
+
+            // mock the el's CSSStyleDeclaration object
+            // so we can test setProperty calls
+            var results = []
+            d.el = {
+                style: {
+                    setProperty: function (prop, value) {
+                        results.push({
+                            prop: prop,
+                            value: value
+                        })
+                    }
+                }
+            }
+
             var val = 'scale(2)'
             d.update(val)
-            assert.strictEqual(d.el.style.transform, val)
-            assert.strictEqual(d.el.style.webkitTransform, val)
-            assert.strictEqual(d.el.style.mozTransform, val)
-            assert.strictEqual(d.el.style.msTransform, val)
+            assert.strictEqual(results.length, 4)
+            assert.strictEqual(results[0].prop, 'transform')
+            assert.strictEqual(results[1].prop, '-ms-transform')
+            assert.strictEqual(results[2].prop, '-moz-transform')
+            assert.strictEqual(results[3].prop, '-webkit-transform')
+
+            assert.strictEqual(results[0].value, val)
+            assert.strictEqual(results[1].value, val)
+            assert.strictEqual(results[2].value, val)
+            assert.strictEqual(results[3].value, val)
         })
 
         it('should set cssText if no arg', function () {