Made the postcss plugin only process the right nodes

Fixes #22

Author: ZeeCoder

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 1.2.5 (2017-03-25)
+
+- Fixed a bug where the postcss plugin processed nodes it shouldn't have
+
 ## 1.2.4 (2017-03-20)
 
 - Fixed a bug where initialiseAllContainers didn't trigger adjust calls on dom

__mocks__/Node.js

@@ -1,29 +1,35 @@
 /**
  * @class
  * @property {string} selector
+ * @property {string} params
  * @property {string} name
  * @property {string} type
  * @property {string} prop
  * @property {string} value
  * @property {Node[]} nodes
+ * @property {Node} parent
  */
 export default class Node {
     /**
      * @param {{
      *   [selector]: string,
+     *   [params]: string,
      *   [name]: string,
      *   [type]: string,
      *   [prop]: string,
      *   [value]: string,
+     *   [parent]: { type: string },
      * }} props
      */
     constructor (props) {
         this.nodes = [];
         this.selector = props.selector;
+        this.params = props.params;
         this.name = props.name;
         this.type = props.type;
         this.prop = props.prop;
         this.value = props.value;
+        this.parent = props.parent;
     }
 
     /**
@@ -32,6 +38,8 @@ export default class Node {
      * @returns {Node}
      */
     addNode (node) {
+        node.parent = this;
+
         this.nodes.push(node);
 
         return this;
@@ -40,4 +48,8 @@ export default class Node {
     error (message) {
         throw new Error(message);
     }
+
+    remove () {
+        // ...
+    }
 }

__mocks__/Root.js

@@ -4,11 +4,16 @@
  */
 export default class Root {
     /**
-     * @param {Object} source
+     * @param {Object} [source]
      */
     constructor (source) {
+        this.type = 'root';
         this.nodes = [];
-        this.source = source;
+        this.source = {
+            input: {
+                file: 'non/existent/file/path.css',
+            },
+        };
     }
 
     /**
@@ -17,6 +22,8 @@ export default class Root {
      * @returns {Node}
      */
     addNode (node) {
+        node.parent = this;
+
         this.nodes.push(node);
 
         return this;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeecoder/container-query",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
   "main": "index.js",
   "author": "Viktor Hubert <[email protected]>",

src/postcss/containerQuery.js

@@ -16,13 +16,28 @@ function addStylesToDefaultQuery (defaultElementRef, styles, keepValues = false)
     }
 }
 
+/**
+ * Process only rules having "root", @media or @container as the parent.
+ *
+ * @param {Node} node
+ */
+function shouldProcessNode (node) {
+    return (
+        node.parent.type === 'root' ||
+        (
+            node.parent.type === 'atrule' &&
+            [ 'container', 'media' ].indexOf(node.parent.name) !== -1
+        )
+    );
+}
+
 /**
  * @param {{ getJSON: function }} options
  */
 function containerQuery (options = {}) {
     const getJSON = options.getJSON || saveJSON;
 
-    return function (css) {
+    return function (root) {
         let containers = {};
         let currentContainerSelector = null;
         let currentDefaultQuery = null;
@@ -59,7 +74,11 @@ function containerQuery (options = {}) {
             currentContainerSelector = newContainer;
         }
 
-        css.walk((/** Node */ node) => {
+        root.walk((/** Node */ node) => {
+            if (!shouldProcessNode(node)) {
+                return;
+            }
+
             if (node.type === 'rule') {
                 // Check if there's a new container declared in the rule node
                 const newContainer = detectContainerDefinition(node);
@@ -123,7 +142,7 @@ function containerQuery (options = {}) {
 
         flushCurrentContainerData();
 
-        getJSON(css.source.input.file, containers);
+        getJSON(root.source.input.file, containers);
     };
 
 }

src/postcss/containerQuery.spec.js

@@ -16,19 +16,13 @@ test('should use the default json saving function if none was supplied', () => {
 
     const pluginInstance = containerQuery();
 
-    pluginInstance(
-        (new Root({
-            input: {
-                file: 'file/path.css'
-            }
-        }))
-    );
+    pluginInstance(new Root());
 
     expect(saveJSON).toHaveBeenCalledTimes(1);
 });
 
 test('missing container declaration', () => {
-    const pluginInstance = containerQuery({ getJson: () => {} });
+    const pluginInstance = containerQuery();
 
     expect(() => {
         pluginInstance(
@@ -44,21 +38,112 @@ test('missing container declaration', () => {
     }).toThrowError(new RegExp(`^A @container query was found, without a preceding @${DEFINE_CONTAINER_NAME} declaration.$`));
 });
 
-test('A container should not be able to ', () => {
-    const pluginInstance = containerQuery({ getJson: () => {} });
+test('should ignore unrecognised at-rules, like @keyframes', (done) => {
+    const pluginInstance = containerQuery({
+        getJSON: (path, json) => {
+            expect(json).toEqual({
+                '.container': {
+                    selector: '.container',
+                    queries: [
+                        {
+                            elements: [
+                                {
+                                    selector: '.container',
+                                    styles: { fontSize: '', lineHeight: `100${HEIGHT_UNIT}px` },
+                                },
+                            ],
+                        },
+                        {
+                            conditions: [ [ [ 'orientation', ':', 'landscape' ] ] ],
+                            elements: [
+                                {
+                                    selector: '.container',
+                                    styles: { fontSize: '24px' },
+                                }
+                            ],
+                        },
+                    ],
+                },
+            });
+            done();
+        },
+    });
 
-    expect(() => {
-        pluginInstance(
-            (new Root())
-                .addNode(
-                    new Node({
+    pluginInstance(
+        (new Root())
+            .addNode(
+                new Node({
+                    type: 'rule',
+                    selector: '.container',
+                })
+                    .addNode(new Node({
+                        type: 'decl',
+                        prop: 'line-height',
+                        value: `100${HEIGHT_UNIT}px`,
+                    }))
+                    .addNode(new Node({
+                        type: 'decl',
+                        prop: 'font-size',
+                        value: '42px',
+                    }))
+                    .addNode(new Node({
                         type: 'atrule',
-                        name: 'container',
-                        params: '(orientation: landscape)',
-                    })
-                )
-        )
-    }).toThrowError(new RegExp(`^A @container query was found, without a preceding @${DEFINE_CONTAINER_NAME} declaration.$`));
+                        name: DEFINE_CONTAINER_NAME,
+                    }))
+                    .addNode(new Node({
+                        type: 'decl',
+                        prop: 'border',
+                        value: 'none',
+                    }))
+            )
+            .addNode(
+                new Node({
+                    type: 'atrule',
+                    name: 'keyframes',
+                    params: 'Expand',
+                })
+                    .addNode(
+                        new Node({
+                            type: 'rule',
+                            selector: '0%',
+                        })
+                            .addNode(new Node({
+                                type: 'decl',
+                                prop: 'opacity',
+                                value: '0%',
+                            }))
+                    )
+                    .addNode(
+                        new Node({
+                            type: 'rule',
+                            selector: '100%',
+                        })
+                            .addNode(new Node({
+                                type: 'decl',
+                                prop: 'opacity',
+                                value: '100%',
+                            }))
+                    )
+            )
+            .addNode(
+                new Node({
+                    type: 'atrule',
+                    name: 'container',
+                    params: '(orientation: landscape)',
+                })
+                    .addNode(
+                        new Node({
+                            type: 'rule',
+                            selector: '.container',
+                        })
+                            .addNode({
+                                type: 'decl',
+                                prop: 'font-size',
+                                value: '24px',
+                            })
+                    )
+            )
+    );
 });
 
 test('proper json and css output', () => {