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()
の中はローカルになる。以降の状態には影響しない。