PostCSS plugin to insert a circle with color.

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

.circle { circle: <diameter> [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:

.circle { circle: 100px red; }

This transpiles into:

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

That's it, really.

$ npm install postcss-circle 

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

import * as postcssCircle from 'postcss-circle'; postcss([ postcssCircle ]);

None at this time.

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.

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.