source: frontend/node_modules/postcss-normalize/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: 5.5 KB
Line 
1# PostCSS Normalize [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
2
3[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-normalize.svg" height="20">][npm-url]
4[<img alt="build status" src="https://img.shields.io/travis/csstools/postcss-normalize/main.svg" height="20">][cli-url]
5[<img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
6
7[PostCSS Normalize] lets you use the parts of [normalize.css] or [sanitize.css]
8that you need from your [browserslist].
9
10```css
11@import "normalize.css";
12```
13
14```css
15@import "sanitize.css";
16```
17
18**PostCSS Normalize** uses a non-opinionated version of [normalize.css], but
19an opinionated version may also be used.
20
21```css
22@import "normalize.css/opinionated.css";
23```
24
25### Examples
26
27Here is a sample of what **normalize.css** looks like when the **browserslist**
28is `ie >= 9`:
29
30```css
31/**
32 * Add the correct display in IE 9-.
33 */
34
35audio,
36video {
37 display: inline-block;
38}
39
40/**
41 * Remove the border on images inside links in IE 10-.
42 */
43
44img {
45 border-style: none;
46}
47```
48
49And here is the same sample when the **browserslist** is `ie >= 10`:
50
51```css
52/**
53 * Remove the border on images inside links in IE 10-.
54 */
55
56img {
57 border-style: none;
58}
59```
60
61## Usage
62
63Add [PostCSS Normalize] to your project:
64
65```bash
66npm install postcss-normalize --save-dev
67```
68
69Add a [browserslist] entry in `package.json`:
70
71```json
72{
73 "browserslist": "last 2 versions"
74}
75```
76
77Use **PostCSS Normalize** to process your CSS:
78
79```js
80const postcssNormalize = require('postcss-normalize')
81
82postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)
83```
84
85Or use it as a [PostCSS] plugin:
86
87```js
88const postcss = require('postcss')
89const postcssNormalize = require('postcss-normalize')
90
91postcss([
92 postcssNormalize(/* pluginOptions */)
93]).process(YOUR_CSS /*, processOptions */)
94```
95
96**PostCSS Normalize** runs in all Node environments, with special instructions
97for:
98
99| [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) |
100| --- | --- | --- | --- | --- | --- |
101
102## PostCSS Import Usage
103
104**PostCSS Normalize** includes a `postcssImport` function to configure
105[PostCSS Import] and allow you to continue using the `@import` syntax.
106
107```js
108const postcss = require('postcss')
109const postcssImport = require('postcss-import')
110const postcssNormalize = require('postcss-normalize')
111
112postcss([
113 postcssImport(
114 postcssNormalize(
115 /* pluginOptions (for PostCSS Normalize) */
116 ).postcssImport(
117 /* pluginOptions (for PostCSS Import) */
118 )
119 )
120]) // now you can use @import "normalize.css", etc. again
121```
122
123Alternatively, use `@import-normalize` or `@import-sanitize` to avoid conflicts
124with `@import` transforms.
125
126```pcss
127@import-normalize;
128```
129
130```pcss
131@import-normalize "opinionated.css";
132```
133
134```pcss
135@import-sanitize;
136```
137
138## Options
139
140### allowDuplicates
141
142The `allowDuplicates` option determines whether multiple, duplicate insertions
143of CSS libraries are allowed. By default, duplicate libraries are omitted.
144
145```js
146postcssNormalize({ allowDuplicates: true })
147```
148
149### forceImport
150
151The `forceImport` option defines CSS libraries that will be inserted at the
152beginning of the CSS file. Unless overriden by `allowDuplicates`, duplicate
153CSS libraries would still be omitted.
154
155```js
156postcssNormalize({ forceImport: true })
157```
158
159Specific CSS libraries may be defined.
160
161```js
162postcssNormalize({
163 forceImport: 'sanitize.css'
164})
165```
166
167### browsers
168
169The `browsers` option defines an override of the project’s **browserslist** for
170**PostCSS Normalize**. This option should be avoided in leui of a browserslist
171file.
172
173```js
174postcssNormalize({ browsers: 'last 2 versions' })
175```
176
177## CSS Libraries
178
179**PostCSS Normalize** can include [normalize.css] or [sanitize.css] and
180configure either with the following combinations:
181
182```css
183@import "normalize"; /* also, @import "normalize.css" */
184@import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */
185@import "sanitize"; /* also, @import "sanitize.css" */
186@import "sanitize/assets"; /* also, @import "sanitize.css/assets.css" */
187@import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */
188@import "sanitize/reduce-motion"; /* also, @import "sanitize.css/reduce-motion.css" */
189@import "sanitize/system-ui"; /* also, @import "sanitize.css/system-ui.css" */
190@import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */
191@import "sanitize/ui-monospace"; /* also, @import "sanitize.css/ui-monospace.css" */
192@import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */
193```
194
195[cli-img]: https://img.shields.io/travis/csstools/postcss-normalize/main.svg
196[cli-url]: https://travis-ci.org/csstools/postcss-normalize
197[git-img]: https://img.shields.io/badge/support-chat-blue.svg
198[git-url]: https://gitter.im/postcss/postcss
199[npm-img]: https://img.shields.io/npm/v/postcss-normalize.svg
200[npm-url]: https://www.npmjs.com/package/postcss-normalize
201
202[browserslist]: http://browserl.ist/
203[CSS Libraries]: #css-libraries
204[normalize.css]: https://github.com/csstools/normalize.css
205[Options]: #options
206[PostCSS]: https://github.com/postcss/postcss
207[PostCSS Import]: https://github.com/postcss/postcss-import
208[PostCSS Import Usage]: #postcss-import-usage
209[PostCSS Normalize]: https://github.com/csstools/postcss-normalize
210[sanitize.css]: https://github.com/csstools/sanitize.css
Note: See TracBrowser for help on using the repository browser.