Fossa Advent Calendar 12日目

アドベントカレンダー

PostCSS Port-2

使用環境

Name	Version
PostCSS	v8.4.19
postcss-rename	0.6.1

fossa-hobby.hatenablog.com

７日目の続きです。

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が使用されます。