Support Node 16.12 (#2)

* Support Node 16.12 * Documentation

Author: Joel Denning

.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": [