Skip to content
PostCSS plugin to insert a circle with color.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json
tslint.json

README.md

postcss-circle

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.

You can’t perform that action at this time.