postcss-hairline

PostCSS plugin for transform your border to retina hairline.

Example

before:

.foo {
    color: white;
    border: 1px solid red; /* hairline */
    border-radius: 20px; /* hairline */
}

after:

.foo {
    color: white;
    border-radius: 10px; /* no */
    position: relative; 
}

.foo::after {
    border: 1px solid red; /* no */
    border-radius: 20px; /* no */
}

.foo::after {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    pointer-events: none;
}

Usage

1. install plugin

   npm install --save-dev postcss-hairline
   

2. code border or border-radius style as usual

   .foo {
       color: white;
       border: 1px solid red;
       border-radius: 20px;
   }

3. add /* hairline */ comment

   .foo {
       color: white;
       border: 1px solid red; /* hairline */
       border-radius: 20px; /* hairline */
   }

   support comment

   • /* hairline */ default create ::after pseudo style
   • /* hairline-before */ specify create ::before pseudo style
   • /* hairline-after */ specify create ::after pseudo style

4. use plugin

   postcss([
       require('postcss-hairline')
   ]);
   

   PostCSS plugin usage

Options

require('postcss-hairline')({
    pxComment: 'no'
})

Available options are:

• pxComment (string): border px unit comment. Default: no.

Reference

• postcss-retina