refactor: move config autoload from postcss-load-config package

Author: cap-Bernardito

package-lock.json

@@ -42,9 +42,10 @@
     "webpack": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "cosmiconfig": "^6.0.0",
+    "import-cwd": "^3.0.0",
     "loader-utils": "^2.0.0",
     "postcss": "^7.0.0",
-    "postcss-load-config": "^2.0.0",
     "schema-utils": "^2.7.0"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.2.2",
     "cross-env": "^7.0.2",
+    "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
     "eslint": "^7.6.0",
@@ -71,6 +73,7 @@
     "npm-run-all": "^4.1.5",
     "postcss-import": "^12.0.1",
     "postcss-js": "^2.0.0",
+    "postcss-nested": "^4.2.3",
     "prettier": "^2.0.5",
     "standard": "^14.3.4",
     "standard-version": "^8.0.2",

package.json

@@ -1,33 +1,15 @@
 import path from 'path';
-import Module from 'module';
 
 import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
 import postcss from 'postcss';
-import postcssrc from 'postcss-load-config';
 
 import Warning from './Warning';
 import SyntaxError from './Error';
 import parseOptions from './options';
 import schema from './options.json';
-
-const parentModule = module;
-
-function exec(code, loaderContext) {
-  const { resource, context } = loaderContext;
-
-  const module = new Module(resource, parentModule);
-
-  // eslint-disable-next-line no-underscore-dangle
-  module.paths = Module._nodeModulePaths(context);
-  module.filename = resource;
-
-  // eslint-disable-next-line no-underscore-dangle
-  module._compile(code, resource);
-
-  return module.exports;
-}
+import { exec, loadConfig } from './utils';
 
 /**
  * **PostCSS Loader**
@@ -100,7 +82,7 @@ export default async function loader(content, sourceMap, meta = {}) {
     rc.ctx.webpack = this;
 
     try {
-      config = await postcssrc(rc.ctx, rc.path);
+      config = await loadConfig(rc.ctx, rc.path);
     } catch (error) {
       callback(error);
 

src/index.js

@@ -0,0 +1,178 @@
+import path from 'path';
+import Module from 'module';
+
+import { cosmiconfig } from 'cosmiconfig';
+import importCwd from 'import-cwd';
+
+const parentModule = module;
+
+const createContext = (context) => {
+  const result = {
+    cwd: process.cwd(),
+    env: process.env.NODE_ENV,
+    ...context,
+  };
+
+  if (!result.env) {
+    process.env.NODE_ENV = 'development';
+  }
+
+  return result;
+};
+
+const loadOptions = (config, file) => {
+  const result = {};
+
+  if (config.parser && typeof config.parser === 'string') {
+    try {
+      result.parser = importCwd(config.parser);
+    } catch (err) {
+      throw new Error(
+        `Loading PostCSS Parser failed: ${err.message}\n\n(@${file})`
+      );
+    }
+  }
+
+  if (config.syntax && typeof config.syntax === 'string') {
+    try {
+      result.syntax = importCwd(config.syntax);
+    } catch (err) {
+      throw new Error(
+        `Loading PostCSS Syntax failed: ${err.message}\n\n(@${file})`
+      );
+    }
+  }
+
+  if (config.stringifier && typeof config.stringifier === 'string') {
+    try {
+      result.stringifier = importCwd(config.stringifier);
+    } catch (err) {
+      throw new Error(
+        `Loading PostCSS Stringifier failed: ${err.message}\n\n(@${file})`
+      );
+    }
+  }
+
+  if (config.plugins) {
+    // eslint-disable-next-line no-param-reassign
+    delete config.plugins;
+  }
+
+  return { ...config, ...result };
+};
+
+const load = (plugin, options, file) => {
+  try {
+    if (
+      options === null ||
+      typeof options === 'undefined' ||
+      Object.keys(options).length === 0
+    ) {
+      return importCwd(plugin);
+    }
+
+    return importCwd(plugin)(options);
+  } catch (err) {
+    throw new Error(
+      `Loading PostCSS Plugin failed: ${err.message}\n\n(@${file})`
+    );
+  }
+};
+
+const loadPlugins = (config, file) => {
+  let plugins = [];
+
+  if (Array.isArray(config.plugins)) {
+    plugins = config.plugins.filter(Boolean);
+  } else {
+    plugins = Object.keys(config.plugins)
+      .filter((plugin) => {
+        return config.plugins[plugin] !== false ? plugin : '';
+      })
+      .map((plugin) => {
+        return load(plugin, config.plugins[plugin], file);
+      });
+  }
+
+  if (plugins.length && plugins.length > 0) {
+    plugins.forEach((plugin, i) => {
+      if (plugin.postcss) {
+        // eslint-disable-next-line no-param-reassign
+        plugin = plugin.postcss;
+      }
+
+      if (plugin.default) {
+        // eslint-disable-next-line no-param-reassign
+        plugin = plugin.default;
+      }
+
+      if (
+        // eslint-disable-next-line
+        !(
+          (typeof plugin === 'object' && Array.isArray(plugin.plugins)) ||
+          typeof plugin === 'function'
+        )
+      ) {
+        throw new TypeError(
+          `Invalid PostCSS Plugin found at: plugins[${i}]\n\n(@${file})`
+        );
+      }
+    });
+  }
+
+  return plugins;
+};
+
+const processResult = (context, result) => {
+  const file = result.filepath || '';
+  let config = result.config || {};
+
+  if (typeof config === 'function') {
+    config = config(context);
+  } else {
+    config = Object.assign({}, config, context);
+  }
+
+  if (!config.plugins) {
+    config.plugins = [];
+  }
+
+  return {
+    plugins: loadPlugins(config, file),
+    options: loadOptions(config, file),
+    file,
+  };
+};
+
+function exec(code, loaderContext) {
+  const { resource, context } = loaderContext;
+
+  const module = new Module(resource, parentModule);
+
+  // eslint-disable-next-line no-underscore-dangle
+  module.paths = Module._nodeModulePaths(context);
+  module.filename = resource;
+
+  // eslint-disable-next-line no-underscore-dangle
+  module._compile(code, resource);
+
+  return module.exports;
+}
+
+function loadConfig(context, configPath) {
+  const configPathResolved = configPath
+    ? path.resolve(configPath)
+    : process.cwd();
+
+  return cosmiconfig('postcss')
+    .search(configPathResolved)
+    .then((result) => {
+      if (!result) {
+        throw new Error(`No PostCSS Config found in: ${configPathResolved}`);
+      }
+
+      return processResult(createContext(context), result);
+    });
+}
+
+export { exec, loadConfig };