Skip to content

ufologist/postcss-hairline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-hairline

NPM version Build Status Coverage Status Known Vulnerabilities changelog license

npm-image

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

About

transform your border to retina hairline

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published