PostCSS Short Border Radius
PostCSS Short Border Radius lets you use border-top-radius
,
border-right-radius
, border-bottom-radius
, and border-left-radius
properties in CSS, following the 1-to-2 syntax.
.example-1 { border-top-radius: 10px;} .example-2 { border-top-radius: 10px 5px;} /* becomes */ .example-1 { border-top-left-radius: 10px; border-top-right-radius: 10px;} .example-2 { border-top-left-radius: 10px; border-top-right-radius: 5px;}
Usage
Add PostCSS Short Border Radius to your project:
npm install postcss-short-border-radius --save-dev
Use PostCSS Short Border Radius to process your CSS:
const postcssShortBorderRadius = ; postcssShortBorderRadius;
Or use it as a PostCSS plugin:
const postcss = ;const postcssShortBorderRadius = ; ;
PostCSS Short Border Radius runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Options
prefix
The prefix
option defines a prefix required by properties being transformed.
Wrapping dashes are automatically applied, so that x
would transform
-x-border-top-radius
.
;
.example-1 { -x-border-top-radius: 10px;} /* becomes */ .example-1 { border-top-left-radius: 10px; border-top-right-radius: 10px;}
skip
The skip
option defines the skip token used to ignore portions of the
shorthand.
;
.example-1 { -x-border-top-radius: - 10px;} /* becomes */ .example-1 { border-top-right-radius: 10px;}