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