https://github.com/jednano/postcss-circle

PostCSS plugin to insert a circle with color.
https://github.com/jednano/postcss-circle

circle postcss postcss-plugin

Last synced: about 2 months ago
JSON representation

PostCSS plugin to insert a circle with color.

• Host: GitHub
• URL: https://github.com/jednano/postcss-circle
• Owner: jednano
• License: mit
• Created: 2015-07-28T22:04:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-02T17:53:51.000Z (about 7 years ago)
• Last Synced: 2024-10-18T04:17:31.318Z (2 months ago)
• Topics: circle, postcss, postcss-plugin
• Language: TypeScript
• Size: 65.4 KB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-circle



[![NPM version](http://img.shields.io/npm/v/postcss-circle.svg?style=flat)](https://www.npmjs.org/package/postcss-circle)

[![npm license](http://img.shields.io/npm/l/postcss-circle.svg?style=flat-square)](https://www.npmjs.org/package/postcss-circle)

[![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-circle.svg)](https://travis-ci.org/jedmao/postcss-circle)

[![codecov](https://codecov.io/gh/jedmao/postcss-circle/branch/master/graph/badge.svg)](https://codecov.io/gh/jedmao/postcss-circle)

[![Dependency Status](https://gemnasium.com/badges/github.com/jedmao/postcss-circle.svg)](https://gemnasium.com/github.com/jedmao/postcss-circle)

[![npm](https://nodei.co/npm/postcss-circle.svg?downloads=true)](https://nodei.co/npm/postcss-circle/)

[PostCSS](https://github.com/postcss/postcss) plugin to insert a circle with color.

## Introduction

Creating a circle in CSS [isn't terribly difficult](http://davidwalsh.name/css-circles); 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

### JavaScript

```js

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

```

### TypeScript

```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.

### 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.