postcss-circle

PostCSS plugin to insert a circle with color.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-circle
1401.1.05 years ago8 years agoMinified + gzip package size for postcss-circle in KB

Readme

postcss-circle
title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo-leftp.png">NPM version npm license Travis Build Status codecov Dependency Status
npm
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:
.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.

Installation

$ npm install postcss-circle

Usage

JavaScript

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

TypeScript

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.

Watching

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.