CSS Modulesの:localに入れっ子Classを効かせる

TL;DR

こんな書き方でした。要するに、:localの中で:globalを明示的に宣言することでした。

foo.scss

:local {
  .foo {
    width: 100%;
    height: 200px;
    :global {
      .bar {
        color: blue;
      }
      .baz {
        background-color: green;
      }
    }
  }
}

はじめに

Reactでも、Vue.jsみたいにスコープ付き CSSを使いたい時、css-loaderを使って、CSS Modulesとして導入する方法があります。

しかし、下記の記述だと、<Foo/> にはスタイルが効くものの、その配下のdiv.barやdiv.bazまでスタイルは効いてくれませんでした。

foo.scss

:local(.foo) {
  width: 100%;
  height: 200px;
  .bar {
    color: blue;
  }
  .baz {
    background-color: green;
  }
}

foo.tsx

import * as React from 'react'
import { foo as fooStyle } from 'foo.scss'

const Foo: React.FC<{}> = props => (
  <div className={fooStyle}>
    <div className='bar'>Bar</div>
    <div className='baz'>Baz</div>
  </div>
)

export default Foo

css-loaderの導入の仕方はこちらの記事を参考してください。本記事では割愛いたします。
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
https://qiita.com/Quramy/items/a5d8967cdbd1b8575130

対策

その１

最初見つかった対策は、foo.scssをこんな書き方にすることで、解決できました。

foo.scss

:local(.foo) {
  width: 100%;
  height: 200px;
  [class=bar] {
    color: blue;
  }
  [class=baz] {
    background-color: green;
  }
}

.barのような記法はある意味で糖衣構文であり、本来の書き方に戻すことで、css-loaderが普通に解釈してくれました。

その２

[class=bar]のような構文をたくさん書くと、「やっぱり、.bar書きたいだよね」と思っちゃいますね。
そこで見つかったのは、:localスコープの内部に :globalスコープを明示的に宣言することでした。
css-loaderのREADMEでも、この記法の存在を示唆しました。

foo.scss

:local(.foo) {
  width: 100%;
  height: 200px;
  :global {
    .bar {
      color: blue;
    }
    .baz {
      background-color: green;
    }
  }
}

前述したように、foo.scssを上記構文に直すと、無事、div.barやdiv.bazまでスコープできました。

コンパイルされたHTMLやCSSはこんな感じでした。

<div class="_3stJVexdk1_1H90Xh-wKBa">
  <div class="bar">Bar</div>
  <div class="baz">Baz</div>
</div>

foo.css

._3stJVexdk1_1H90Xh-wKBa {
  width: 100%;
  height: 200px;
}
._3stJVexdk1_1H90Xh-wKBa .bar {
  color: blue;
}
._3stJVexdk1_1H90Xh-wKBa .baz {
  background-color: green;
}