# styled-jsx-plugin-postcss

> Plugin to add PostCSS support to styled-jsx

Latest version **4.0.1** (published 2021-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-jsx-plugin-postcss
pnpm add styled-jsx-plugin-postcss
yarn add styled-jsx-plugin-postcss
bun add styled-jsx-plugin-postcss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2021-01-25 |
| First published | 2017-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 90 |
| Author | Giuseppe Gurgone |
| Maintainers | giuseppegurgone |
| Keywords | styled-jsx-plugin, styled-jsx, postcss |

## Links

- npm: https://www.npmjs.com/package/styled-jsx-plugin-postcss
- Repository: https://github.com/giuseppeg/styled-jsx-plugin-postcss
- Homepage: https://github.com/giuseppeg/styled-jsx-plugin-postcss#readme
- Issues: https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues
- npm.io page: https://npm.io/package/styled-jsx-plugin-postcss

## Dependencies (1)

- [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^2.1.2

## Recent versions

- 4.0.1 (latest) — 2021-01-25
- 4.0.0 — 2020-11-24
- 3.0.2 — 2020-10-13
- 3.0.1 — 2020-09-23
- 3.0.0 — 2020-09-06
- 2.0.1 — 2019-06-01
- 2.0.0 — 2018-10-22
- 1.0.0 — 2018-10-08
- 0.1.3 — 2018-04-01
- 0.1.2 — 2017-12-29
- 0.1.1 — 2017-10-18
- 0.1.0 — 2017-10-06

## README

# styled-jsx-plugin-postcss

[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-plugin-postcss.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-plugin-postcss)
[![npm](https://img.shields.io/npm/v/styled-jsx-plugin-postcss.svg)](https://www.npmjs.com/package/styled-jsx-plugin-postcss)

Use [PostCSS](https://github.com/postcss/postcss) with
[styled-jsx](https://github.com/zeit/styled-jsx) 💥

⚠️ **This plugin is not actively being maintained. If you want me to work on it please [consider donating](https://github.com/sponsors/giuseppeg).**

## Supporters

Companies and individuals who sponsored some work on this library:

🥇 [@swissredcross](https://github.com/swissredcross)

## Usage

Install this package first.

```bash
npm install --save styled-jsx-plugin-postcss
```

Next, add `styled-jsx-plugin-postcss` to the `styled-jsx`'s `plugins` in your
babel configuration:

```json
{
  "plugins": [
    ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-postcss"] }]
  ]
}
```

With config:

```json
{
  "plugins": [
    [
      "styled-jsx/babel",
      {
        "plugins": [
          [
            "styled-jsx-plugin-postcss",
            {
              "path": "[PATH_PREFIX]/postcss.config.js",
              "compileEnv": "worker"
            }
          ]
        ]
      }
    ]
  ]
}
```

## compileEnv

When using Node.js v12.3.0 and above the plugin defaults to compiling using a worker thread instead of a child process. This results in faster builds.

If for any reason you want to force compiling using a child process (slower) you can register the plugin with the config option `compileEnv` set to `process`.

### Example with CRA

Usage with Create React App requires you to either _eject_ or use [react-app-rewired](https://github.com/timarney/react-app-rewired).

Here is an example using `react-app-rewired`:

```javascript
// config-overrides.js
// this file overrides the CRA webpack.config

const { getBabelLoader } = require("react-app-rewired");

module.exports = function override(config, env) {
  const loader = getBabelLoader(config.module.rules);

  // Older versions of webpack have `plugins` on `loader.query` instead of `loader.options`.
  const options = loader.options || loader.query;
  options.plugins = [
    [
      "styled-jsx/babel",
      {
        plugins: ["styled-jsx-plugin-postcss"],
      },
    ],
  ].concat(options.plugins || []);
  return config;
};
```

_Note: Please follow their instructions on how to set up build & test scripts, and make sure you have a correctly formatted `postcss.config.js` as well_.

#### Notes

`styled-jsx-plugin-postcss` uses `styled-jsx`'s plugin system which is supported
from version 2. Read more on their repository for further info.

## Plugins

`styled-jsx-plugin-postcss` uses
[`postcss-load-config`](https://www.npmjs.com/package/postcss-load-config)
therefore you may want to refer to their docs to learn more about
[adding plugins](https://www.npmjs.com/package/postcss-load-config#packagejson).

## Contributions

**PRs and contributions are welcome!**

We aim to drive development of this plugin through community contributions.

## License

MIT

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