PostCSSでCSSを変換

PostCSSってなんなん

PostCSSはcssパーサでノードツリーを操作するAPIを提供しています。cssに対する変更を加えません。変更はpluginが行います。やりたいことに合わせてpluginを組み合わせて使います。

PostCSS Plugins

pluginは以下に記載があります。

PostCSS plugins

使ってみる

今回は、gulpからPostCSSとpluginのAutoprefixerを使ってみます。
このpluginはvender prefixを自動で付与してくれるものになります。

環境

項目	version
node	8.2.1
gulp	3.9.1
gulp-postcss	7.0.0
autoprefixer	7.1.2

install

gulpは導入済みで記載しています。

npm install --save-dev gulp-postcss autoprefixer

gulpコード

'use strict';

var gulp = require('gulp'),
    postcss = require('gulp-postcss');

// apply PostCSS plugins
gulp.task('css', function() {
  return gulp.src('css/test.css')
    .pipe(postcss([
      require('autoprefixer')({})
    ]))
    .pipe(gulp.dest('dest/css/test.css'));
});

変更前CSS

Codepenで公開されている内容のcssの一部を抜き出したものを使います。
もとのコード

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  border-radius:50%;
  animation: square 25s infinite;
  transition-timing-function: linear;
}

※border-radiusだけ足してみました。

変更後css

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  border-radius:50%;
  -webkit-animation: square 25s infinite;
          animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

参考

PostCSSとは何か