injectStyles() — vue Function Reference

Architecture documentation for the injectStyles() function in helpers.ts from the vue codebase.

Function typescript CompilerSFC StyleProcessor calls 1

Entity Profile

CompilerSFC→ StyleProcessor→ injectStyles() — vue Function Reference

Dependency Diagram

graph TD
  84b5200e_9572_395c_49ed_98c6dc7ba9f2["injectStyles()"]
  e36f34fa_ce0b_6e35_f3e0_e2cebbd0d05e["helpers.ts"]
  84b5200e_9572_395c_49ed_98c6dc7ba9f2 -->|defined in| e36f34fa_ce0b_6e35_f3e0_e2cebbd0d05e
  16d32224_ba08_4e62_38fe_4e905634c1f2["insertCSS()"]
  84b5200e_9572_395c_49ed_98c6dc7ba9f2 -->|calls| 16d32224_ba08_4e62_38fe_4e905634c1f2
  style 84b5200e_9572_395c_49ed_98c6dc7ba9f2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

test/transition/helpers.ts lines 92–144

export function injectStyles() {
  if (injected) return { duration, buffer }
  injected = true
  insertCSS(`
    .test {
      -webkit-transition: opacity ${duration}ms ease;
      transition: opacity ${duration}ms ease;
    }
    .group-move {
      -webkit-transition: -webkit-transform ${duration}ms ease;
      transition: transform ${duration}ms ease;
    }
    .v-appear, .v-enter, .v-leave-active,
    .test-appear, .test-enter, .test-leave-active,
    .hello, .bye.active,
    .changed-enter {
      opacity: 0;
    }
    .test-anim-enter-active {
      animation: test-enter ${duration}ms;
      -webkit-animation: test-enter ${duration}ms;
    }
    .test-anim-leave-active {
      animation: test-leave ${duration}ms;
      -webkit-animation: test-leave ${duration}ms;
    }
    .test-anim-long-enter-active {
      animation: test-enter ${duration * 2}ms;
      -webkit-animation: test-enter ${duration * 2}ms;
    }
    .test-anim-long-leave-active {
      animation: test-leave ${duration * 2}ms;
      -webkit-animation: test-leave ${duration * 2}ms;
    }
    @keyframes test-enter {
      from { opacity: 0 }
      to { opacity: 1 }
    }
    @-webkit-keyframes test-enter {
      from { opacity: 0 }
      to { opacity: 1 }
    }
    @keyframes test-leave {
      from { opacity: 1 }
      to { opacity: 0 }
    }
    @-webkit-keyframes test-leave {
      from { opacity: 1 }
      to { opacity: 0 }
    }
  `)
  return { duration, buffer }
}