.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: giuseppeg

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,10 @@
+---
+name: ''
+about: ''
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+# ⚠️ This plugin is not actively being maintained. If you want me to work on it please [consider donating]( https://github.com/sponsors/giuseppeg)

.github/ISSUE_TEMPLATE/not-actively-maintained.md

@@ -0,0 +1,10 @@
+---
+name: Not actively maintained
+about: Sponsors only
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+# ⚠️ This plugin is not actively being maintained. If you want me to work on it please [consider donating]( https://github.com/sponsors/giuseppeg)

.npmignore

@@ -0,0 +1,3 @@
+postcss.config.js
+test.js
+fixture.css

.prettierignore

@@ -0,0 +1 @@
+*.css

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 sudo: false
 node_js:
-  - "6"
-  - "8"
+  - "10"
+  - "14"

README.md

@@ -3,37 +3,100 @@
 [![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) 💥
+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).**
 
 ## Usage
 
-Install the package first.
+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:
+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"] }
+      {
+        "plugins": [
+          [
+            "styled-jsx-plugin-postcss",
+            {
+              "path": "[PATH_PREFIX]/postcss.config.js"
+            }
+          ]
+        ]
+      }
     ]
   ]
 }
 ```
 
+### 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.
+`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`](https://www.npmjs.com/package/postcss-load-plugins) therefore you may want to refer to their docs to learn more about [adding plugins](https://www.npmjs.com/package/postcss-load-plugins#packagejson)
+`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
 

fixture-invalid-config/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["mock-plugin"],
+};

fixture-postcss-plugin.js

@@ -0,0 +1,12 @@
+const postcss = require("postcss");
+
+module.exports = (options = {}) => ({
+  postcssPlugin: "postcss-csso",
+  Once(root, { result, postcss }) {
+    console.warn("warn");
+    console.error("error");
+    return root;
+  },
+});
+
+module.exports.postcss = true;

index.js

@@ -1,23 +1,39 @@
-const loopWhile = require('deasync').loopWhile
-const processor = require('./processor')
+const { spawnSync } = require("child_process");
+const path = require("path");
 
 module.exports = (css, settings) => {
-  let processedCss
-  let wait = true
+  const cssWithPlaceholders = css.replace(
+    /%%styled-jsx-placeholder-(\d+)%%/g,
+    (_, id) => `/*%%styled-jsx-placeholder-${id}%%*/`
+  );
 
-  function resolved(result) {
-    processedCss = result
-    wait = false
-  }
+  const result = spawnSync("node", [path.resolve(__dirname, "processor.js")], {
+    input: JSON.stringify({
+      css: cssWithPlaceholders,
+      settings,
+    }),
+    encoding: "utf8",
+  });
 
-  processor(css)
-    .then(resolved)
-    .catch(resolved)
-  loopWhile(() => wait)
+  if (result.status !== 0) {
+    if (result.stderr.includes("Invalid PostCSS Plugin")) {
+      let isNext = false;
+      try {
+        require.resolve("next");
+        isNext = true;
+      } catch (err) {}
+      if (isNext) {
+        console.error(
+          "Next.js 9 default postcss support uses a non standard postcss config schema https://err.sh/next.js/postcss-shape, you must use the interoperable object-based format instead https://nextjs.org/docs/advanced-features/customizing-postcss-config"
+        );
+      }
+    }
 
-  if (processedCss instanceof Error || processedCss.name === 'CssSyntaxError') {
-    throw processedCss
+    throw new Error(`postcss failed with ${result.stderr}`);
   }
 
-  return processedCss
-}
+  return result.stdout.replace(
+    /\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g,
+    (_, id) => `%%styled-jsx-placeholder-${id}%%`
+  );
+};

package.json

@@ -1,10 +1,10 @@
 {
   "name": "styled-jsx-plugin-postcss",
-  "version": "0.1.0",
+  "version": "4.0.0",
   "description": "Plugin to add PostCSS support to styled-jsx",
   "main": "index.js",
   "scripts": {
-    "test": "mocha test.js"
+    "test": "mocha --timeout 10000 test.js"
   },
   "repository": {
     "type": "git",
@@ -22,14 +22,17 @@
   },
   "homepage": "https://github.com/giuseppeg/styled-jsx-plugin-postcss#readme",
   "dependencies": {
-    "deasync": "^0.1.10",
-    "postcss": "^6.0.13",
-    "postcss-load-plugins": "^2.3.0"
+    "postcss-load-config": "^2.1.2"
   },
   "devDependencies": {
-    "mocha": "^4.0.1",
-    "postcss-cssnext": "^3.0.2",
-    "postcss-easy-import": "^3.0.0",
-    "postcss-nested": "^2.1.2"
+    "mocha": "^8.2.0",
+    "postcss": "^8.1.2",
+    "postcss-calc": "^7.0.5",
+    "postcss-import": "^13.0.0",
+    "postcss-nested": "^5.0.1",
+    "postcss-preset-env": "^6.0.10"
+  },
+  "peerDependencies": {
+    "postcss": "^7.0.2 || ^8.1.0"
   }
 }

postcss.config.js

@@ -0,0 +1,18 @@
+const path = require("path");
+
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "postcss-preset-env": {
+      browsers: ["last 2 versions", "ie >= 10"],
+      features: {
+        "nesting-rules": true,
+        "color-mod-function": {
+          unresolved: "warn",
+        },
+      },
+    },
+    "postcss-calc": {},
+    [path.resolve(__dirname, "./fixture-postcss-plugin.js")]: {},
+  },
+};

processor.js

@@ -1,30 +1,47 @@
-const postcss = require('postcss')
-const loader = require('postcss-load-plugins')
+const postcss = require("postcss");
+const loader = require("postcss-load-config");
 
-let plugins
-let _processor
+let plugins;
+let _processor;
 
 function processor(src, options) {
-  options = options || {}
-
-  let loaderPromise
+  options = options || {};
+  let loaderPromise;
   if (!plugins) {
-    loaderPromise = loader(options.env || process.env)
-      .then(pluginsInfo => {
-        plugins = pluginsInfo.plugins || []
-      })
+    loaderPromise = loader(options.env || process.env, options.path, {
+      argv: false,
+    }).then((pluginsInfo) => {
+      plugins = pluginsInfo.plugins || [];
+    });
   } else {
-    loaderPromise = Promise.resolve()
+    loaderPromise = Promise.resolve();
   }
 
   return loaderPromise
     .then(() => {
       if (!_processor) {
-        _processor = postcss(plugins)
+        _processor = postcss(plugins);
       }
-      return _processor.process(src)
+      return _processor.process(src, { from: false });
     })
-    .then(result => result.css)
+    .then((result) => result.css);
 }
 
-module.exports = processor
+let input = "";
+process.stdin.on("data", (data) => {
+  input += data.toString();
+});
+
+process.stdin.on("end", () => {
+  const inputData = JSON.parse(input);
+  processor(inputData.css, inputData.settings)
+    .then((result) => {
+      process.stdout.write(result);
+    })
+    .catch((err) => {
+      // NOTE: we console.erorr(err) and then process.exit(1) instead of throwing the error
+      // to avoid the UnhandledPromiseRejectionWarning message.
+      console.error(err);
+      process.exit(1);
+    });
+});