外部のCSSファイルを限定して利用したいとき等のために正規表現にマッチするセレクターのスタイルを任意のセレクターが付与されている要素・子要素に限定するように改変するPostCSSプラグインを作ったのでメモ📝

以下のようにpostcss.config.jsで指定すると、

module.exports = {
  plugins: [
+   require('postcss-plugin-add-encapsulation-selector', {
+     targetRegexp: /\.target/,
+     capsuleSelector: '.capsule'
+   }),
  ]
}

以下のようにcssが修正されます。

- .target{ color: red; } .not-target { color: blue; }
+ .capsule.target, .capsule .target{ color: red; } .not-target { color: blue; }

.target{ color: red; }が.capsule.target, .capsule .target{ color: red; }になったことにより、以下のように対象のスタイルのclass名が使われていても.capsuleが付与されている要素しかスタイルが効かないようになります。

<div class="capsule target">target<p class="target">target child</p></div>
<div class="target">not target<p>not target child</p></div> <!-- スタイルが効かない -->

外部のCSSを特定のclassを持つ一部の要素にだけ適用したい時とかに便利かと思います📝 ※BootstrapのCSSをグローバルに適用するのではなく.bootstrapのclassを持つ要素とその子要素だけに当てるようにして統制を取りやすくしたり等

PostCSSあんまり触ったことなかったんですが便利ですね！

参考

postcss.org

Madogiwa Blog

主に技術系の学習メモに使っていきます。

特定のスタイルの影響を任意のセレクターが付与されている要素・子要素に限定するPostCSSプラグインを作った📝

参考