postcss-circle

title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.png">



PostCSS plugin to insert a circle with color.

Introduction

Creating a circle in CSS isn't terribly difficult; however, it could be easier and more expressive:

``css
.circle {
circle: [color];
}
`

The diameter is required and the color is optional. You don't have to remember the order, because you can swap their positions.

Let's create a red circle with a 100px diameter:

`css
.circle {
circle: 100px red;
}
`

This transpiles into:

`css
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: red;
}
`

That's it, really.

Installation

`
$ npm install postcss-circle
`

Usage

$3

`js
postcss([ require('postcss-circle') ]);
`

$3

`ts
import * as postcssCircle from 'postcss-circle';

postcss([ postcssCircle ]);
`

Options

None at this time.

Testing

Run the following command:

`
$ npm test
`

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

$3

For much faster development cycles, run the following commands in 2 separate processes:

`
$ npm run build:watch
`

Compiles TypeScript source into the ./dist folder and watches for changes.

`
$ npm run watch
`

Runs the tests in the ./dist` folder and watches for changes.