refactor: support CommonJS require in postcss.config.cjs (#185)

Author: mfranzke

.changeset/lemon-tips-wait.md

@@ -0,0 +1,5 @@
+---
+"postcss-if-function": patch
+---
+
+fix: support CommonJS require in postcss.config.cjs

packages/postcss-if-function/README.md

@@ -56,11 +56,6 @@ npx postcss input.css --output output.css --config postcss.config.js
 ### Basic Programmatic Usage
 
 ```js
-// Named export (recommended)
-import postcss from "postcss";
-import { postcssIfFunction } from "postcss-if-function";
-
-// Or default export (for compatibility)
 import postcss from "postcss";
 import postcssIfFunction from "postcss-if-function";
 
@@ -115,7 +110,7 @@ const result = await postcss([
 
 ```js
 // postcss.config.js
-import { postcssIfFunction } from "postcss-if-function";
+import postcssIfFunction from "postcss-if-function";
 
 export default {
 	plugins: [
@@ -126,14 +121,21 @@ export default {
 };
 ```
 
+```js
+// postcss.config.cjs (CommonJS)
+module.exports = {
+	plugins: [require("postcss-if-function")]
+};
+```
+
 ### With Popular PostCSS Tools
 
 #### Vite
 
 ```js
 // vite.config.js
 import { defineConfig } from "vite";
-import { postcssIfFunction } from "postcss-if-function";
+import postcssIfFunction from "postcss-if-function";
 
 export default defineConfig({
 	css: {

packages/postcss-if-function/demo.js

@@ -1,5 +1,5 @@
 import postcss from 'postcss';
-import { postcssIfFunction } from './src/index.js';
+import postcssIfFunction from './src/index.js';
 
 const css = `
 .example {

packages/postcss-if-function/microbundle.config.js

@@ -1,6 +1,6 @@
 const config = {
 	output: {
-		exports: 'named'
+		exports: 'default'
 	}
 };
 

packages/postcss-if-function/src/index.d.ts

@@ -27,10 +27,10 @@ export type PluginOptions = {
  * @param {PluginOptions} [options={}] - Plugin configuration options
  * @returns {Object} PostCSS plugin
  */
-export function postcssIfFunction(
+declare function postcssIfFunction(
 	options?: PluginOptions
 ): Record<string, unknown>;
-export namespace postcssIfFunction {
+declare namespace postcssIfFunction {
 	const postcss: boolean;
 }
 

packages/postcss-if-function/src/index.js

@@ -119,5 +119,4 @@ function postcssIfFunction(options = {}) {
 
 postcssIfFunction.postcss = true;
 
-export { postcssIfFunction };
 export default postcssIfFunction;

packages/postcss-if-function/test/plugin.test.js

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import postcss from 'postcss';
@@ -7,9 +8,10 @@ import {
 	normalizeCSS,
 	postcssFixtureTests
 } from '../../../test/scripts/fixture-utils.js';
-import { postcssIfFunction } from '../src/index.js';
+import postcssIfFunction from '../src/index.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 const FIXTURES_DIR = path.join(__dirname, '../../../test/fixtures');
 
 describe('postcss-if-function plugin', () => {
@@ -81,4 +83,20 @@ describe('postcss-if-function plugin', () => {
 		// Verify the from option was properly set in the result
 		expect(result.opts.from).toBe(inputPath);
 	});
+
+	it('should support CommonJS require in postcss.config.cjs', async () => {
+		const plugin = require('../dist/index.cjs');
+		const { input, expected } = loadFixture('basic-media');
+
+		// Verify the CJS export is a callable function with the postcss flag
+		expect(typeof plugin).toBe('function');
+		expect(plugin.postcss).toBe(true);
+
+		const result = await postcss([plugin]).process(input, {
+			from: undefined
+		});
+
+		expect(normalizeCSS(result.css)).toBe(normalizeCSS(expected));
+		expect(result.warnings()).toHaveLength(0);
+	});
 });