Vue 3 style CSS 변수 주입 의 실현

요약
단일 파일 구성 요소 스타일 에서 구성 요소 상태 로 구동 되 는 CSS 변수(CSS 사용자 정의 속성)를 지원 합 니 다.
기초 예시

<template>
  <div class="text">hello</div>
</template>

<script>
  export default {
    data() {
      return {
        color: 'red',
        font: {
          size: '2em',
        },
      }
    },
  }
</script>

<style>
  .text {
    color: v-bind (color);

    /* expressions (wrap in quotes) */
    font-size: v-bind ('font.size');
  }
</style>

동기
Vue SFC 스타일 은 직접적인 CSS 조합 과 패 키 징 을 제공 하지만 순수한 정적 입 니 다.이것 은 지금까지 실행 할 때 구성 요소 의 상태 에 따라 동적 으로 스타일 을 업데이트 할 능력 이 없다 는 것 을 의미 합 니 다.
현재 대부분의 현대 브 라 우 저가 원생 CSS 변 수 를 지원 함 에 따라 구성 요소 의 상태 와 스타일 을 쉽게 연결 할 수 있 습 니 다.
디자인 디 테 일
SFC 의 탭 은 현재 사용자 정의 CSS 함수 v-bind 를 지원 합 니 다.

<!-- in Vue SFC -->
<style>
  .text {
    color: v-bind (color);
  }
</style>

예상 한 바 와 같이,이것 은 성명 의 값 을 구성 요소 상태의 속성 에 연결 합 니 다.reactively.color color
이 함수 내 부 는 임의의 자 바스 크 립 트 표현 식 을 지원 할 수 있 지만,자 바스 크 립 트 표현 식 은 CSS 식별 자 에 잘못된 문 자 를 포함 할 수 있 기 때문에 대부분의 경우 따옴표 로 감 싸 야 합 니 다:v-bind

.text {
  font-size: v-bind ('theme.font.size');
}

이러한 CSS 변 수 를 감지 하면 SFC 컴 파 일 러 는 다음 과 같은 동작 을 수행 합 니 다.
해시 변수 이름 이 있 는 이 컴퓨터 에 다시 쓰 십시오.위의 내용 은 v-bind()var()로 바 뀝 니 다.

.text {
  color: var (--6b53742-color);
  font-size: var (--6b53742-theme_font_size);
}

해시 태그 가 범위 가 있 든 없 든 모든 상황 에 적 용 됩 니 다.이 는 주 입 된 CSS 변수 가 하위 구성 요소 에 외부 로 유출 되 지 않 는 다 는 뜻 이다.
해당 변 수 는 내 연 스타일 로 구성 요소 의 루트 요소 에 주 입 됩 니 다.위의 예 에 대해 최종 적 으로 보 여 주 는 DOM 은 이렇게 보일 것 입 니 다.

<div style="--6b53742-color:red;--6b53742-theme_font_size:2em;" class="text">
  hello
</div>

주입 은 응답 식 이 므 로 구성 요소 의 속성 이 변 하면 주입 한 CSS 변 수 는 상응 하 게 업 데 이 트 됩 니 다.이 업 데 이 트 는 구성 요소 의 템 플 릿 업데이트 에 독립 되 어 있 기 때문에 순수한 CSS 의 응답 식 속성 에 대한 변 화 는 템 플 릿 의 재 렌 더 링 을 촉발 하지 않 습 니 다.
컴 파일 디 테 일
CSS 변 수 를 주입 하기 위해 서 컴 파 일 러 는 구성 요소 의 setup()에 다음 코드 를 생 성하 고 주입 해 야 합 니 다.

import { useCssVars } from 'vue'

export default {
  setup() {
    //...
    useCssVars(_ctx => ({
      color: _ctx.color,
      theme_font_size: _ctx.theme.font.size,
    }))
  },
}

...여기 서 실행 할 때 도움말 기 는 변 수 를 DOM.useCssVars watch Effect 에 응답 하 는 변 수 를 설정 합 니 다.
이 컴 파일 정책 은 스 크 립 트 컴 파일 을 요구 할 때 먼저 탭 내용 을 간단하게 재 디 코딩 하여 노출 할 변수 목록 을 확인 합 니 다.그러나 이 분석 단 계 는 AST 기반 의 완전한 해석