独学者Fossa

独学していることなど

Fossa Advent Calendar 12日目

アドベントカレンダー
アドベントカレンダー

PostCSS Port-2

使用環境

Name Version
PostCSS v8.4.19
postcss-rename 0.6.1

fossa-hobby.hatenablog.com

7日目の続きです。

PostCSSで、prefixと付くプラグインは、色々あって、下記のようなプラグインが見つかりました。

  • postcss-prefix-selector
  • postcss-prefixwrap
  • postcss-prefix-all-rules

上記のプラグインは、CSSセレクターの前に、prefixが付きます。

例えば、こんな感じです。

// before
.form {
   font-size: 16px;
}
// after
.fs .form {
   font-size: 16px;
}

私が望んでいるのは、下記の通りです。

.fs-form {
   font-size: 16px;
}

postcss-rename

私の望みを叶えてくれるプラグインを探してみました。

  • postcss-selector-rename
  • postcss-selector-replace
  • postcss-rename

上記のプラグインREADME.mdを読みました。

どれも実現しそうな気がしましたが、使い方がいまいち、わかりませんでした。

とりあえず、Google謹製のpostcss-renameを試してみました。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-rename')({
      strategy: 'none',
      by: 'whole',
      prefix: 'fs-',
    })
  ]
};
// input.css
body {
  background: red;
}

.a, .b {
  color: aqua;
}

.c {
  color: coral;
}

package.jsonの一部

  "scripts": {
      "prefix": "postcss ./input.css -o ./output.css"
  }
npm run prefix

試してみた結果は、下記の通り、実現しました。

// output.css
body {
  background: red;
}

.fs-a, .fs-b {
  color: aqua;
}

.fs-c {
  color: coral;
}

postcss.config.js

--configオブションがありますが、これはディレクトリを指定できるだけで、postcss.config.js以外のファイルは読まないのかな?

ルートフォルダと、configフォルダに、それぞれpostcss.config.jsを設置します。

postcss --config ./config ./input.css -o ./output.cssを実行すると、configフォルダ内のpostcss.config.jsが使用されます。