Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-retina-hairlines with all npm packages installed. Try it out:

var postcssRetinaHairlines = require("postcss-retina-hairlines")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-retina-hairlines v1.0.1

retina hairline

/* 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'
        }
    }
});
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free