Installations

npm install @thedadi/styled-jsx-plugin-postcss

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.1.0

NPM Version

6.9.0 Score

62.9

Supply Chain

96.5

Quality

74.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

7

Total

27

Closed

4

Merged

16

Issues

Open

4

Total

30

Closed

26

Releases

2

v2.0.1

Updated on Jun 01, 2019

v1.0.1

Updated on Oct 16, 2018

View All 2 releases

Languages

2

JavaScript

CSS

JavaScript (99.79%)

CSS (0.21%)

Developer

giuseppeg

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

92 Stars

40 Commits

17 Forks

3 Watchers

7 Branches

11 Contributors

Updated on Oct 14, 2024

Maintainers

1

View All 11 Contributors

Package Meta Information

Latest Version

4.0.2

Package Id

@thedadi/styled-jsx-plugin-postcss@4.0.2

Unpacked Size

7.77 kB

Size

3.40 kB

File Count

13

NPM Version

6.9.0

Node Version

12.1.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

debug postcss-load-config

Peer Dependencies

1

postcss

Dev Dependencies

6

mocha postcss postcss-easy-import postcss-nested postcss-preset-env postcss-spiffing

styled-jsx-plugin-postcss

Use PostCSS with styled-jsx 💥

Usage

Install this package first.

1npm install --save styled-jsx-plugin-postcss

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

1{
2  "plugins": [
3    ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-postcss"] }]
4  ]
5}

With config:

1{
2  "plugins": [
3    ["styled-jsx/babel", {
4      "plugins": [
5        [
6          "styled-jsx-plugin-postcss",
7          {
8            "path":
9              "[PATH_PREFIX]/postcss.config.js"
10          }
11        ]
12      ] 
13    }]
14  ]
15}

Example with CRA

Usage with Create React App requires you to either eject or use react-app-rewired.

Here is an example using react-app-rewired:

1// config-overrides.js
2// this file overrides the CRA webpack.config
3
4const { getBabelLoader } = require('react-app-rewired')
5
6module.exports = function override (config, env) {
7  const loader = getBabelLoader(config.module.rules)
8
9  // Older versions of webpack have `plugins` on `loader.query` instead of `loader.options`.
10  const options = loader.options || loader.query
11  options.plugins = [['styled-jsx/babel', {
12    'plugins': ['styled-jsx-plugin-postcss']
13  }]].concat(options.plugins || [])
14  return config
15}

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-plugins therefore you may want to refer to their docs to learn more about adding plugins.

Contributions

PRs and contributions are welcome!

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

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More