# @stencil/postcss

> The Stencil PostCSS Plugin

Latest version **2.1.0** (published 2021-10-05) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @stencil/postcss
pnpm add @stencil/postcss
yarn add @stencil/postcss
bun add @stencil/postcss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-10-05 |
| First published | 2018-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Ionic Team |
| Maintainers | willmartian, splitinfinities, ionicjs, jthoms1, maxlynch, mhartington, brandyscarney, kensodemann, larsmikkelsen, nhyatt, liamdebeasi, jaredcbaum, rwaskiewicz-ionic |
| Keywords | stencil, postcss |

## Links

- npm: https://www.npmjs.com/package/@stencil/postcss
- Repository: https://github.com/ionic-team/stencil-postcss
- Homepage: https://stenciljs.com/
- Issues: https://github.com/ionic-team/stencil-postcss/issues
- npm.io page: https://npm.io/package/@stencil/postcss

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ~8.3.8
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.3.6

## Recent versions

- 2.1.0 (latest) — 2021-10-05
- 2.1.0-0 (next) — 2021-09-27
- 2.0.0 — 2020-12-16
- 1.0.1 — 2019-06-08
- 1.0.0 — 2019-06-08
- 0.1.0 — 2018-07-31
- 0.0.4 — 2018-03-17
- 0.0.3 — 2018-02-27
- 0.0.2 — 2018-02-15
- 0.0.1 — 2018-02-14

## README

# @stencil/postcss

This package is used in order to integrate with postcss and all of its plugins.

First, npm install within the project:

```
npm install @stencil/postcss --save-dev
```

Next, within the project's `stencil.config.ts` file, import the plugin and add
it to the `plugins` config. In the example below we're using the `autoprefixer` postcss plugin, so you'll also have to run:

```
npm install autoprefixer @types/autoprefixer --save-dev
```

This plugin requires Node.js 14 or higher. For older Node versions, see the 1.x release.

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';

export const config: Config = {
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
};
```

During development, this plugin will use postcss to process any plugins you may
have passed along.

## Options

Postcss has an ecosystem of plugins itself (a plugin for a plugin if you will).
For our example, we're using the autoprefixer plugin, and configuring its
options. Note, you can pass any valid autoprefixer option.

```js
exports.config = {
  plugins: [
    postcss({
      plugins: [
        autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        })
      ]
    })
  ]
};
```

### Inject Globals Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    postcss({
      injectGlobalPaths: [
        'src/globals/variables.pcss',
        'src/globals/mixins.pcss'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Sass variables, mixins and functions, but not contain any CSS.

## Valid file extensions

This plugin will only transpile files whose extensions are `.css`, `.pcss`, or `.postcss`.

## Related

* [postcss](https://github.com/postcss/postcss)
* [autoprefixer](https://github.com/postcss/autoprefixer)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of
Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for
information on our rules of conduct.

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