PostCSS Shape

PostCSS plugin to draw basic shape with specified syntax in css rule.

Syntax

rect

rect: [width] [height] [background-color]

/* before */
.rect-a {
  rect: 30px 50px #ff0;
}
.rect-b {
  rect: 30px * #ff0;
}
 
/* after */
.rect-a {
  width: 30px;
  height: 50px;
  background-color: #ff0;
}
.rect-b {
  width: 30px;
  background-color: #ff0;
}

circle

circle: [diameter] [background-color]

/* before */
.circle-a {
  circle: 50px #ff0;
}
.circle-b {
  circle: 50px *;
}
 
/* after */
.circle-a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff0;
}
.circle-b {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

triangle

triangle: [size] [direction] [color]

/* before */
.triangle-a {
  triangle: 5px top #ff0;
}
 
/* after */
.triangle-a {
  display: inline-block;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 5px;
  border-bottom-color: #ff0;
}

can not ignore any value in triangle

Usage

Add Postcss Shape to your build tool:

npm install postcss-shape --save-dev

Node

require('postcss-shape').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Postcss Shape as a PostCSS plugin:

postcss([
  require('postcss-shape')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Postcss Shape within your Gulpfile:

var postcss = require('gulp-postcss');
 
gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-shape')({ /* options */ })
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Postcss Shape within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');
 
grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-shape')({ /* options */ })
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});