Vue3スタイルのCSS変数注入の実装

まとめ

単一ファイルコンポーネントスタイルでコンポーネント状態駆動型 CSS 変数 (CSS カスタムプロパティ) を使用するためのサポート。

基本的な例

<テンプレート>
  <div class="text">こんにちは</div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        色: '赤'、
        フォント：
          サイズ: '2em',
        },
      }
    },
  }
</スクリプト>

<スタイル>
  。文章 {
    色: v-bind (色);

    /* 式 (引用符で囲む) */
    フォントサイズ: v-bind('font.size');
  }
</スタイル>

モチベーション

Vue SFC スタイルは、簡単な CSS のコロケーションとカプセル化を提供しますが、完全に静的です。つまり、現時点では、コンポーネントの状態に基づいて実行時にスタイルを動的に更新する機能はありません。

現在、ほとんどの最新ブラウザがネイティブ CSS 変数をサポートしているため、これを利用してコンポーネントの状態とスタイルを簡単に接続できます。

デザインの詳細

SFC のタグは、カスタム CSS 関数 v-bind をサポートするようになりました。

<!-- Vue SFC 内 -->
<スタイル>
  。文章 {
    色: v-bind (色);
  }
</スタイル>

予想通り、これにより宣言された値がコンポーネント状態のプロパティ color にバインドされ、reactively.color になります。

この関数は任意のJavaScript式をサポートできますが、JavaScript式にはCSS識別子に無効な文字が含まれる可能性があるため、ほとんどの場合引用符で囲む必要があります: v-bind

。文章 {
  フォントサイズ: v-bind('theme.font.size');
}

このような CSS 変数が検出されると、SFC コンパイラは次の処理を実行します。

ハッシュされた変数名を使用してネイティブのものにオーバーライドします。上記の内容は次のように書き換えられます: v-bind() var()

。文章 {
  色: var (--6b53742-color);
  フォントサイズ: var (--6b53742-theme_font_size);
}

タグにスコープがあるかどうかに関係なく、ハッシュはすべての場合に適用されることに注意してください。つまり、挿入された CSS 変数が誤って子コンポーネントに漏れることはありません。

対応する変数は、インラインスタイルとしてコンポーネントのルート要素に挿入されます。上記の例では、最終的にレンダリングされた DOM は次のようになります。

<div style="--6b53742-color:red;--6b53742-theme_font_size:2em;" class="text">
  こんにちは
</div>

インジェクションはレスポンシブなので、コンポーネントのプロパティが変更されると、インジェクションされた CSS 変数もそれに応じて更新されます。この更新はコンポーネントのテンプレート更新とは独立しているため、純粋な CSS レスポンシブプロパティを変更してもテンプレートの再レンダリングはトリガーされません。

コンパイルの詳細

CSS 変数を挿入するには、コンパイラーが次のコードを生成し、コンポーネントの setup() に挿入する必要があります。

'vue' から { useCssVars } をインポートします

エクスポートデフォルト{
  設定（） {
    //...
    使用CssVars(_ctx => ({
      色: _ctx.color,
      テーマフォントサイズ: _ctx.theme.font.size,
    }))
  },
}

... ここで、ランタイムヘルパーは、変数をレスポンシブに適用する DOM.useCssVars watchEffect を設定します。

このコンパイル戦略では、スクリプトをコンパイルするときに、最初にタグコンテンツに対して簡単な再エンコード分析を実行して、公開される変数のリストを決定する必要があります。ただし、この解析フェーズでは、<style> の完全な AST ベースの解析ほどオーバーヘッドは発生しません。

本番環境では、変数名をさらにハッシュして CSS フットプリントを削減できます。

。文章 {
  色: var (--x3b2fs2);
  フォントサイズ: var (--29fh29g);
}

対応する生成された JavaScript コードでは、それに応じて同じハッシュ値が使用されます。

採用戦略

これは完全に下位互換性のある新しい機能です。ただし、ネイティブ CSS 変数に依存していることを明確にしておく必要があります。そのため、ユーザーはブラウザのサポート範囲を認識する必要があります。

練習する

スクリプトで、wallpaperBlur と wallpaperMask という 2 つのレスポンシブプロパティを宣言します。 wallpaperBlur は壁紙のぼかしレベルを示し、wallpaperMask はマスクの透明度を示します。これらを v-bind 経由でスタイルに適用すると、スクリプト内でこれら 2 つの値を変更すると、スタイルがその変更に反応するようになります。

// スクリプト
const wallpaperBlur = ref('0px')
const wallpaperMask = ref('rgba(0, 0, 0, 0)')

//スタイル
.壁紙 {
  フィルター: ぼかし(v-bind(wallpaperBlur));
  下部: calc(v-bind(wallpaperBlur) * -2);
  左: calc(v-bind(wallpaperBlur) * -2);
  右: calc(v-bind(wallpaperBlur) * -2);
  上: calc(v-bind(wallpaperBlur) * -2);
  .壁紙画像 {
    遷移: 背景画像 0.6 秒、背景色 0.4 秒。
  }
  .壁紙マスク{
    背景色: v-bind(壁紙マスク);
  }
}

ヒント

適切なプロパティをバインドする

上記の例では、マスクの透明度を変更するには、0 から 1 までの数値を宣言し、次のようなスタイルで記述するだけでよいと思われるかもしれません。

.壁紙マスク{
  背景色: rgba(0, 0, 0, v-bind(wallpaperMask));
}

前述のように、スタイルの v-bind はコンパイル段階で CSS 変数として書き換えられます。上記のコードは次のように書き換えられます。

.壁紙マスク{
  背景色: rgba(0, 0, 0, var (--[ハッシュ]-wallpaper_mask));
}

rgba(0, 0, 0, var (--[hash]-wallpaper_mask)) は CSS では解析できません。そのため、wallpaperMask の初期値は rgba(0, 0, 0, 0) として宣言されます。これは非常に重要なポイントであり、CSS にも同様の状況が数多くあります。

スタイルのアップデートに注目

デザインの詳細に記載されている対応する変数は、コンポーネントのルート要素にインラインスタイルとして挿入されます。最終的にレンダリングされた DOM は次のようになります。

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

スタイル内のコンパイルされた CSS 変数に、値が巨大な base64 である CSS 変数が含まれている状況を想像してください。コンポーネント内の他の CSS 変数が更新されると、スタイル全体が更新され、追加のハードウェアオーバーヘッドが発生します。 CSS 変数をコンポーネントのルート要素に挿入し、他の CSS 変数の更新による影響を受けないようにするために、base64 CSS 変数を生成するコンポーネントを分離する必要があります。

参考文献

https://github.com/vuejs/rfcs/pull/231

Vue3 スタイルの CSS 変数インジェクションの実装に関するこの記事はこれで終わりです。Vue3 スタイルの CSS 変数インジェクションに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: