Making the transpiler produce plain JavaScript without mentionning CS…

…SX client-side library #2

README.md

@@ -15,48 +15,37 @@ function setStyles (fontSize, margin) {
   </style>
 }
 
-var sheet = <style></style>;
+var sheet = cssx();
 sheet.add(setStyles(20, 6));
-sheet.add(
-  <style>
-    p > a {
-      text-decoration: none;
-      color: #F00;
-    }
-  </style>
-);
-
+sheet.add(<style>
+  p > a {
+    text-decoration: none;
+    color: #F00;
+  }
+</style>);
 ```
 
 The code above is transpiled into valid JavaScript that uses the [CSSX client-side library](./packages/cssx):
 
 ```js
-function setStyles(fontSize, margin) {
-  return (function () {
-    var _3 = {};
-    _3['margin'] = margin + "px";
-    _3['line-height'] = fontSize * 1.2 + "px";
-    _3['font-size'] = fontSize + "px";
-    var _2 = [];
-
-    _2.push(['body', _3]);
-
-    return _2;
-  }.apply(this));
+function setStyles (fontSize, margin) {
+  return <style>
+    body {
+      font-size: {{ fontSize }}px;
+      line-height: {{ fontSize * 1.2 }}px;
+      margin: {{ margin }}px;
+    }
+  </style>
 }
 
 var sheet = cssx();
 sheet.add(setStyles(20, 6));
-sheet.add((function () {
-  var _6 = {};
-  _6['color'] = '#F00';
-  _6['text-decoration'] = 'none';
-  var _5 = [];
-
-  _5.push(['p > a', _6]);
-
-  return _5;
-}.apply(this)));
+sheet.add(<style>
+  p > a {
+    text-decoration: none;
+    color: #F00;
+  }
+</style>);
 ```
 
 And it results in the following CSS:
@@ -155,9 +144,3 @@ npm run make
 npm i
 npm run dev
 ```
-
-## Releasing a new version
-
-```
-npm run release
-```

docs/cssx-lang.md

@@ -3,41 +3,41 @@
 CSSX is not a new language. It's still the CSS that we know and use every day. The difference is that we write it inside a JavaScript context. That's possible because we now have an access to [CSSX transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). It understand and successfully transforms expressions like this:
 
 ```js
-var sheet = <style>
+sheet.add(<style>
   body {
     margin: 0;
     padding: 0;
   }
-</style>;
+</style>);
 ```
 
-The `<style>` tag (in this format) returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object which we use to manage our styles. For example, to append a new CSS rule for all paragraphs on our page we can use the `add` method:
+The `<style>` tag returns a plain JavaScript array which we use together with [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) to manage our styles. For example, to append a new CSS rule for all paragraphs on our page we can use the following:
 
 ```js
-sheet.add(
-  'p', 
-  <style>{
+sheet.add(<style>
+  p {
     font-size: 1em;
     line-height: 1.2em;
-  }</style>
-);
+  }
+</style>);
 ```
 
 ## Language expressions
 
 #### `<style>selector { styles } ...</style>`
 
-It returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object.
+It returns an array.
 
 Example:
 
 ```js
-var sheet = <style>
+var sheet = cssx('id');
+sheet.add(<style>
   body {
     margin: 0;
     padding: 0;
   }
-</style>;
+</style>);
 ```
 
 Same as:
@@ -74,46 +74,20 @@ var styles = {
 };
 ```
 
-#### CSSX as a value of object literal's property
-
-Sometimes you don't want to create a new stylesheet but still define multiple styles. If we pass `<style>` expression to an object property we get a function that fires the creation of our stylesheet. For example:
-
-```js
-var obj = {
-  styles: <style>
-    body {
-      color: {{ this.color }};
-      margin: 0;
-      padding: 0;
-    }
-  </style>,
-  color: '#ff2244'
-};
-```
-
-As it is this code is doing nothing. However if we run `obj.styles()` we'll get a new stylesheet that results to the following css:
-
-```css
-body {
-  padding: 0;
-  margin: 0;
-  color: #ff2244;
-}
-```
-
 ## Using JavaScript
 
-The biggest benefit of CSSX is the fact that it's written in JavaScript context. So it has an access to all the data in the current scope.
+We are writing CSSX in JavaScript context. So it has an access to all the data in the current scope.
 
 ```js
 var property = 'size';
 var value = 18;
+var sheet = cssx();
 
-<style>
+sheet.add(<style>
   body {
     font-{{ property }}: {{ value + 2 }}px;
   }
-</style>
+</style>);
 ```
 
 There are three ways to define dynamic expressions:
@@ -127,17 +101,17 @@ The transpiler converts the string inside the expression to a valid JavaScript.
 ```js
 var property = 'size';
 var value = 18;
+var sheet = cssx();
 
-(function () {
-  var _2 = {};
-  _2["font-" + property] = value + 2 + "px";
+sheet.add((function () {
+  var _3 = {};
+  _3["font-" + property] = value + 2 + "px";
+  var _2 = [];
 
-  var _1 = cssx('_1');
+  _2.push(['body', _3]);
 
-  _1.add('body', _2);
-
-  return _1;
-}.apply(this));
+  return _2;
+}.apply(this)));
 ```
 
 And the produced CSS:
@@ -189,6 +163,8 @@ Where
 
 *There is only one case where CSSX library generates prefixes automatically and that's when we use `@keyframes`.*
 
+*Check out the [plugin](./plugins.md) docs to see how to youse CSSX together with PostCSS*.
+
 ## Where to go from here
 
 Check out [CSSX client-side](https://github.com/krasimir/cssx/tree/master/packages/cssx) library or learn how to use the [transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler).

docs/plugins.md

@@ -1,6 +1,6 @@
 # CSSX plugins
 
-[CSSX client-side library](https://github.com/krasimir/cssx/tree/master/packages/cssx) accepts plugins in the form of JavaScript functions. Every function accepts a raw JavaScript literal and should return such one. For example:
+[CSSX client-side library](https://github.com/krasimir/cssx/tree/master/packages/cssx) accepts plugins in the form of JavaScript functions. Every function accepts a raw JavaScript literal and should return the same. For example:
 
 ```js
 // defining the plugin
@@ -13,10 +13,10 @@ var plugin = function (styles) {
 }
 
 // registering the plugin in CSSX library
-cssx.plugins([plugin]);
+cssx.plugins([ plugin ]);
 
 // creating a new stylesheet
-var sheet = <style></style>;
+var sheet = cssx();
 
 // adding a rule
 sheet.add(<style>
@@ -35,7 +35,7 @@ body {
 }
 ```
 
-*If you want to try it go to the [CSSX repl](http://krasimir.github.io/cssx/playground/try-it-out/) and paste the example code in the right side of the screen.*
+*Try it out by visiting [CSSX repl](http://krasimir.github.io/cssx/playground/try-it-out/). Paste the example code above onto the left side of the screen.*
 
 ## Available plugins
 
@@ -62,13 +62,14 @@ var plugin = function (styles) {
 // registering the CSSX plugin
 cssx.plugins([ plugin ]);
 
-// creating a simple stylesheet
-var sheet = <style>
+// creating a simple stylesheet and adding a rule
+var sheet = cssx();
+sheet.add(<style>
   body {
     color: gray(85);
     display: flex;
   }
-</style>;
+</style>);
 ```
 
 The result is a `<style>` tag injected into the page:

packages/cssx-transpiler/README.md

@@ -1,6 +1,6 @@
 # CSSX-Transpiler
 
-> Transpiler CSSX to valid JavaScript
+> Transpile `<style>` tags to valid JavaScript
 
 ---
 
@@ -13,7 +13,7 @@ var code = require('fs').readFileSync('./file.js', { encoding: 'utf8' }).toStrin
 /* let's say that code =
 
   var styles = function (margin) {
-    <style>
+    return <style>
       body {
         margin: `margin`px;
         padding: 0;
@@ -28,17 +28,16 @@ console.log(transpiled);
 /*
 
   var styles = function (margin) {
-    (function () {
-      var _2 = {};
-      _2['padding'] = '0';
-      _2['margin'] = margin + "px";
+    return (function () {
+      var _3 = {};
+      _3['padding'] = '0';
+      _3['margin'] = margin + "px";
+      var _2 = [];
 
-      var _1 = cssx('_1');
+      _2.push(['body', _3]);
 
-      _1.add('body', _2);
-
-      return _1;
-    }.apply(this))
+      return _2;
+    }.apply(this));
   };
 
 */
@@ -68,6 +67,58 @@ While transpiling the module is creating bunch of unique ids in the format of `_
 
 ---
 
+## Transformations
+
+CSSX transpiler uses array of arrays to represent CSS styles. For example:
+
+```css
+.container {
+  margin: 10px;
+  padding: 20px;
+}
+```
+
+is transformed to
+
+```json
+[
+  [
+    ".container",
+    {
+      "padding": "20px",
+      "margin": "10px"
+    }
+  ]
+]
+```
+
+Nested styles like media queries are treated a little bit different. They are wrapped in objects:
+
+```css
+@media (max-width: 450px) {
+  .container {
+    width: 100%;
+  }
+}
+```
+
+```json
+[
+  {
+    "@media (max-width: 450px)": [
+      [
+        ".container",
+        {
+          "width": "100%"
+        }
+      ]
+    ]
+  }
+]
+```
+
+---
+
 # Where to go from here
 
 * [CSSX *language*](https://github.com/krasimir/cssx/blob/master/docs/cssx-lang.md)