postcss-hairline
v1.0.0
Published
Automatically transform your border to retina hairline
Downloads
6
Readme
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
install plugin
npm install --save-dev postcss-hairline
code
border
orborder-radius
style as usual.foo { color: white; border: 1px solid red; border-radius: 20px; }
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
use plugin
postcss([ require('postcss-hairline') ]);
Options
require('postcss-hairline')({
pxComment: 'no'
})
Available options are:
pxComment
(string): border px unit comment. Default:no
.