Support Node 16.12

.github/workflows/build_and_test.yml

@@ -1,17 +1,26 @@
+name: Build and Test
+
 on:
-  - push
-  - pull_request
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - "*"
 
 jobs:
-  build-test:
+  build:
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16.12"
       - uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.11.5
-          run_install: |
-            - recursive: true
-              args: [--frozen-lockfile, --strict-peer-dependencies]
+          version: 6.20.3
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test
+      - run: pnpm run check-format
       - run: pnpm run lint
-      - run: pnpm run test

README.md

@@ -8,9 +8,11 @@ A [nodejs loader](https://nodejs.org/dist/latest-v13.x/docs/api/esm.html#esm_exp
 npm install --save @node-loader/postcss
 ```
 
+Node 16.12 changed the hooks used in NodeJS loaders. If using Node<16.12, use `@node-loader/postcss@1`. Otherwise, use `@node-loader/postcss@latest`.
+
 ## Usage
 
-Create a `postcss.config.js` file in your current working directory.  Now run node with the `--loader` (or `--experimental-loader` for older NodeJS version) flag:
+Create a `postcss.config.js` file in your current working directory. Now run node with the `--loader` (or `--experimental-loader` for older NodeJS version) flag:
 
 ```sh
 node --loader @node-loader/postcss file.js
@@ -19,9 +21,12 @@ node --loader @node-loader/postcss file.js
 Now you can import CSS files as ES modules in your NodeJS project:
 
 ```js
-import cssString from './main.css';
+import cssString from "./main.css";
 
-console.log("After PostCSS processing, the main.css file content is", cssString);
+console.log(
+  "After PostCSS processing, the main.css file content is",
+  cssString
+);
 ```
 
 ## Configuration

lib/node-loader-postcss.js

@@ -1,18 +1,27 @@
 import postcss from "postcss";
 import path from "path";
+import fs from "fs/promises";
+import urlModule from "url";
 
-export async function transformSource(
-  originalSource,
-  context,
-  defaultTransformSource
-) {
-  if (useLoader(context.url)) {
+export async function load(url, context, defaultLoad) {
+  if (useLoader(url)) {
     const postCssConfigFilePath = path.resolve(
       process.cwd(),
       process.env.POSTCSS_CONFIG || "postcss.config.js"
     );
 
     const { default: postCssConfig } = await import(postCssConfigFilePath);
+
+    let originalSource;
+
+    try {
+      originalSource = (await defaultLoad(url, context, defaultLoad)).source;
+    } catch (err) {
+      originalSource = await fs.readFile(urlModule.fileURLToPath(url), {
+        encoding: "utf-8",
+      });
+    }
+
     let css;
     try {
       const result = await postcss(postCssConfig.plugins).process(
@@ -37,24 +46,11 @@ export async function transformSource(
 
     return {
       source,
-    };
-  }
-
-  return defaultTransformSource(
-    originalSource,
-    context,
-    defaultTransformSource
-  );
-}
-
-export function getFormat(url, context, defaultGetFormat) {
-  if (useLoader(url)) {
-    return {
       format: "module",
     };
-  } else {
-    return defaultGetFormat(url, context, defaultGetFormat);
   }
+
+  return defaultLoad(url, context, defaultLoad);
 }
 
 function useLoader(url) {

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "test": "node --loader ./lib/node-loader-postcss.js ./test/run-tests.js",
     "lint": "eslint lib",
+    "check-format": "prettier --check .",
     "prepare": "husky install"
   },
   "files": [