first

Author: co2-git

.gitignore

@@ -0,0 +1 @@
+/node_modules/*

README.md

@@ -0,0 +1,86 @@
+js4
+===
+
+Write CSS with ES6 JavaScript.
+
+# Install
+
+```bash
+npm install -g js4 # may require sudo
+```
+
+# Usage
+
+Write your CSS in JS in a file, for example `css.js`:
+
+```js
+new Rule('body', { color : 'red' });
+
+new Rule('#id, .class > [attr]', { 'text-align' : 'center' });
+```
+
+Then compile it from terminal:
+
+```bash
+js4 css.js
+```
+
+Outputs:
+
+```css
+body {
+  color: red;
+}
+
+#id, .class > [attr] {
+  text-align: center;
+}
+```
+
+To compile to a source file:
+
+```bash
+js4 css.js > css.css
+```
+
+# Unleash the power of JavaScript
+
+Now you can use JS to do advanced stuff in your CSS such as declarations or scopes:
+
+```js
+
+const COLOR = 'red';
+
+for ( let i = 0; i < 10; i ++ ) {
+  new Rule(`#p-${i}`, { color : COLOR, width : `${i * 25}px`  });
+}
+```
+
+# Mixins
+
+You can use mixin and reusable rules such as:
+
+```js
+let reusable = new Rule('.foo', { color : 'red' });
+
+new Rule('.bar', { reusable, 'padding' : '10px' });
+```
+
+```css
+.foo {
+  color: red;
+}
+
+.bar {
+  color: red;
+  padding: 10px;
+}
+```
+
+If you don't want the mixin to appear on CSS, do like this:
+
+```js
+let reusable = new Rule('.foo', { color : 'red' }, { render : false });
+
+new Rule('.bar', { reusable, 'padding' : '10px' });
+```

app/js4.js

@@ -0,0 +1,44 @@
+'use strict';
+
+class Rule {
+  constructor (selector, attributes = {}, options = {})  {
+    this.selector = selector;
+    this.attributes = attributes;
+    this.options = options;
+
+    rules.push(this);
+  }
+
+  output (prop, val) {
+    let ret = '';
+
+    if ( typeof val === 'string' ) {
+      ret += `  ${prop}: ${val};\n`;
+    }
+    else if ( typeof val === 'object' ) {
+      for ( let prop in val ) {
+        ret += this.output(prop, val[prop]);
+      }
+    }
+
+    return ret;
+  }
+
+  toString () {
+    if ( this.options.render === false ) {
+      return '';
+    }
+
+    let output = `${this.selector} {\n`;
+
+    for ( let rule in this.attributes ) {
+      output += this.output(rule, this.attributes[rule]);
+    }
+
+    output += '}';
+
+    return output;
+  }
+}
+
+export default Rule;

app/render.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+'use strict';
+
+import fs from 'fs';
+import babel from 'babel';
+import Rule from './js4';
+
+global.Rule = Rule;
+global.rules = [];
+
+let src = process.argv[2];
+
+require('babel/register')({
+  modules :   'common',
+  stage   :   0
+})
+
+let js4 = require(src);
+
+let output = rules.map(rule => rule.toString());
+
+console.log(output.join("\n"));

dist/js4.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var Rule = (function () {
+  function Rule(selector) {
+    var attributes = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+
+    _classCallCheck(this, Rule);
+
+    this.selector = selector;
+    this.attributes = attributes;
+    this.options = options;
+
+    rules.push(this);
+  }
+
+  _createClass(Rule, [{
+    key: 'output',
+    value: function output(prop, val) {
+      var ret = '';
+
+      if (typeof val === 'string') {
+        ret += '  ' + prop + ': ' + val + ';\n';
+      } else if (typeof val === 'object') {
+        for (var _prop in val) {
+          ret += this.output(_prop, val[_prop]);
+        }
+      }
+
+      return ret;
+    }
+  }, {
+    key: 'toString',
+    value: function toString() {
+      if (this.options.render === false) {
+        return '';
+      }
+
+      var output = this.selector + ' {\n';
+
+      for (var rule in this.attributes) {
+        output += this.output(rule, this.attributes[rule]);
+      }
+
+      output += '}';
+
+      return output;
+    }
+  }]);
+
+  return Rule;
+})();
+
+exports['default'] = Rule;
+module.exports = exports['default'];

dist/render.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _babel = require('babel');
+
+var _babel2 = _interopRequireDefault(_babel);
+
+var _js4 = require('./js4');
+
+var _js42 = _interopRequireDefault(_js4);
+
+global.Rule = _js42['default'];
+global.rules = [];
+
+var src = process.argv[2];
+
+require('babel/register')({
+  modules: 'common',
+  stage: 0
+});
+
+var js4 = require(src);
+
+var output = rules.map(function (rule) {
+  return rule.toString();
+});
+
+console.log(output.join("\n"));

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "js4",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "js4" : "node dist/render"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "transpile": "babel app/ --modules common --stage 1 --out-dir dist;",
+    "hot-transpile": "babel app/ --watch --modules common --stage 1 --out-dir dist;"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel": "^5.8.20"
+  }
+}