Compile styles using shared worker thread (giuseppeg#49)

Author: giuseppeg

.github/workflows/node.js.yml

@@ -25,5 +25,5 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm test
+    - run: yarn install --frozen-lockfile
+    - run: yarn test

.npmignore

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

.travis.yml

@@ -8,6 +8,12 @@ Use [PostCSS](https://github.com/postcss/postcss) with
 
 ⚠️ **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.
@@ -39,7 +45,8 @@ With config:
           [
             "styled-jsx-plugin-postcss",
             {
-              "path": "[PATH_PREFIX]/postcss.config.js"
+              "path": "[PATH_PREFIX]/postcss.config.js",
+              "compileEnv": "worker"
             }
           ]
         ]
@@ -49,6 +56,12 @@ With config:
 }
 ```
 
+## 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).

README.md

@@ -0,0 +1,105 @@
+const { spawnSync } = require("child_process");
+const path = require("path");
+const {
+  Worker,
+  receiveMessageOnPort,
+  MessageChannel,
+} = require("worker_threads");
+const error = require("./error");
+
+let worker = null;
+let unreftimeout = null;
+
+function compileWorker(...args) {
+  if (unreftimeout) {
+    clearTimeout(unreftimeout);
+    unreftimeout = null;
+  }
+
+  if (!worker) {
+    worker = new Worker(require.resolve("./worker.js"));
+  }
+
+  const signal = new Int32Array(new SharedArrayBuffer(4));
+  signal[0] = 0;
+
+  try {
+    const subChannel = new MessageChannel();
+    worker.postMessage({ signal, port: subChannel.port1, args }, [
+      subChannel.port1,
+    ]);
+
+    const workStartedAt = Date.now();
+    const settings = args[1] || {};
+    const LOCK_TIMEOUT = settings.lockTimeout || 10000;
+    Atomics.wait(signal, 0, 0, LOCK_TIMEOUT);
+
+    const result = receiveMessageOnPort(subChannel.port2);
+
+    if (!result) {
+      if (Date.now() - workStartedAt >= LOCK_TIMEOUT) {
+        error(
+          `postcss is taking more than ${LOCK_TIMEOUT /
+            1000}s to compile the following styles:\n\n` +
+            `Filename: ${(settings.babel || {}).filename ||
+              "unknown filename"}\n\n` +
+            args[0]
+        );
+      }
+      error(`postcss' compilation result is undefined`);
+    }
+    const { message } = result;
+    if (message.error) {
+      error(`postcss failed with ${message.error}`);
+    }
+    return message.result;
+  } catch (error) {
+    throw error;
+  } finally {
+    unreftimeout = setTimeout(() => {
+      worker.unref();
+      worker = null;
+      unreftimeout = null;
+    }, 1000);
+  }
+}
+
+function compileSubprocess(css, settings) {
+  const result = spawnSync("node", [path.resolve(__dirname, "subprocess.js")], {
+    input: JSON.stringify({
+      css,
+      settings,
+    }),
+    encoding: "utf8",
+  });
+
+  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"
+        );
+      }
+    }
+
+    error(`postcss failed with ${result.stderr}`);
+  }
+
+  return result.stdout;
+}
+
+module.exports = (css, settings) => {
+  if (
+    typeof receiveMessageOnPort === "undefined" ||
+    settings.compileEnv === "process"
+  ) {
+    return compileSubprocess(css, settings);
+  } else {
+    return compileWorker(css, settings);
+  }
+};

compile.js

@@ -0,0 +1,3 @@
+module.exports = function error(message) {
+  throw new Error(`[styled-jsx-plugin-postcss] ${message}`);
+};

error.js

@@ -0,0 +1,14 @@
+const postcss = require("postcss");
+
+module.exports = (options = {}) => ({
+  postcssPlugin: "postcss-csso",
+  Rule(rule, { result, postcss }) {
+    rule.selector = rule.selector
+      .split(" ")
+      .map((s) => `${s}.plugin`)
+      .join(" ");
+    return rule;
+  },
+});
+
+module.exports.postcss = true;