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.