JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 278
  • Score
    100M100P100Q83257F
  • License MIT

PostCSS plugin to insert a circle with color.

Package Exports

  • postcss-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.