From 888b9a0269b68a6991b8e57c7092d77d2166c34c Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Dec 2024 12:03:43 -0500
Subject: [PATCH] document ESM only PostCSS config and ecosystem guides

---
 src/pages/docs/plugins/postcss.md       | 17 ++++-------------
 src/pages/guides/ecosystem/storybook.md | 20 ++++++++++++++++++++
 src/pages/guides/ecosystem/tailwind.md  | 12 ++----------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/pages/docs/plugins/postcss.md b/src/pages/docs/plugins/postcss.md
index ed2d986a..6337232f 100644
--- a/src/pages/docs/plugins/postcss.md
+++ b/src/pages/docs/plugins/postcss.md
@@ -24,7 +24,7 @@ yarn add @greenwood/plugin-postcss --dev
 
 Then add this plugin to your _greenwood.config.js_.
 
-```javascript
+```js
 import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss";
 
 export default {
@@ -34,25 +34,14 @@ export default {
 };
 ```
 
-To use your own PostCSS configuration, you'll need to create _two (2)_ config files in the root of your project, by which you can provide your own custom plugins / settings that you've installed.
-
-- _postcss.config.js_
-- _postcss.config.mjs_
+To use your own PostCSS configuration, just create a _postcss.config.js_ file at the root of your project, by which you can provide your own custom plugins / settings that you've installed.
 
 ```js
-// postcss.config.mjs
 export default {
   plugins: [(await import("autoprefixer")).default],
 };
 ```
 
-```js
-// postcss.config.js
-module.exports = {
-  plugins: [require("autoprefixer")],
-};
-```
-
 ## Usage
 
 Now you can write the CSS and see the results of the plugin in the generated styles
@@ -66,6 +55,7 @@ Now you can write the CSS and see the results of the plugin in the generated sty
 .image {
   background-image: url(image@1x.png);
 }
+
 @media (min-resolution: 2dppx) {
   .image {
     background-image: url(image@2x.png);
@@ -86,6 +76,7 @@ Now you can write the CSS and see the results of the plugin in the generated sty
 .image {
   background-image: url(image@1x.png);
 }
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
   .image {
     background-image: url(image@2x.png);
diff --git a/src/pages/guides/ecosystem/storybook.md b/src/pages/guides/ecosystem/storybook.md
index ddb8ad4a..e26d6ba1 100644
--- a/src/pages/guides/ecosystem/storybook.md
+++ b/src/pages/guides/ecosystem/storybook.md
@@ -86,6 +86,26 @@ const config = {
 export default config;
 ```
 
+## PostCSS
+
+If you are using Greenwood's [PostCSS plugin](/docs/plugins/postcss/), you'll need to create a secondary CommonJS compatible configuration file for Storybook.
+
+So if your current _postcss.config.js_ looks like this:
+
+```js
+export default {
+  plugins: [(await import("tailwindcss")).default, (await import("autoprefixer")).default],
+};
+```
+
+You'll want to create a _.postcssrc.js_ file using CJS syntax:
+
+```js
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+};
+```
+
 ## Import Attributes
 
 As [Vite does not support Import Attributes](https://github.com/vitejs/vite/issues/14674), we will need to create a _vite.config.js_ and write a [custom plugin](https://vitejs.dev/guide/api-plugin) to work around this.
diff --git a/src/pages/guides/ecosystem/tailwind.md b/src/pages/guides/ecosystem/tailwind.md
index b156bfc4..7881079e 100644
--- a/src/pages/guides/ecosystem/tailwind.md
+++ b/src/pages/guides/ecosystem/tailwind.md
@@ -26,18 +26,10 @@ As Tailwind is a PostCSS plugin, you'll need to take a couple of extra steps to
    npx tailwindcss init
    ```
 
-1. Create _**two**_ PostCSS configuration files (two files are needed in Greenwood to support ESM / CJS interop)
+1. Create a [PostCSS configuration file](/docs/plugins/postcss/#installation) in the root of your project with needed Tailwind plugins
 
    ```js
-   // postcss.config.cjs (CJS)
-   module.exports = {
-     plugins: {
-       tailwindcss: {},
-       autoprefixer: {},
-     },
-   };
-
-   // postcss.config.mjs (ESM)
+   // postcss.config.js
    export default {
      plugins: [(await import("tailwindcss")).default, (await import("autoprefixer")).default],
    };