fix(postcss-atomizer): Avoid duplicate CSS (#970)

Author: carystanley

.changeset/metal-flies-look.md

@@ -0,0 +1,5 @@
+---
+"postcss-atomizer": major
+---
+
+fix: postcss atomizer to avoid duplicate CSS

docs/integrations/nextjs.md

@@ -55,6 +55,22 @@ module.exports = {
 
 <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>
 
+## Create the atomizer css file
+
+```css
+/* atomizer.css */
+@atomizer;
+```
+
+## Reference the atomizer.css from your Layout
+
+Update the `./src/app/layout.js` to use the Atomizer css
+
+```js
+import './atomizer.css';
+// ...
+```
+
 ## Begin using Atomizer
 
 Update the `./src/app/page.js` file to start adding Atomizer classes to your code base.

docs/integrations/postcss.md

@@ -30,6 +30,13 @@ module.exports = {
 
 <p class="noteBox info">Option information and an example is available in the <a href="https://github.com/acss-io/atomizer/tree/main/packages/postcss-atomizer">postcss-atomizer</a> repository.</p>
 
+## Add Atomizer to your main.css file
+
+```css
+/* main.css */
+@atomizer;
+```
+
 ## Start your dev setup
 
 Run your build setup as configured in your project's `./package.json`.

packages/postcss-atomizer/README.md

@@ -23,6 +23,13 @@ module.exports = {
 };
 ```
 
+Create a css file for the generated atomizer CSS:
+
+```css
+/* atomizer.css */
+@atomizer;
+```
+
 The plugin will automatically execute Atomizer based on your project's [`atomizer.config.js`](https://acss-io.github.io/atomizer/configuration.html) file and pass the rendered CSS to any additional plugins you configure.
 
 ### Options

packages/postcss-atomizer/example/__tests__/postcss.test.js

@@ -4,7 +4,7 @@ const { join } = require('path');
 
 describe('postcss', () => {
     it('should create post css', async () => {
-        const input = '/* dummy test */';
+        const input = '/* dummy test */@atomizer';
         const output = '';
         const atomizer = atomizerPlugin({
             config: join(__dirname, '..', 'atomizer.config.js'),

packages/postcss-atomizer/example/main.css

@@ -1 +1,2 @@
 /* Stub css file for postcss */
+@atomizer;

packages/postcss-atomizer/src/index.js

@@ -12,21 +12,23 @@ module.exports = (options = {}) => {
     return {
         postcssPlugin: 'postcss-atomizer',
         Root(root, { result }) {
-            const config = getConfig(finalOptions.config);
-            const files = findFiles(config.content);
+            root.walkAtRules('atomizer', (atRule) => {
+                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',
-                });
-            }
+                // 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));
+                atRule.replaceWith(buildAtomicCss(files, config, finalOptions));
+            });
         },
     };
 };