chore!: minimum supported Node.js version is 18.12.0 (#677)

.github/workflows/nodejs.yml

@@ -60,7 +60,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [14.x, 16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 21.x]
         webpack-version: [latest]
 
     runs-on: ${{ matrix.os }}

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log
 yarn-error.log
 npm-debug.log*
 .eslintcache
+.cspellcache
 
 dmd
 jest

README.md

@@ -1139,7 +1139,7 @@ const postcssCustomPlugin = (opts = {}) => {
     postcssPlugin: "postcss-custom-plugin",
     Once: (root, { result }) => {
       opts.loaderContext.addDependency(
-        path.resolve(__dirname, "path", "to", "file")
+        path.resolve(__dirname, "path", "to", "file"),
       );
     },
   };

babel.config.js

@@ -10,7 +10,7 @@ module.exports = (api) => {
         "@babel/preset-env",
         {
           targets: {
-            node: "14.15.0",
+            node: "18.12.0",
           },
         },
       ],

jest.config.js

@@ -4,4 +4,6 @@ module.exports = {
     "\\.[mc]?tsx?$": ["ts-jest", { rootDir: ".", esModuleInterop: true }],
     "\\.[mc]?jsx?$": "babel-jest",
   },
+  // ignore node_modules except for strip-ansi and ansi-regex
+  transformIgnorePatterns: ["node_modules/(?!strip-ansi|ansi-regex)"],
 };

lint-staged.config.js

@@ -1,4 +1,7 @@
 module.exports = {
-  "*": ["prettier --write --ignore-unknown", "cspell --no-must-find-files"],
+  "*": [
+    "prettier --cache --write --ignore-unknown",
+    "cspell --cache --no-must-find-files",
+  ],
   "*.js": ["eslint --cache --fix"],
 };

package.json

@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 14.15.0"
+    "node": ">= 18.12.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -22,9 +22,9 @@
     "build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
     "commitlint": "commitlint --from=master",
     "security": "npm audit --production",
-    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
+    "lint:prettier": "prettier --cache --list-different .",
     "lint:js": "eslint --cache .",
-    "lint:spelling": "cspell \"**/*.*\"",
+    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
     "lint": "npm-run-all -l -p \"lint:**\"",
     "fix:js": "npm run lint:js -- --fix",
     "fix:prettier": "npm run lint:prettier -- --write",
