/* before */
.example {
    border: 1px solid red;
}

/* after */

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'2px\'%3E%3Crect fill='red' width=\'100%25\' height=\'50%25\'%3E %3C/rect%3E %3C/svg%3E")  0 0 2 0 stretch;
}

Options

base64

Type: Boolean
Default: false

Allows you to define whether UTF-8 or base64 encoding will be used.

/* before { base64: true } */


.example {
    border: 1px solid red;
}

/* after */

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMnB4Jz48cmVjdCBmaWxsPSJyZWQiIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzUwJSc+IDwvcmVjdD4gPC9zdmc+")  0 0 2 0 stretch;
}

blackList

/* before { blackList:['.example1'],base64:true } */


.example {
    border: 1px solid red;
}

.example1 {
    border-left: 1px solid red;
}

/* after */

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMnB4Jz48cmVjdCBmaWxsPSJyZWQiIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzUwJSc+IDwvcmVjdD4gPC9zdmc+")  0 0 2 0 stretch;
}

.example1 {
    border-left: 1px solid red;
}

Usage

npm install postcss-retina-hairlines --save-dev

PostCSS

npm install postcss --save-dev

const postcss = require('postcss')
postcss([
	require('postcss-retina-hairlines')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

npm install gulp-postcss --save-dev

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var retinaHairlines = require('postcss-retina-hairlines')

var options = {
  base64: true,
  blackList: ['.example1']
}

gulp.task('css', function () {
  return gulp.src('test/source.css')
      .pipe(postcss([retinaHairlines(options)]))
      .pipe(gulp.dest('example'))
})

Grunt

Add [Grunt PostCSS] to your build tool:

npm install grunt-postcss --save-dev

grunt.loadNpmTasks('grunt-postcss');

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