source: frontend/node_modules/postcss-color-hex-alpha/README.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 2.5 KB
Line 
1# PostCSS Color Hex Alpha [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-color-hex-alpha.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hexadecimal-alpha-notation.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
4
5[PostCSS Color Hex Alpha] lets you use 4 & 8 character hex color notation in
6CSS, following the [CSS Color Module] specification.
7
8```pcss
9body {
10 background: #9d9c;
11}
12
13/* becomes */
14
15body {
16 background: rgba(153,221,153,0.8);
17}
18```
19
20## Usage
21
22Add [PostCSS Color Hex Alpha] to your project:
23
24```bash
25npm install postcss postcss-color-hex-alpha --save-dev
26```
27
28Use it as a [PostCSS] plugin:
29
30```js
31const postcss = require('postcss');
32const postcssColorHexAlpha = require('postcss-color-hex-alpha');
33
34postcss([
35 postcssColorHexAlpha(/* pluginOptions */)
36]).process(YOUR_CSS /*, processOptions */);
37```
38
39[PostCSS Color Hex Alpha] runs in all Node environments, with special
40instructions for:
41
42| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
43| --- | --- | --- | --- | --- | --- |
44
45## Options
46
47### preserve
48
49The `preserve` option determines whether the original notation
50is preserved. By default, it is not preserved.
51
52```js
53postcssColorHexAlpha({ preserve: true })
54```
55
56```pcss
57body {
58 background: #9d9c;
59}
60
61/* becomes */
62
63body {
64 background: rgba(153,221,153,0.8);
65 background: #9d9c;
66}
67```
68
69[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
70[css-url]: https://cssdb.org/#hexadecimal-alpha-notation
71[discord]: https://discord.gg/bUadyRwkJS
72[npm-url]: https://www.npmjs.com/package/postcss-color-hex-alpha
73
74[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
75[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
76[PostCSS]: https://github.com/postcss/postcss
77[PostCSS Loader]: https://github.com/postcss/postcss-loader
78[PostCSS Color Hex Alpha]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha
79[CSS Color Module]: https://www.w3.org/TR/css-color-4/#hex-notation
Note: See TracBrowser for help on using the repository browser.