feat: partial compatibility with postcss-cli (#498)

Author: evilebottnawi

README.md

@@ -400,6 +400,8 @@ module.exports = (api) => {
   // `api.file` - path to the file
   // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
   // `api.webpackLoaderContext` - loader context for complex use cases
+  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
+  // `api.options` - the `postcssOptions` options
 
   if (/\.sss$/.test(api.file)) {
     return {

src/index.js

@@ -50,7 +50,11 @@ export default async function loader(content, sourceMap, meta) {
 
   if (configOption) {
     try {
-      loadedConfig = await loadConfig(this, configOption);
+      loadedConfig = await loadConfig(
+        this,
+        configOption,
+        options.postcssOptions
+      );
     } catch (error) {
       callback(error);
 

src/utils.js

@@ -31,7 +31,7 @@ function exec(code, loaderContext) {
   return module.exports;
 }
 
-async function loadConfig(loaderContext, config) {
+async function loadConfig(loaderContext, config, postcssOptions) {
   const searchPath =
     typeof config === 'string'
       ? path.resolve(config)
@@ -75,6 +75,9 @@ async function loadConfig(loaderContext, config) {
       file: loaderContext.resourcePath,
       // For complex use
       webpackLoaderContext: loaderContext,
+      // Partial compatibility with `postcss-cli`
+      env: loaderContext.mode,
+      options: postcssOptions || {},
     };
 
     result.config = result.config(api);

test/__snapshots__/postcssOptins.test.js.snap

@@ -213,6 +213,59 @@ exports[`"postcssOptions" option should work "Function" value: errors 1`] = `Arr
 
 exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `Array []`;
 
+exports[`"postcssOptions" option should work and provide API for the configuration: css 1`] = `
+"a {
+  color: black;
+}
+
+a {
+  color: red;
+}
+
+a {
+  color: green;
+}
+
+a {
+  color: blue;
+}
+
+.class {
+  border-top-color: blue;
+  border-right-color: blue;
+  border-left-color: blue;
+  background-color: #fafafa;
+}
+
+.class-foo {
+  -z-border-color: blue blue *;
+  -z-color: * #fafafa;
+}
+
+.phone {
+  &_title {
+    width: 500px;
+
+    @media (max-width: 500px) {
+      width: auto;
+    }
+
+    body.is_dark & {
+      color: white;
+    }
+  }
+
+  img {
+    display: block;
+  }
+}
+"
+`;
+
+exports[`"postcssOptions" option should work and provide API for the configuration: errors 1`] = `Array []`;
+
+exports[`"postcssOptions" option should work and provide API for the configuration: warnings 1`] = `Array []`;
+
 exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): css 1`] = `
 "a {
   color: black;

test/fixtures/config-scope/api/postcss.config.js

@@ -0,0 +1,25 @@
+module.exports = function (api) {
+  if (!api.mode) {
+    throw new Error(`Failed, no ${api.mode} API`);
+  }
+
+  if (!api.file) {
+    throw new Error(`Failed, no ${api.file} API`);
+  }
+
+  if (!api.webpackLoaderContext) {
+    throw new Error(`Failed, no ${api.webpackLoaderContext} API`);
+  }
+
+  if (!api.env) {
+    throw new Error(`Failed, no ${api.env} API`);
+  }
+
+  if (!api.options) {
+    throw new Error(`Failed, no ${api.options} API`);
+  }
+  
+  return {
+    plugins: [['postcss-short', { prefix: 'x' }]],
+  }
+};

test/postcssOptins.test.js

@@ -776,4 +776,22 @@ describe('"postcssOptions" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should work and provide API for the configuration', async () => {
+    const compiler = getCompiler('./css/index.js', {
+      postcssOptions: {
+        config: path.resolve(
+          __dirname,
+          './fixtures/config-scope/api/postcss.config.js'
+        ),
+      },
+    });
+    const stats = await compile(compiler);
+
+    const codeFromBundle = getCodeFromBundle('style.css', stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });