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
  1e39d23f_6ccb_1b5d_e21b_97ca97a0d703["injectStyles()"]
  446765c0_fead_8b03_3a51_e9da6de354ce["insertCSS()"]
  1e39d23f_6ccb_1b5d_e21b_97ca97a0d703 -->|calls| 446765c0_fead_8b03_3a51_e9da6de354ce
  style 1e39d23f_6ccb_1b5d_e21b_97ca97a0d703 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 }
}