https://github.com/csstools/postcss-short-border-radius
Use more border-radius properties in CSS
https://github.com/csstools/postcss-short-border-radius
Last synced: 11 months ago
JSON representation
Use more border-radius properties in CSS
- Host: GitHub
- URL: https://github.com/csstools/postcss-short-border-radius
- Owner: csstools
- License: cc0-1.0
- Archived: true
- Created: 2016-10-03T21:43:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-10T12:06:53.000Z (over 7 years ago)
- Last Synced: 2025-04-21T21:38:33.728Z (11 months ago)
- Language: CSS
- Homepage: https://jonathantneal.github.io/postcss-short/
- Size: 17.6 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostCSS Short Border Radius [
][postcss]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[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].
```pcss
.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:
```bash
npm install postcss-short-border-radius --save-dev
```
Use [PostCSS Short Border Radius] to process your CSS:
```js
const postcssShortBorderRadius = require('postcss-short-border-radius');
postcssShortBorderRadius.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
Or use it as a [PostCSS] plugin:
```js
const postcss = require('postcss');
const postcssShortBorderRadius = require('postcss-short-border-radius');
postcss([
postcssShortBorderRadius(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
[PostCSS Short Border Radius] runs in all Node environments, with special instructions for:
| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#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`.
```js
postcssShortBorderRadius({ prefix: 'x' });
```
```pcss
.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.
```js
postcssShortBorderRadius({ skip: '-' });
```
```pcss
.example-1 {
-x-border-top-radius: - 10px;
}
/* becomes */
.example-1 {
border-top-right-radius: 10px;
}
```
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-short-border-radius.svg
[cli-url]: https://travis-ci.org/jonathantneal/postcss-short-border-radius
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/postcss-short-border-radius.svg
[npm-url]: https://www.npmjs.com/package/postcss-short-border-radius
[1-to-2 syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Short Border Radius]: https://github.com/jonathantneal/postcss-short-border-radius