@@ -45,46 +45,46 @@
     "webpack": "^5.0.0"
   },
   "dependencies": {
-    "cosmiconfig": "^8.3.5",
+    "cosmiconfig": "^9.0.0",
     "jiti": "^1.20.0",
     "semver": "^7.5.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "cspell": "^6.31.2",
-    "cssnano": "^6.0.0",
-    "del": "^6.1.1",
+    "cspell": "^8.3.2",
+    "cssnano": "^6.0.3",
+    "del": "^7.1.0",
     "del-cli": "^5.1.0",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "less": "^4.2.0",
-    "less-loader": "^11.1.0",
-    "lint-staged": "^13.2.3",
-    "memfs": "^3.4.13",
+    "less-loader": "^12.0.0",
+    "lint-staged": "^15.2.0",
+    "memfs": "^4.6.0",
     "midas": "^2.0.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.29",
-    "postcss-dark-theme-class": "^0.7.3",
-    "postcss-import": "^15.1.0",
+    "postcss": "^8.4.33",
+    "postcss-dark-theme-class": "^1.1.0",
+    "postcss-import": "^16.0.0",
     "postcss-js": "^4.0.1",
-    "postcss-load-config": "^4.0.1",
+    "postcss-load-config": "^5.0.2",
     "postcss-nested": "^6.0.1",
     "postcss-short": "^5.0.0",
-    "prettier": "^2.8.7",
-    "sass": "^1.69.0",
-    "sass-loader": "^13.2.2",
+    "prettier": "^3.2.2",
+    "sass": "^1.69.7",
+    "sass-loader": "^14.0.0",
     "standard-version": "^9.3.2",
-    "strip-ansi": "^6.0.0",
+    "strip-ansi": "^7.1.0",
     "sugarss": "^4.0.1",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",

src/index.js

@@ -52,8 +52,8 @@ export default async function loader(content, sourceMap, meta) {
   if (!implementation) {
     callback(
       new Error(
-        `The Postcss implementation "${options.implementation}" not found`
-      )
+        `The Postcss implementation "${options.implementation}" not found`,
+      ),
     );
 
     return;
@@ -66,7 +66,7 @@ export default async function loader(content, sourceMap, meta) {
       loadedConfig = await loadConfig(
         this,
         configOption,
-        options.postcssOptions
+        options.postcssOptions,
       );
     } catch (error) {
       callback(error);
@@ -78,7 +78,7 @@ export default async function loader(content, sourceMap, meta) {
   const { plugins, processOptions } = await getPostcssOptions(
     this,
     loadedConfig,
-    options.postcssOptions
+    options.postcssOptions,
   );
 
   const useSourceMap =
@@ -137,7 +137,7 @@ export default async function loader(content, sourceMap, meta) {
       // is used to make the condition body run once.
       const packageJSONDir = findPackageJSONDir(
         process.cwd(),
-        this.fs.statSync
+        this.fs.statSync,
       );
 
       if (packageJSONDir) {
@@ -146,7 +146,7 @@ export default async function loader(content, sourceMap, meta) {
         try {
           bufferOfPackageJSON = this.fs.readFileSync(
             path.resolve(packageJSONDir, "package.json"),
-            "utf8"
+            "utf8",
           );
         } catch (_error) {
           // Nothing
@@ -168,8 +168,8 @@ export default async function loader(content, sourceMap, meta) {
               this.emitWarning(
                 new Error(
                   "Add postcss as project dependency. postcss is not a peer dependency for postcss-loader. " +
-                    "Use `npm install postcss` or `yarn add postcss`"
-                )
+                    "Use `npm install postcss` or `yarn add postcss`",
+                ),
               );
             } else {
               hasExplicitDependencyOnPostCSS = true;
@@ -212,7 +212,7 @@ export default async function loader(content, sourceMap, meta) {
             message.file,
             message.content,
             message.sourceMap,
-            message.info
+            message.info,
           );
         }
     }

src/utils.js

@@ -147,6 +147,7 @@ async function loadConfig(loaderContext, config, postcssOptions) {
   loaders[".ts"] = tsLoader;
 
   const explorer = cosmiconfig(moduleName, {
+    searchStrategy: "global",
     searchPlaces,
     loaders,
   });
@@ -207,7 +208,7 @@ function loadPlugin(plugin, options, file) {
     return loadedPlugin(options);
   } catch (error) {
     throw new Error(
-      `Loading PostCSS "${plugin}" plugin failed: ${error.message}\n\n(@${file})`
+      `Loading PostCSS "${plugin}" plugin failed: ${error.message}\n\n(@${file})`,
     );
   }
 }
@@ -294,7 +295,7 @@ async function tryRequireThenImport(module) {
 async function getPostcssOptions(
   loaderContext,
   loadedConfig = {},
-  postcssOptions = {}
+  postcssOptions = {},
 ) {
   const file = loaderContext.resourcePath;
 
@@ -333,14 +334,14 @@ async function getPostcssOptions(
   if (processOptionsFromConfig.from) {
     processOptionsFromConfig.from = path.resolve(
       path.dirname(loadedConfig.filepath),
-      processOptionsFromConfig.from
+      processOptionsFromConfig.from,
     );
   }
 
   if (processOptionsFromConfig.to) {
     processOptionsFromConfig.to = path.resolve(
       path.dirname(loadedConfig.filepath),
-      processOptionsFromConfig.to
+      processOptionsFromConfig.to,
     );
   }
 
@@ -349,14 +350,14 @@ async function getPostcssOptions(
   if (processOptionsFromOptions.from) {
     processOptionsFromOptions.from = path.resolve(
       loaderContext.rootContext,
-      processOptionsFromOptions.from
+      processOptionsFromOptions.from,
     );
   }
 
   if (processOptionsFromOptions.to) {
     processOptionsFromOptions.to = path.resolve(
       loaderContext.rootContext,
-      processOptionsFromOptions.to
+      processOptionsFromOptions.to,
     );
   }
 
@@ -382,22 +383,22 @@ async function getPostcssOptions(
     } catch (error) {
       loaderContext.emitError(
         new Error(
-          `Loading PostCSS "${processOptions.parser}" parser failed: ${error.message}\n\n(@${file})`
-        )
+          `Loading PostCSS "${processOptions.parser}" parser failed: ${error.message}\n\n(@${file})`,
+        ),
       );
     }
   }
 
   if (typeof processOptions.stringifier === "string") {
     try {
       processOptions.stringifier = await tryRequireThenImport(
-        processOptions.stringifier
+        processOptions.stringifier,
       );
     } catch (error) {
       loaderContext.emitError(
         new Error(
-          `Loading PostCSS "${processOptions.stringifier}" stringifier failed: ${error.message}\n\n(@${file})`
-        )
+          `Loading PostCSS "${processOptions.stringifier}" stringifier failed: ${error.message}\n\n(@${file})`,
+        ),
       );
     }
   }
@@ -408,8 +409,8 @@ async function getPostcssOptions(
     } catch (error) {
       loaderContext.emitError(
         new Error(
-          `Loading PostCSS "${processOptions.syntax}" syntax failed: ${error.message}\n\n(@${file})`
-        )
+          `Loading PostCSS "${processOptions.syntax}" syntax failed: ${error.message}\n\n(@${file})`,
+        ),
       );
     }
   }

test/__snapshots__/postcssOptions.test.js.snap

@@ -448,19 +448,19 @@ exports[`"postcssOptions" option should work with the "config" options and use p
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not(.is-light) { /* :root is <html> for HTML documents */
+  :root:where(:not(.is-light)) { /* :root is <html> for HTML documents */
     --text-color: white
   }
-  html:not(.is-light) body {
+  :where(html:not(.is-light)) body {
     background: black
   }
 }
 
-:root.is-dark { /* :root is <html> for HTML documents */
+:root:where(.is-dark) { /* :root is <html> for HTML documents */
     --text-color: white
   }
 
-html.is-dark body {
+:where(html.is-dark) body {
     background: black
   }"
 `;