# PostCSS Normalize

[![NPM Version](https://img.shields.io/npm/v/postcss-normalize.svg)](https://www.npmjs.com/package/postcss-normalize) [![Build Status](https://img.shields.io/travis/csstools/postcss-normalize/master.svg)](https://travis-ci.org/csstools/postcss-normalize) [![Support Chat](https://img.shields.io/badge/support-chat-blue.svg)](https://gitter.im/postcss/postcss)

[PostCSS Normalize](https://github.com/csstools/postcss-normalize) lets you use the parts of [normalize.css](https://github.com/csstools/normalize.css) or [sanitize.css](https://github.com/csstools/sanitize.css) that you need from your [browserslist](http://browserl.ist/).

```css
@import "normalize.css";
```

```css
@import "sanitize.css";
```

**PostCSS Normalize** uses a non-opinionated version of [normalize.css](https://github.com/csstools/normalize.css), but an opinionated version may also be used.

```css
@import "normalize.css/opinionated.css";
```

### Examples

Here is a sample of what **normalize.css** looks like when the **browserslist** is `ie >= 9`:

```css
/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}
```

And here is the same sample when the **browserslist** is `ie >= 10`:

```css
/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}
```

## Usage

Add [PostCSS Normalize](https://github.com/csstools/postcss-normalize) to your project:

```bash
npm install postcss-normalize --save-dev
```

Add a [browserslist](http://browserl.ist/) entry in `package.json`:

```json
{
  "browserslist": "last 2 versions"
}
```

Use **PostCSS Normalize** to process your CSS:

```js
const postcssNormalize = require('postcss-normalize')

postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)
```

Or use it as a [PostCSS](https://github.com/postcss/postcss) plugin:

```js
const postcss = require('postcss')
const postcssNormalize = require('postcss-normalize')

postcss([
  postcssNormalize(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */)
```

**PostCSS Normalize** runs in all Node environments, with special instructions for:

| [Node](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#node) | [PostCSS CLI](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#postcss-cli) | [Webpack](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#webpack) | [Create React App](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#create-react-app) | [Gulp](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#gulp) | [Grunt](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-normalize/INSTALL.md#grunt) |
| ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |

## PostCSS Import Usage

**PostCSS Normalize** includes a `postcssImport` function to configure [PostCSS Import](https://github.com/postcss/postcss-import) and allow you to continue using the `@import` syntax.

```js
const postcss = require('postcss')
const postcssImport = require('postcss-import')
const postcssNormalize = require('postcss-normalize')

postcss([
  postcssImport(
    postcssNormalize(
      /* pluginOptions (for PostCSS Normalize) */
    ).postcssImport(
      /* pluginOptions (for PostCSS Import) */
    )
  )
]) // now you can use @import "normalize.css", etc. again
```

Alternatively, use `@import-normalize` or `@import-sanitize` to avoid conflicts with `@import` transforms.

```
@import-normalize;
```

```
@import-normalize "opinionated.css";
```

```
@import-sanitize;
```

## Options

### allowDuplicates

The `allowDuplicates` option determines whether multiple, duplicate insertions of CSS libraries are allowed. By default, duplicate libraries are omitted.

```js
postcssNormalize({ allowDuplicates: true })
```

### forceImport

The `forceImport` option defines CSS libraries that will be inserted at the beginning of the CSS file. Unless overriden by `allowDuplicates`, duplicate CSS libraries would still be omitted.

```js
postcssNormalize({ forceImport: true })
```

Specific CSS libraries may be defined.

```js
postcssNormalize({
  forceImport: 'sanitize.css'
})
```

### browsers

The `browsers` option defines an override of the project’s **browserslist** for **PostCSS Normalize**. This option should be avoided in leui of a browserslist file.

```js
postcssNormalize({ browsers: 'last 2 versions' })
```

## CSS Libraries

**PostCSS Normalize** can include [normalize.css](https://github.com/csstools/normalize.css) or [sanitize.css](https://github.com/csstools/sanitize.css) and configure either with the following combinations:

```css
@import "normalize"; /* also, @import "normalize.css" */
@import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */
@import "sanitize"; /* also, @import "sanitize.css" */
@import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */
@import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */
@import "sanitize/page"; /* also, @import "sanitize.css/page.css" */
@import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/redux/repos/examples/real-world/node_modules/postcss-normalize.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.