demo fixes and making Container accept a meta string

Author: ZeeCoder

packages/container-query/.size-limit

@@ -1,10 +1,10 @@
 [
   {
     path: "dist/bundle.cjs.js",
-    limit: "15.16KB"
+    limit: "15.18KB"
   },
   {
     path: "dist/bundle.esm.js",
-    limit: "14.87KB"
+    limit: "14.9KB"
   }
 ]

packages/container-query/src/Container.js

@@ -9,7 +9,6 @@ import containerRegistry from "./containerRegistry";
 import type { ContainerSize, Meta, RegistryData } from "../flow/types";
 import { QUERIES } from "@zeecoder/container-query-meta-builder";
 
-// TODO fix test picking up all sorts of js files
 const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
   if (!Array.isArray(entries)) {
     return;
@@ -65,8 +64,17 @@ export default class Container {
     handleResize?: Function
   };
 
-  constructor(containerElement: HTMLElement, meta: Meta, opts: {} = {}) {
+  constructor(
+    containerElement: HTMLElement,
+    meta: Meta | string,
+    opts: {} = {}
+  ) {
     this.container = containerElement;
+    // Strings are assumed to be JSON meta in quotations, got from css-loader
+    if (typeof meta === "string") {
+      meta = JSON.parse(meta.slice(1, -1));
+    }
+
     this.meta = processMeta(meta);
 
     this.opts = objectAssign(

packages/demos/nested-containers/.babelrc

@@ -1,10 +1,13 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": [">1%"]
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [">1%"]
+        }
       }
-    }],
-    "react"
+    ],
+    "@babel/preset-react"
   ]
 }

packages/demos/nested-containers/package.json

@@ -5,25 +5,31 @@
   "author": "Viktor Hubert <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@zeecoder/container-query": "^2.1.0",
-    "@zeecoder/postcss-container-query": "^2.1.0",
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "core-js": "^2.4.1",
-    "postcss": "^6.0.11",
-    "postcss-loader": "^2.0.6",
-    "postcss-media-minmax": "^3.0.0",
-    "postcss-nested": "^2.1.0",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "webpack": "^3.3.0"
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "@zeecoder/container-query": "^2.7.4",
+    "@zeecoder/postcss-container-query": "^2.7.4",
+    "autoprefixer": "^9.3.1",
+    "babel-loader": "^8.0.4",
+    "core-js": "^2.5.7",
+    "css-loader": "^1.0.1",
+    "http-server": "^0.11.1",
+    "postcss": "^7.0.6",
+    "postcss-loader": "^3.0.0",
+    "postcss-media-minmax": "^4.0.0",
+    "postcss-nested": "^4.1.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2"
   },
-  "dependencies": {
-    "style-loader": "^0.18.2"
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch",
+    "serve": "http-server web"
   },
   "private": true
 }

packages/demos/nested-containers/src/components/SocialContainer/SocialContainer.js

@@ -1,14 +1,12 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import Container from "@zeecoder/container-query";
-
-require("./SocialContainer.pcss");
-const queryStats = require("./SocialContainer.pcss.json");
+import { meta } from "./SocialContainer.pcss";
 
 export default class SocialContainer extends Component {
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this);
-    new Container(element, queryStats);
+    new Container(element, meta);
   }
 
   renderChildren() {

packages/demos/nested-containers/src/components/SocialContainer/SocialContainer.pcss.json

@@ -2,14 +2,12 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import Container from "@zeecoder/container-query";
-
-require("./SocialLink.pcss");
-const queryStats = require("./SocialLink.pcss.json");
+import { meta } from "./SocialLink.pcss";
 
 export default class SocialLink extends Component {
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this);
-    new Container(element, queryStats);
+    new Container(element, meta);
   }
 
   render() {

packages/demos/nested-containers/src/components/SocialLink/SocialLink.js

@@ -4,14 +4,12 @@ import PropTypes from "prop-types";
 import Container from "@zeecoder/container-query";
 import SocialContainer from "../SocialContainer/SocialContainer";
 import SocialLink from "../SocialLink/SocialLink";
-
-require("./User.pcss");
-const queryStats = require("./User.pcss.json");
+import { meta } from "./User.pcss";
 
 export default class User extends Component {
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this);
-    new Container(element, queryStats);
+    new Container(element, meta);
 
     if (!this.props.animate) {
       return;

packages/demos/nested-containers/src/components/SocialLink/SocialLink.pcss.json

@@ -4,11 +4,11 @@ module.exports = {
     path: __dirname + "/web/dist",
     filename: "main.js"
   },
+  mode: "production",
   module: {
     rules: [
       {
         test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
         use: {
           loader: "babel-loader"
         }
@@ -17,6 +17,7 @@ module.exports = {
         test: /\.pcss$/,
         use: [
           "style-loader",
+          "css-loader",
           {
             loader: "postcss-loader",
             options: {