CSS Modulesの:globalと:localの効果
CSS Modulesで特定のクラスをインポート対象にせずクラス名をそのまま使いたい場合があります。以下のExceptionsの節で説明されている部分です：
https://github.com/css-modules/css-modules#exceptions
Example:.localA :global .global-b .global-c :local(.localD.localE) .global-d
Exampleの通りではあるのですが、Next.jsのSCSSで使う場合について:globalと:localの効果を確認します。
## :globalセレクタだけの場合
1.aaa {2 :global {3 .bbb {4 font: inherit;5 }6 .ccc {7 font: inherit;8 }9 }10}- Object(1)
- aaa:
- "sample1_aaa__6JRV9"
:globalの中のクラス名がありません。
## :globalを含むセレクタの場合
1.aaa .bbb :global .ccc {2 .ddd {3 font: inherit;4 }5}- Object(2)
- aaa:
- "sample2_aaa__6Kw_Q"
- bbb:
- "sample2_bbb__uXPlQ"
:global以降とそのセレクタの中のクラス名がありません。
## :global(.aaa)形式の場合
1.aaa :global(.bbb) .ccc {2 .ddd {3 font: inherit;4 }5}- Object(3)
- aaa:
- "sample3_aaa__yFu8N"
- ccc:
- "sample3_ccc__aN_ZH"
- ddd:
- "sample3_ddd__sLoty"
:global()の中のクラス名がありません。
## :globalセレクタと:localセレクタを使う場合
1.aaa {2 :global {3 .bbb :local .ccc {4 font: inherit;5 .ddd {6 font: inherit;7 }8 }9 .eee :local(.fff) .ggg {10 font: inherit;11 .hhh {12 font: inherit;13 }14 }15 }16}- Object(4)
- aaa:
- "sample4_aaa__HVOjG"
- ccc:
- "sample4_ccc__u2g4L"
- ddd:
- "sample4_ddd__WOiRS"
- fff:
- "sample4_fff__1BALX"
CSSに変換するとわかりやすいです。
1/*2LLLL _______ GGGG ______ LLLL */3.aaa :global .bbb :local .ccc {4 font: inherit;5}6/*7LLLL _______ GGGG ______ LLLL LLLL */8.aaa :global .bbb :local .ccc .ddd {9 font: inherit;10}11/*12LLLL _______ GGGG ______ LLLL GGGG */13.aaa :global .eee :local(.fff) .ggg {14 font: inherit;15}16/*17LLLL _______ GGGG ______ LLLL GGGG GGGG */18.aaa :global .eee :local(.fff) .ggg .hhh {19 font: inherit;20}ローカルとグローバルがわかるようにLとGコメントを追加しました。Lがついているクラス名がインポート結果に含まれています。
以上より:globalと:localの効果は次のようにまとめられるでしょう：
:global以降はグローバルになる（CSS Modulesの対象にならない）:local以降はローカルになる（CSS Modulesの対象になる）:global()の中はグローバルになる。以降の状態には影響しない。:local()の中はローカルになる。以降の状態には影響しない。