【CSS Modules】symbolsアットルール記述子の使い方

Copy
1/*
2 * variables.module.css: 共通の値をCSS Modulesの「シンボル」として定義します。
3 * これらのシンボルは、他のCSS Modulesファイルからインポートして再利用可能です。
4 *
5 * ここで定義された名前（例: primaryColor）が、モジュール間で共有される「シンボル」として機能します。
6 */
7@value primaryColor: #007bff; /* 主要な色をシンボルとして定義 */
8@value textColor: #333;      /* テキストの色をシンボルとして定義 */
9@value borderRadius: 4px;   /* 角丸の半径をシンボルとして定義 */
10@value fontSizeBase: 16px;  /* 基本のフォントサイズをシンボルとして定義 */
11
12/*
13 * button.module.css: 上記で定義されたシンボルをインポートし、利用するコンポーネントのスタイルです。
14 * CSS Modulesのビルドプロセスにより、これらのシンボルが適切に解決され、
15 * グローバルスコープを汚染することなく値を共有できます。
16 */
17/* 他のCSS Modulesファイルからシンボルをインポート */
18@value primaryColor, textColor, borderRadius, fontSizeBase from './variables.module.css';
19
20.button {
21  /* インポートしたシンボルを使ってスタイルを定義 */
22  background-color: primaryColor; /* 'primaryColor'シンボルを使用 */
23  color: textColor;             /* 'textColor'シンボルを使用 */
24  border: none;
25  padding: 10px 20px;
26  border-radius: borderRadius;  /* 'borderRadius'シンボルを使用 */
27  cursor: pointer;
28  font-size: fontSizeBase;      /* 'fontSizeBase'シンボルを使用 */
29  transition: background-color 0.3s ease;
30}
31
32.button:hover {
33  background-color: darken(primaryColor, 10%); /* CSS ModulesではPostCSSなどと組み合わせることでこのような関数も利用可能 */
34}

CSS Modulesにおける@valueルールは、プロジェクト全体で共通して利用する色やサイズなどの値を「シンボル」として定義し、他のCSS Modulesファイルからインポートして再利用するための機能です。この仕組みにより、グローバルスコープを汚染することなく、特定のコンポーネント内でのみ有効な形で共通の値を安全に共有できます。コードの一貫性を保ち、変更管理を容易にする効果があります。

サンプルコードのvariables.module.cssでは、@value primaryColor: #007bff;のように、@valueキーワードを使ってprimaryColorやtextColorといった名前（シンボル）に具体的な値を割り当てています。これらのシンボルは、CSSプロパティの値として利用される共通の名前として機能します。

次に、button.module.cssでは、@value primaryColor, ... from './variables.module.css';という構文で、variables.module.cssで定義されたシンボルをインポートしています。インポートされたシンボルは、.buttonクラスのスタイル定義内でbackground-color: primaryColor;のように、CSSプロパティの値として直接参照されます。CSS Modulesのビルドプロセスがこれらのシンボルを適切な値に解決するため、開発者はグローバルな名前の衝突を気にすることなく、共通の値を効率的に利用し、コンポーネントスタイルの統一性を高めることができます。@valueは引数や戻り値を持つ機能ではなく、単に値を定義し参照するためのディレクティブです。

