8000 address #278 v-style with important priority · openwings/vue@8f25147 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8f25147

Browse files
author
Evan You
committed
address vuejs#278 v-style with important priority
1 parent 31e522a commit 8f25147

File tree

2 files changed

+41
-25
lines changed
  • test/unit/specs

    • 2 files changed

    +41
    -25
    lines changed

    ‎src/directives/style.js

    Lines changed: 11 additions & 15 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,9 +1,4 @@
    1-
    var camelRE = /-([a-z])/g,
    2-
    prefixes = ['webkit', 'moz', 'ms']
    3-
    4-
    function camelReplacer (m) {
    5-
    return m[1].toUpperCase()
    6-
    }
    1+
    var prefixes = ['-webkit-', '-moz-', '-ms-']
    72

    83
    /**
    94
    * Binding for CSS styles
    @@ -13,27 +8,28 @@ module.exports = {
    138
    bind: function () {
    149
    var prop = this.arg
    1510
    if (!prop) return
    16-
    var first = prop.charAt(0)
    17-
    if (first === '$') {
    11+
    if (prop.charAt(0) === '$') {
    1812
    // properties that start with $ will be auto-prefixed
    1913
    prop = prop.slice(1)
    2014
    this.prefixed = true
    21-
    } else if (first === '-') {
    22-
    // normal starting hyphens should not be converted
    23-
    prop = prop.slice(1)
    2415
    }
    25-
    this.prop = prop.replace(camelRE, camelReplacer)
    16+
    this.prop = prop
    2617
    },
    2718

    2819
    update: function (value) {
    2920
    var prop = this.prop
    3021
    if (prop) {
    31-
    this.el.style[prop] = value
    22+
    var isImportant = value.slice(-10) === '!important'
    23+
    ? 'important'
    24+
    : ''
    25+
    if (isImportant) {
    26+
    value = value.slice(0, -10).trim()
    27+
    }
    28+
    this.el.style.setProperty(prop, value, isImportant)
    3229
    if (this.prefixed) {
    33-
    prop = prop.charAt(0).toUpperCase() + prop.slice(1)
    3430
    var i = prefixes.length
    3531
    while (i--) {
    36-
    this.el.style[prefixes[i] + prop] = value
    32+
    this.el.style.setProperty(prefixes[i] + prop, value, isImportant)
    3733
    }
    3834
    }
    3935
    } else {

    ‎test/unit/specs/directives.js

    Lines changed: 30 additions & 10 deletions
    Original file line numberDiff line numberDiff line change
    @@ -659,18 +659,17 @@ describe('Directives', function () {
    659659
    var d = mockDirective('style')
    660660
    d.arg = 'text-align'
    661661
    d.bind()
    662-
    assert.strictEqual(d.prop, 'textAlign')
    662+
    assert.strictEqual(d.prop, 'text-align')
    663663
    d.update('center')
    664664
    assert.strictEqual(d.el.style.textAlign, 'center')
    665665
    })
    666666

    667-
    it('should apply prefixed style', function () {
    667+
    it('should apply style with !important priority', function () {
    668668
    var d = mockDirective('style')
    669-
    d.arg = '-webkit-transform'
    669+
    d.arg = 'font-size'
    670670
    d.bind()
    671-
    assert.strictEqual(d.prop, 'webkitTransform')
    672-
    d.update('scale(2)')
    673-
    assert.strictEqual(d.el.style.webkitTransform, 'scale(2)')
    671+
    d.update('100px !important')
    672+
    assert.strictEqual(d.el.style.getPropertyPriority('font-size'), 'important')
    674673
    })
    675674

    676675
    it('should auto prefix styles', function () {
    @@ -679,12 +678,33 @@ describe('Directives', function () {
    679678
    d.bind()
    680679
    assert.ok(d.prefixed)
    681680
    assert.strictEqual(d.prop, 'transform')
    681+
    682+
    // mock the el's CSSStyleDeclaration object
    683+
    // so we can test setProperty calls
    684+
    var results = []
    685+
    d.el = {
    686+
    style: {
    687+
    setProperty: function (prop, value) {
    688+
    results.push({
    689+
    prop: prop,
    690+
    value: value
    691+
    })
    692+
    }
    693+
    }
    694+
    }
    695+
    682696
    var val = 'scale(2)'
    683697
    d.update(val)
    684-
    assert.strictEqual(d.el.style.transform, val)
    685-
    assert.strictEqual(d.el.style.webkitTransform, val)
    686-
    assert.strictEqual(d.el.style.mozTransform, val)
    687-
    assert.strictEqual(d.el.style.msTransform, val)
    698+
    assert.strictEqual(results.length, 4)
    699+
    assert.strictEqual(results[0].prop, 'transform')
    700+
    assert.strictEqual(results[1].prop, '-ms-transform')
    701+
    assert.strictEqual(results[2].prop, '-moz-transform')
    702+
    assert.strictEqual(results[3].prop, '-webkit-transform')
    703+
    704+
    assert.strictEqual(results[0].value, val)
    705+
    assert.strictEqual(results[1].value, val)
    706+
    assert.strictEqual(results[2].value, val)
    707+
    assert.strictEqual(results[3].value, val)
    688708
    })
    689709

    690710
    it('should set cssText if no arg', function () {

    0 commit comments

    Comments
     (0)
    0