https://github.com/css-doodle/postcss-doodle

PostCSS plugin that enables the use of css-doodle generators
https://github.com/css-doodle/postcss-doodle

Last synced: about 1 year ago
JSON representation

PostCSS plugin that enables the use of css-doodle generators

• Host: GitHub
• URL: https://github.com/css-doodle/postcss-doodle
• Owner: css-doodle
• License: mit
• Created: 2023-01-04T23:31:32.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-29T01:06:11.000Z (over 2 years ago)
• Last Synced: 2025-04-20T09:05:21.761Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 13
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# postcss-doodle

![Build Status](https://github.com/css-doodle/postcss-doodle/actions/workflows/ci.yml/badge.svg)

![License](https://img.shields.io/github/license/mashape/apistatus.svg)

[PostCSS] plugin that enables the use of css-doodle generators.

[PostCSS]: https://github.com/postcss/postcss

[css-doodle]: https://github.com/css-doodle

[@shape]: https://yuanchuan.dev/polygon-shapes

[@svg]: https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg

## Installation

```bash

npm i -D postcss-doodle

```

## Usage

```js

postcss([

  require('postcss-doodle')

])

```

## Supported generators

### [@svg]

```css

background: @svg(

  viewBox: -5 -5 10 10;

  circle {

    r: 5;

    fill: deeppink;

  }

)

```

### [@shape]

```css

clip-path: @shape(

  points: 5;

  turn: 2;

)

```

## TODO

* @doodle