Copy
1/*
2 * このコードは、提供されたリファレンス情報「CSS Modulesのsymbols at-rule-descriptor」に
3 * 最も関連性の高い標準CSSの機能である `@counter-style` の `symbols` ディスクリプタの例です。
4 *
5 * 【重要】提供されたリファレンス情報では「引数: なし」とありますが、
6 * 標準CSSの `@counter-style` の `symbols` ディスクリプタは、
7 * カウンターとして使用する記号（文字列、画像、絵文字など）を引数として指定します。
8 * この点についてご留意ください。
9 *
10 * CSS Modulesのコンテキストでは、`@counter-style` ルール自体は通常グローバルスコープで適用されます。
11 * .module.css ファイル内で定義しても、そのスタイル名はグローバルに利用可能です。
12 */
13
14/*
15 * @counter-style ルールを定義します。
16 * これは、HTMLのリスト（<ul>や<ol>）の項目に独自の記号やスタイルを適用するために使用されます。
17 */
18@counter-style custom-bullet-symbols {
19  /*
20   * symbols ディスクリプタ:
21   * カウンターとして使用する記号をカンマ区切りで指定します。
22   * 例えば、"⭐" (星), "✨" (きらきら), "✅" (チェックマーク) を順番に使用します。
23   * ここでは絵文字を使っていますが、文字列や `url()` 関数で指定する画像ファイルも使用可能です。
24   */
25  symbols: "⭐", "✨", "✅"; /* <== ここで引数として記号のリストを指定します */
26
27  /*
28   * system ディスクリプタ:
29   * 記号の繰り返し方法を定義します。
30   * 'cyclic' は、記号のリストが尽きたら最初に戻って繰り返すことを意味します。
31   */
32  system: cyclic;
33
34  /*
35   * suffix ディスクリプタ:
36   * 各記号の後ろに表示する内容を定義します。ここでは半角スペースとします。
37   */
38  suffix: " ";
39}
40
41/*
42 * CSS Modulesのクラス定義例。
43 * このクラス（例: `.customList`）を持つHTMLのリストに、
44 * 上記で定義したカスタムカウンタースタイルを適用します。
45 */
46.customList {
47  /*
48   * list-style プロパティを使用して、定義したカスタムカウンタースタイルを適用します。
49   * CSS Modulesのクラス名（例: `.customList`）は通常ローカルスコープですが、
50   * `@counter-style` の名前（例: `custom-bullet-symbols`）はグローバルに解決されます。
51   */
52  list-style: custom-bullet-symbols;
53  padding-left: 20px; /* リストのインデント（左の余白）を調整します */
54}
55
56/*
57 * リストアイテム（<li>要素）の基本的なスタイルを調整する例
58 */
59.customList li {
60  margin-bottom: 5px; /* 各リストアイテムの下部に少し余白を追加します */
61  font-size: 1.1em;   /* 文字サイズを少し大きくします */
62  color: #333;        /* 文字色を濃いグレーにします */
63}

このコードは、リファレンス情報にある「CSS Modulesのsymbols at-rule-descriptor」が、標準CSSの@counter-styleルール内で使われるsymbolsディスクリプタと関連が深いことから、その具体的な例として構成されています。@counter-styleルールは、HTMLのリスト項目（例えば<ul>や<ol>の<li>）に、独自の記号やスタイルを適用するためのCSSの規則です。

提供されたリファレンス情報では「引数: なし」と記述されていますが、サンプルコードが示す標準CSSの@counter-styleのsymbolsディスクリプタは、カウンターとして使用する具体的な「記号のリスト」を引数として受け取ります。この引数には、絵文字、文字列、または画像へのパスなどをカンマ区切りで指定でき、リストの各項目の先頭に表示されるマーカーを定義する役割を持ちます。

サンプルコードでは、@counter-style custom-bullet-symbolsを定義し、その中でsymbols: "⭐", "✨", "✅";と指定することで、星、きらきら、チェックマークの絵文字を順番に表示するカスタムマーカーを作成しています。system: cyclic;は、指定した記号のリストが尽きた際に最初に戻って繰り返すよう設定し、suffix: " ";は各記号の後に半角スペースを追加しています。

このカスタムカウンタースタイルは、CSS Modulesで定義された.customListクラスにlist-style: custom-bullet-symbols;と指定することで適用されます。@counter-styleで定義されたスタイル名（custom-bullet-symbolsなど）はグローバルに機能するため、CSS Modulesのローカルスコープなクラスからでも参照して利用できる点が特徴です。この機能には戻り値はありません。