fix(postcss-atomizer): register file dependency to re-run atomizer on changes (#651)

Author: redonkulus

.changeset/long-emus-sit.md

@@ -0,0 +1,5 @@
+---
+"postcss-atomizer": patch
+---
+
+fix(postcss-atomizer): register file dependency to re-run atomizer on changes

docs/integrations/nextjs.md

@@ -31,6 +31,9 @@ module.exports = {
     content: [
         './components/**/*.{js,ts,jsx,tsx}',
         './pages/**/*.{js,ts,jsx,tsx}',
+
+        // Or if using `src` directory:
+        './src/**/*.{js,ts,jsx,tsx}'
     ],
 }
 ```
@@ -43,26 +46,18 @@ After following their guide, you will add the Atomizer PostCSS plugin like so.
 
 ```js
 module.exports = {
-    plugins: {
-        'postcss-atomizer': {},
-        // ...
-    },
+    plugins: [
+        // mandatory next.js plugins ...
+        'postcss-atomizer',
+    ],
 }
 ```
 
 <p class="noteBox info">Plugin options are available in the <a href="https://github.com/acss-io/atomizer/tree/main/packages/postcss-atomizer">postcss-atomizer</a> README.</p>
 
-## Start your build process
-
-Run your build setup as configured in your project's `package.json`.
-
-```shell
-npm run dev
-```
-
 ## Begin using Atomizer
 
-Update the `pages/index.js` file to start adding Atomizer classes to your code base.
+Update the `src/app/page.js` file to start adding Atomizer classes to your code base.
 
 ```js
 export default function Home() {
@@ -71,3 +66,11 @@ export default function Home() {
     )
 }
 ```
+
+## Start your build process
+
+Run your build setup as configured in your project's `package.json`.
+
+```shell
+npm run dev
+```

packages/postcss-atomizer/src/index.js

@@ -1,4 +1,5 @@
 const { buildAtomicCss, getConfig, findFiles } = require('atomizer/src/build.js');
+const { resolve } = require('path');
 
 /**
  * @type {import('postcss').PluginCreator}
@@ -8,11 +9,23 @@ module.exports = (options = {}) => {
         quiet: true,
         ...options,
     };
-    const config = getConfig(finalOptions.config);
-    const files = findFiles(config.content);
     return {
         postcssPlugin: 'postcss-atomizer',
-        Root(root) {
+        Root(root, { result }) {
+            const config = getConfig(finalOptions.config);
+            const files = findFiles(config.content);
+
+            // register dependency so atomizer is re-run when the file changes
+            // @see https://postcss.org/docs/writing-a-postcss-plugin#step-change-nodes
+            for (const file of files) {
+                result.messages.push({
+                    file: resolve(file),
+                    parent: result.opts.from,
+                    plugin: 'atomizer',
+                    type: 'dependency',
+                });
+            }
+
             root.append(buildAtomicCss(files, config, finalOptions));
         },
     };