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}1{2 "aaa":"sample1_aaa__6JRV9"3}:globalの中のクラス名がありません。
:globalを含むセレクタの場合
1.aaa .bbb :global .ccc {2 .ddd {3 font: inherit;4 }5}1{2 "aaa":"sample2_aaa__6Kw_Q"3 "bbb":"sample2_bbb__uXPlQ"4}:global以降とそのセレクタの中のクラス名がありません。
:global(.aaa)形式の場合
1.aaa :global(.bbb) .ccc {2 .ddd {3 font: inherit;4 }5}1{2 "aaa":"sample3_aaa__yFu8N"3 "ccc":"sample3_ccc__aN_ZH"4 "ddd":"sample3_ddd__sLoty"5}: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}1{2 "aaa":"sample4_aaa__HVOjG"3 "ccc":"sample4_ccc__u2g4L"4 "ddd":"sample4_ddd__WOiRS"5 "fff":"sample4_fff__1BALX"6}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()の中はローカルになる。以降の状態には影響しない。