postCSSとは？autoprefixerなど便利なプラグイン一覧

webpackやgulpでCSSをコンパイルするときにpostCSSのautoprefixなどが使われていることがある。この**postCSSやautoprefixとは何か？**について。


##postCSSとは？
**CSSを操作**するためのJavaScriptベースのプラグイン。

cssファイルにpostCSSの機能を使うと、**デバッグや圧縮、ファイル処理などをしてくれる便利機能**。


<br>
###ポストプロセッサとは？
postCSSはポストプロセッサと呼ばれている。

sassといった、コンパイルしてcssを出力するプロセッサをプリプロセッサ(pre- は前の意味)とよ呼び、これに対して、cssファイルに対して処理を行うためポストプロセッサ(post-　は後ろ)と呼ばれる。


```
sassファイル

↓ pre processor

cssファイル

↓ post processor

変換後のcssファイル
```


<br>
##主なプラグイン一覧
postCSSは総称で、その中に各機能毎のプラグインがある。

| プラグイン | 内容 |
|:-:|:--|
| autoprefixer  | ベンダープレフィックスの最適化  |
| PreCSS  | sassのようなマークアップができる  |
| StyleLint  | コードのバリデーション。エラーがあると教えてくれる。  |
| PostCSS Assets | 指定したファイルパスの中のデータ（画像など）をコンパイルしURLとして返す  |
| CSSNano  | cssファイルの圧縮・最適化。コメントアウトや改行などを削除してくれる。  |
| CSS MQPacker  | メディアクエリの最適化。同じメディアクエリをまとめる  |


<br>
##autoprefixerとは？
[Can I Use](https://caniuse.com/)の情報を元に、必要に応じてベンダープレフィックスを適用してくれる。


```css:
::placeholder {
  color: gray;
}
```

↓ autoprefixer

```css:
::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}
```

gulpやwebpackなどでの使い方は[autoprefixer github公式](https://github.com/postcss/autoprefixer)に記述してある。


>・ベンダープレフィックスとは？
プロパティの頭に付ける-moz-や-webkit-など。
新しいCSSで適用される予定はあるが、使い勝手の良いCSSプロパティをブラウザが先行して導入している。

>ブラウザによってはベンダープレフィックスがないと認識してくれないプロパティがある。



<br>
##PostCSS Assets
画像などのassetファイルを簡単に指定できる。


**▼実例**

ロードするパスを定義する。

```js:.js
var options = {
  loadPaths: ['fonts/', 'media/patterns/', 'images/']
};
```

```css:.css
body {
  background: resolve('foobar.jpg');
  background: resolve('icons/baz.png');
}
```

↓ PostCSS Assetsによる変換

```css:.css
body {
  background: url('/media/patterns/foobar.jpg');
  background: url('/images/icons/baz.png');
}
```

指定ディレクトリの中からファイル探し、コンパイル後のcssのURLを置き換える。



<br>
##CSSNano 
cssファイルの圧縮・最適化。改行などを削除してくれる。

```css:.css
/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* remove duplicated properties */
    font-weight: 400;
    font-weight: 400;
    /* reduce position values */
    background-position: bottom right;
    /* normalize wrapping quotes */
    quotes: '«' "»";
    /* reduce gradient parameters */
    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
    /* replace initial values */
    min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";
```

↓ CSSNano

```css:.css
@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}
```

・[cssnano公式](https://cssnano.co/)



<br>
###CSS MQPacker
メディアクエリの最適化。同じメディアクエリをまとめてくれるので、処理毎にメディアクエリを書いていくことができる。

```css:.css
.foo {
  width: 240px;
}
 
@media screen and (min-width: 768px) {
  .foo {
    width: 576px;
  }
}
 
.bar {
  width: 160px;
}
 
@media screen and (min-width: 768px) {
  .bar {
    width: 384px;
  }
}
```

↓ css mqpacker


```css:.css
.foo {
  width: 240px;
}
 
.bar {
  width: 160px;
}
 
@media screen and (min-width: 768px) {
  .foo {
    width: 576px;
  }
  .bar {
    width: 384px;
  }
}
```

共通する`@media screen and (min-width: 768px) `の中身を自動でまとめた。

・[css-mqpacker](https://www.npmjs.com/package/css-mqpacker)


以上。