PostCSSでAutoprefixerを使ってみる

Autoprefixerをpostcss-cliで使ってみます。
postcss-cliの環境作成については以前投稿した記事を参照ください。
PostCSSを使ってみる

使い方

postcss-cliの環境を用意して、Autoprefixerをインストールします。

npm install autoprefixer --save-dev

設定ファイルを用意して、Autoprefixerが使えるようにします。

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

devディレクトリを作成して、CSSを用意します。

input.css

.hoge {
  display: flex;
  transform: scale(0.5);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

下記コマンドを実行します。

node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css

publicディレクトリに下記ファイルが生成されました。

output.css

.hoge {
  display: flex;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  border-radius: 3px;
}

transformにベンダープレフィックスが追加され、border-radiusに付けていたベンダープレフィックスが削除されました。

postcss.config.jsに設定を追加することで、対象ブラウザを指定できます。

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      "browsers": [
        "last 2 versions"
      ]
    })
  ]
}

再度コマンドを実行します。

node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css

output.cssが以下のように変更されました。

output.css

.hoge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  border-radius: 3px;
}

対象ブラウザで設定できる内容についてはこちらをご確認ください。
　

【参考サイト】

• autoprefixer – npm
• GitHub – browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env