How Vue knows which prefix should prepend when different browser?

Question

Like

<template>
  <h1 :style={ filter: 'blur(1px)' }>My Template!!</h1>
</template>

I used style and webkit to search source code from node_modules/Vue and node_modules/@Vue, but had no luck.

How Vue knows which prefix should prepend when different browser?? So magic it is!!

https://v2.vuejs.org/v2/guide/class-and-style.html#Auto-prefixing

[Example: injecting-browser-prefixes-for-grid-not-working-with-vue](https://stackoverflow.com/questions/51268572/injecting-browser-prefixes-for-grid-not-working-with-vue) — lululala, Apr 17 '20 at 14:59
They use [PostCSS & autoprefixer](https://cli.vuejs.org/guide/css.html#postcss) — Steven B., Apr 17 '20 at 15:04
@StevenB. the size of Vue is 63.5kb, the PostCss 70.6kb even the autoprefixer is 769kb. I knew PostCss and Autoprefixer will precompile CSS, but the inline style could be dynamic, how Vue knows? could u show any source code from Vue? — lululala, Apr 18 '20 at 00:15

score 0 · Answer 1 · answered Apr 18 '20 at 01:23

I suppose I found the answer. The code is under vue/src/platforms/web/runtime/modules/style.js line 32

const vendorNames = ['Webkit', 'Moz', 'ms']

let emptyStyle
const normalize = cached(function (prop) {
  emptyStyle = emptyStyle || document.createElement('div').style
  prop = camelize(prop)
  if (prop !== 'filter' && (prop in emptyStyle)) {
    return prop
  }
  const capName = prop.charAt(0).toUpperCase() + prop.slice(1)
  for (let i = 0; i < vendorNames.length; i++) {
    const name = vendorNames[i] + capName
    if (name in emptyStyle) {
      return name
    }
  }
})

The emptyStyle here is CSSStyleDeclaration from browser. Vue will check every attribute with prefix in CSSStyleDeclaration or not. If yes then will append it and cache it. However, it looks like the filter attribute is an exception here.

Most of CSS we will write in CSS file then it will be compiled by PostCSS and Autoprefixer. Consider the runtime, the code above I guess is the easiest and smallest way to achieve, yet still have some surprises.

How Vue knows which prefix should prepend when different browser?

1 Answers1