Restructured the demo

demo/.gitignore

@@ -1 +1 @@
-dist
+web/dist

demo/gulpfile.js

@@ -3,29 +3,32 @@
 const gulp = require('gulp');
 const fs = require('fs');
 const path = require('path');
+const postcss = require('gulp-postcss');
+const rename = require('gulp-rename');
 const nested = require('postcss-nested');
+const postcssImport = require('postcss-import');
 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')
+    return gulp.src('src/css/main.pcss')
         .pipe(postcss([
             nested(),
+            postcssImport(),
             containerQuery({
                 getJSON: (cssPath, containers) => {
                     for (let containerSelector in containers) {
+                        let component = containerSelector.substr(1);
                         writeFileSync(
-                            `${__dirname}/containers/${ camelCase(containerSelector) }.json`,
+                            `${__dirname}/src/css/components/${component}/${component}.json`,
                             JSON.stringify(containers[containerSelector])
                         );
                     }
                 }
             }),
         ]))
-        .pipe( gulp.dest('dist') );
+        .pipe( rename('main.css') )
+        .pipe( gulp.dest('web/dist') );
 });
 
 gulp.task('watch', function() {

demo/package.json

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

demo/src/css/components/user/user.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.css → demo/src/css/components/user/user.pcss

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

demo/src/css/main.pcss

@@ -0,0 +1,2 @@
+@import 'components/user/user.pcss';
+@import 'components/social-link/social-link.pcss';

demo/scripts.js → demo/src/js/main.js

@@ -1,6 +1,6 @@
-import Container from '../Container';
+import Container from '../../../Container';
 
-const userJSON = require('./containers/user.json');
+const userJSON = require('../css/components/user/user.json');
 
 const userContainer = new Container(
     document.getElementById('user'),

demo/index.html → demo/web/index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <title>Document</title>
 
-    <link rel="stylesheet" href="dist/styles.css">
-    <link rel="stylesheet" href="dist/containers.css">
+    <link rel="stylesheet" href="dist/main.css">
 </head>
 <body>
 
@@ -21,7 +20,7 @@ <h1 class="user__name">Viktor Hubert</h1>
     </div>
 
 
-    <script src="dist/scripts.dist.js"></script>
+    <script src="dist/main.js"></script>
 
 </body>
 </html>