# gulp-css-grader

> Grader css property by user wish

Latest version **1.1.1** (published 2019-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-css-grader
pnpm add gulp-css-grader
yarn add gulp-css-grader
bun add gulp-css-grader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-05-08 |
| First published | 2019-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nikita Gladkov |
| Maintainers | panda_tamara |
| Keywords | gulp-plugin |

## Links

- npm: https://www.npmjs.com/package/gulp-css-grader
- Repository: https://github.com/PandaTamara/gulp-css-grader
- Homepage: https://github.com/PandaTamara/gulp-css-grader#readme
- Issues: https://github.com/PandaTamara/gulp-css-grader/issues
- npm.io page: https://npm.io/package/gulp-css-grader

## Dependencies (4)

- [through2](https://npm.io/package/through2.md) ^2.0.0
- [css-parse](https://npm.io/package/css-parse.md) ^2.0.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.7
- [css-stringify](https://npm.io/package/css-stringify.md) ^2.0.0

## Recent versions

- 1.1.1 (latest) — 2019-05-08
- 1.1.0 — 2019-05-08
- 1.0.0 — 2019-05-07

## README

Gulp-css-grader
=======================

Plugin for Gulp for grader css property by user wish. Check it examples.

## Installation

Install package with NPM and add it to your development dependencies:

`npm install --save-dev gulp-css-grader`

## Usage

The main purpose of this plugin is to help prepare color schemes for the site template. For example you compile your Sass files to css by Gulp and get following css:

```css
.container {
    width: 100% !important;
    padding-right: 0.75rem;
    color: #fff;
    background-color: #000;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    .btn {
        width: 100px;
        color: #000 !important;
    }
}
```

To get all the rules that contain color properties add this pipe to your gulp task

```
.pipe(grader('get', {properties: ['color', 'background-color', 'border-color', 'background', 'box-shadow', 'border']}))
```

The result is

```css
.container {
    color: #fff;
    background-color: #000;
}

@media (min-width: 576px) {
    .btn {
        color: #000 !important;
    }
}
```


If you want to get all the rules except for some properties, add this pipe to your gulp task

```
.pipe(grader('remove', {properties: ['color', 'background-color']}))
```

The result is

```css
.container {
    width: 100% !important;
    padding-right: 0.75rem;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    .btn {
        width: 100px;
    }
}
```

Voila!

---
_Source: https://npm.io/package/gulp-css-grader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._