Cleanup

Author: ZeeCoder

README.md

@@ -5,38 +5,37 @@
 [![Code Climate](https://codeclimate.com/github/ZeeCoder/container-query/badges/gpa.svg)](https://codeclimate.com/github/ZeeCoder/container-query)
 [![Coverage Status](https://coveralls.io/repos/github/ZeeCoder/container-query/badge.svg?branch=master)](https://coveralls.io/github/ZeeCoder/container-query?branch=master)
 
-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.
-
-# Milestones
-
-## 1.0.0
-- Short description, also in package.json
-- Documented solutions for SASS / LESS and just PostCSS
-- Turn all milestone notes in the README to github issues and write a proper README
-
-## 1.1.0
-- introduce vmin/vmax-like functionality
-- Optionally detect container resizing (polling solution?) instead of adjusting on window resize only
-
-## 1.2.0
-- Support "or" in queries
-
-## 1.3.0
-- Allow for nested @container queries, like it's with @media queries in other preprocessors
-
-## 1.4.0
-- Ease usage with React, by hooking into Component refs
-- Webpack loader
-- compatibility with CSS-modules
-
-# README notes
-
-- Example function to save all container configurations in separate JSON files in a dir
-- lib/* is not considered to be a part of the public API, and hence breaking
-change can be introduced in any release. (even patch)
-- a container can have more than one instance of its elements
-- the container units are relative to the container's "inner" height / width, so without the borders.
+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.
+
+## PublicAPI
+- `Container.js` - JS Runtime
+- `containerQuery.js` - PostCSS Plugin
+- `initialiseAllContainers.js` - helper function
+
+The rest is not considered to be a part of the Public API, which means they can
+change at any time. (Including minor / patch releases.)
+
+## Limitations
+- No "or" for @container queries right now, so this is not possible:
+`@container ( ... ) or ( ... ) { ... }`
+- `@container` queries cannot be nested
+- LESS doesn't compile with the current syntax
+
+## Notes
+- BEM-inspiration: Block -> inside of which are elements (unique classnames!)
+- @container queries must always be preceded by a @define-container
+- All @containers following a @defined-container will be related to that
 - @define-container declarations will be ignored inside @container declarations
+- Example function to save all container configurations in separate JSON files in a dir
+- Gulp example
+    - PostCSS example
+    - SASS example
+    - Less -> no-go
+- Containers can have more than one instance of their elements
+- The container units are relative to the container's "inner" height / width.
+(Without the borders.)
 - Note possible circular issues
-    - A container cannot use container units for properties that would affect
-    its width / height.
+    - A container should not use container units for properties that would affect
+    its width / height. These situations are not currently handled, so try to
+    avoid them.

demo/containers.css

@@ -141,3 +141,9 @@
         background: #999;
     }
 }
+
+.asd {
+    @define-container;
+
+    font-size: 100chpx;
+}

demo/containers.css.json

@@ -0,0 +1 @@
+{"selector":".asd","queries":[{"elements":[{"selector":".asd","styles":{"fontSize":"100chpx"}}]}]}

demo/containers/asd.json

@@ -0,0 +1 @@
+{"selector":".user","queries":[{"elements":[{"selector":".user","styles":{"border":"calc(1chpx + 1cwpx) solid","background":""}},{"selector":".user__tag","styles":{"height":"1ch%","width":"5cw%"}},{"selector":".user__line1","styles":{"height":"100chpx","flexDirection":""}},{"selector":".user__image-wrapper","styles":{"flex":"","height":""}},{"selector":".user__image","styles":{"border":"calc(1chpx + 1cwpx / 5) solid #ccc","maxWidth":"","maxHeight":""}},{"selector":".user__name","styles":{"fontSize":"calc(4chpx + 4cwpx)","display":"","margin":"","lineHeight":"","flex":"","textAlign":""}}]},{"conditions":[["width",">=","250"],["height",">=","250"]],"elements":[{"selector":".user__image-wrapper","styles":{"flex":"0 0 40%","height":"auto"}},{"selector":".user__image","styles":{"maxWidth":"100%","maxHeight":"100ch"}},{"selector":".user__name","styles":{"display":"block"}}]},{"conditions":[["orientation",":","landscape"]],"elements":[{"selector":".user__name","styles":{"margin":"0 5cwpx","lineHeight":"100chpx"}}]},{"conditions":[["orientation",":","portrait"]],"elements":[{"selector":".user__line1","styles":{"flexDirection":"column","height":"100chpx"}},{"selector":".user__image-wrapper","styles":{"flex":"1 0 0"}},{"selector":".user__image","styles":{"maxHeight":"75chpx"}},{"selector":".user__name","styles":{"flex":"0 0 20chpx","lineHeight":"20chpx","textAlign":"center"}}]},{"conditions":[["width",">","300"]],"elements":[{"selector":".user","styles":{"background":"#ccc"}}]},{"conditions":[["width",">","400"]],"elements":[{"selector":".user","styles":{"background":"#bbb"}}]},{"conditions":[["width",">","500"]],"elements":[{"selector":".user","styles":{"background":"#aaa"}}]},{"conditions":[["width",">","600"]],"elements":[{"selector":".user","styles":{"background":"#999"}}]},{"conditions":[["width",">","700"]],"elements":[{"selector":".user","styles":{"background":"#888"}}]},{"conditions":[["width",">","800"]],"elements":[{"selector":".user","styles":{"background":"#999"}}]}]}

demo/containers/user.json

@@ -1,16 +1,29 @@
+'use strict';
+
 const gulp = require('gulp');
 const fs = require('fs');
 const path = require('path');
 const nested = require('postcss-nested');
 const containerQuery = require('../containerQuery');
+const writeFileSync = require('fs').writeFileSync;
+const camelCase = require('lodash.camelCase');
 
 gulp.task('css', function () {
     const postcss = require('gulp-postcss');
 
     return gulp.src('containers.css')
         .pipe(postcss([
             nested(),
-            containerQuery(),
+            containerQuery({
+                getJSON: (cssPath, containers) => {
+                    for (let containerSelector in containers) {
+                        writeFileSync(
+                            `${__dirname}/containers/${ camelCase(containerSelector) }.json`,
+                            JSON.stringify(containers[containerSelector])
+                        );
+                    }
+                }
+            }),
         ]))
         .pipe( gulp.dest('dist') );
 });

demo/gulpfile.js

@@ -10,7 +10,7 @@
 <body>
 
 
-    <div class="user">
+    <div class="user" id="user">
         <div class="user__tag">tag</div>
         <div class="user__line1">
             <div class="user__image-wrapper">

demo/index.html

@@ -4,7 +4,9 @@
   "description": "",
   "author": "Viktor Hubert <[email protected]>",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "lodash.camelcase": "^4.3.0"
+  },
   "devDependencies": {
     "babel-core": "^6.23.1",
     "babel-loader": "^6.3.2",
@@ -13,5 +15,8 @@
     "postcss": "^5.2.13",
     "postcss-nested": "^1.0.0",
     "webpack": "^2.2.1"
+  },
+  "scripts": {
+    "build": "gulp css && webpack"
   }
 }

demo/package.json

@@ -1,5 +1,17 @@
-import initialiseAllContainers from '../initialiseAllContainers';
+import Container from '../Container';
 
-const containers = require('./containers.css.json');
+const userJSON = require('./containers/user.json');
 
-initialiseAllContainers(containers);
+const userContainer = new Container(
+    document.getElementById('user'),
+    userJSON
+);
+
+window.addEventListener('resize', userContainer.adjust);
+
+
+// import initialiseAllContainers from '../initialiseAllContainers';
+
+// const containers = require('./containers.css.json');
+
+// initialiseAllContainers(containers);