From 9b00fb16bb94a56c39b78f4e57b5ef85fc2e5550 Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Mon, 8 Nov 2021 18:23:22 -0700 Subject: [PATCH 1/2] Support Node 16.12 --- .github/workflows/build_and_test.yml | 25 ++++++++++++------ lib/node-loader-postcss.js | 38 +++++++++++++--------------- package.json | 1 + 3 files changed, 35 insertions(+), 29 deletions(-) diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml index c206b7e..3bc4633 100644 --- a/.github/workflows/build_and_test.yml +++ b/.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 diff --git a/lib/node-loader-postcss.js b/lib/node-loader-postcss.js index ee0365a..45c78f4 100644 --- a/lib/node-loader-postcss.js +++ b/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) { diff --git a/package.json b/package.json index b71734d..93dd3fa 100644 --- a/package.json +++ b/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": [ From 732b74b1d0c405c82d68d417e47577c48d22db27 Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Mon, 8 Nov 2021 18:25:11 -0700 Subject: [PATCH 2/2] Documentation --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7c0fc10..1d59258 100644 --- a/README.md +++ b/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