https://github.com/postcss/postcss-color-gray

Use the gray() color function in CSS
https://github.com/postcss/postcss-color-gray

color colour convert css4 cssnext gray grey javascript nodejs postcss postcss-plugin

Last synced: 3 months ago
JSON representation

Use the gray() color function in CSS

• Host: GitHub
• URL: https://github.com/postcss/postcss-color-gray
• Owner: postcss
• License: other
• Created: 2014-10-29T06:50:57.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2021-12-25T11:29:12.000Z (about 3 years ago)
• Last Synced: 2024-04-12T15:22:20.921Z (9 months ago)
• Topics: color, colour, convert, css4, cssnext, gray, grey, javascript, nodejs, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 52.7 KB
• Stars: 27
• Watchers: 8
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# PostCSS Gray [][postcss]

[![NPM Version][npm-img]][npm-url]

[![CSS Standard Status][css-img]][css-url]

[![Build Status][cli-img]][cli-url]

[![Support Chat][git-img]][git-url]

[PostCSS Gray] lets you use the `gray()` color function in CSS, following the outdated version of [CSS Color Module Level 4](https://www.w3.org/TR/2019/WD-css-color-4-20191105/) specification (05 November 2019).

**⚠️ `gray()` has been removed from [Color Module Level 4 specification](https://drafts.csswg.org/css-color/#changes-from-20191105).**

```pcss

body {

  background-color: gray(100);

  color: gray(0 / 90%);

}

/* becomes */

body {

  background-color: rgb(255,255,255);

  color: rgba(0,0,0,.9);

}

```

## Usage

Add [PostCSS Gray] to your project:

```bash

npm install postcss postcss-color-gray --save-dev

```

Use [PostCSS Gray] to process your CSS:

```js

import postcssGray from 'postcss-color-gray';

postcssGray.process(YOUR_CSS /*, processOptions, pluginOptions */);

```

Or use it as a [PostCSS] plugin:

```js

import postcss from 'postcss';

import postcssGray from 'postcss-color-gray';

postcss([

  postcssGray(/* pluginOptions */)

]).process(YOUR_CSS /*, processOptions */);

```

[PostCSS Gray] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |

| --- | --- | --- | --- | --- |

## Options

### preserve

The `preserve` option determines whether the original `gray()` function should

be preserved or replaced. By default, the `gray()` function is replaced.

By setting `preserve` to `true`, the original `gray()` function is preserved.

```js

postcssGray({ preserve: true });

```

```pcss

body {

  background-color: gray(100);

  color: gray(0 / 90%);

}

/* becomes */

body {

  background-color: gray(100);

  background-color: rgb(255,255,255);

  color: gray(0 / 90%);

  color: rgba(0,0,0,.9);

}

```

[cli-img]: https://img.shields.io/travis/postcss/postcss-color-gray.svg

[cli-url]: https://travis-ci.org/postcss/postcss-color-gray

[css-img]: https://cssdb.org/badge/gray-function.svg

[css-url]: https://cssdb.org/#gray-function

[git-img]: https://img.shields.io/badge/support-chat-blue.svg

[git-url]: https://gitter.im/postcss/postcss

[npm-img]: https://img.shields.io/npm/v/postcss-color-gray.svg

[npm-url]: https://www.npmjs.com/package/postcss-color-gray

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

[PostCSS Gray]: https://github.com/postcss/postcss-color-gray