JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 304
  • Score
    100M100P100Q83391F
  • 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 AppVeyor Build 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'),
    // more plugins...
])

TypeScript

///<reference path="node_modules/postcss-circle/.d.ts" />
import postcssCircle = require('postcss-circle');

postcss([
    postcssCircle,
    // more plugins...
])

Options

None at this time.

Testing

Run the following command:

$ ./scripts/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 command:

$ ./scripts/watch

This will build scripts, run tests and watch for changes.