postcss-hairline
1.0.0 • Public • Published postcss-hairline
PostCSS plugin for transform your border to retina hairline.
Example
before:
.foo {
color: white;
border: 1px solid red;
border-radius: 20px;
}
after:
.foo {
color: white;
border-radius: 10px;
position: relative;
}
.foo::after {
border: 1px solid red;
border-radius: 20px;
}
.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
or border-radius
style as usual
.foo {
color: white;
border: 1px solid red;
border-radius: 20px;
}
-
add /* hairline */
comment
.foo {
color: white;
border: 1px solid red;
border-radius: 20px;
}
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')
]);
PostCSS plugin usage
Options
require('postcss-hairline')({
pxComment: 'no'
})
Available options are:
pxComment
(string): border px unit comment. Default: no
.
Reference
Package Sidebar
Install
Weekly Downloads