Initial, stable commit

.eslintrc

@@ -0,0 +1,26 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true,
+    "experimentalObjectRestSpread": true
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "indent": [2, 4],
+    "quotes": [2, "double"],
+    "linebreak-style": [2, "unix"],
+    "semi": [2, "always"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ],
+  "extends": "eslint:recommended"
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.idea

dist/react-bem-my-style.js

@@ -0,0 +1,164 @@
+define(["exports", "module"], function (exports, module) {
+    /*global console */
+    "use strict";
+
+    function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
+
+    function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+    var CHILD_TYPE_ELEMENT = 1;
+    var CHILD_TYPE_MODIFIER = 2;
+    var MODIFIER_SEPARATOR = "--";
+    var ELEMENT_SEPARATOR = "__";
+    var NAME_FIELD_NAME = "__name";
+
+    var getSeparator = function getSeparator(value) {
+        return isModifier(value) ? MODIFIER_SEPARATOR : ELEMENT_SEPARATOR;
+    };
+
+    var logError = function logError(errorMsg) {
+        throw new Error(errorMsg);
+    };
+
+    /**
+     *  Converts string from CamelCase to "dashed-string"
+     *  @example
+     *  camelCaseToDashed("thisIsCamelCasedString"); // "this-is-camel-cased-string"
+     *
+     * @param {string} txt - string that needs to be Dashed
+     * @return {string}
+     */
+    var camelCaseToDashed = function camelCaseToDashed(txt) {
+        return txt.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    };
+
+    /**
+     * Returns object, ready for JSX destruction
+     *
+     * @param {string|string[]} classes - single className or an array of classNames
+     * @return {{className:string}}
+     */
+    var wrapWithClassName = function wrapWithClassName(classes) {
+        return { className: typeof classes === "string" ? classes : classes.join(" ") };
+    };
+
+    /**
+     *
+     * @param {CHILD_TYPE_MODIFIER}  value
+     * @return {boolean}
+     */
+    var isModifier = function isModifier(value) {
+        return value === CHILD_TYPE_MODIFIER;
+    };
+
+    /**
+     *
+     * @param {CHILD_TYPE_ELEMENT}  value
+     * @return {boolean}
+     */
+    var isElement = function isElement(value) {
+        return value === CHILD_TYPE_ELEMENT;
+    };
+
+    /**
+     * Returns Element BEM Generator function
+     *
+     * @param {string} name - name of the element
+     * @param {string[]} allModifiers - array of names of element's modifiers
+     * @return {Function}
+     */
+    var makeElementGenerator = function makeElementGenerator(name, allModifiers) {
+        return function () {
+            for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
+                rest[_key] = arguments[_key];
+            }
+
+            if (rest.length > 0) {
+                var _ret = (function () {
+                    var modifiers = rest[0];
+
+                    if (typeof modifiers !== "object") {
+                        logError("Object expected " + modifiers + " received");
+                    }
+
+                    var keys = Object.keys(modifiers);
+                    var missingModifiers = allModifiers.filter(function (modifier) {
+                        return keys.indexOf(modifier) === -1;
+                    });
+
+                    if (missingModifiers.length > 0) {
+                        logError(name + " is missing modifiers: " + missingModifiers.join(","));
+                    }
+
+                    return {
+                        v: wrapWithClassName([name].concat(_toConsumableArray(keys.filter(function (key) {
+                            return modifiers[key];
+                        }).map(function (key) {
+                            return modifiers[key];
+                        }))))
+                    };
+                })();
+
+                if (typeof _ret === "object") return _ret.v;
+            } else if (allModifiers.length) {
+                logError(name + " is missing modifiers: " + allModifiers.join(","));
+            }
+            return wrapWithClassName(camelCaseToDashed(name));
+        };
+    };
+
+    /**
+     * Returns BEM Generator for Element and it's Child elements and modifiers
+     *
+     * @param {string} name - name of element
+     * @param {{name:object}} block - child elements and modifiers of the element
+     * @param {string[]} allModifiers - array of names of element's modifiers
+     * @return {Function}
+     */
+    var makeElement = function makeElement(name, block, allModifiers) {
+        return Object.assign(makeElementGenerator(name, allModifiers), Object.keys(block).reduce(function (mem, childName) {
+            if (childName !== NAME_FIELD_NAME) {
+                (function () {
+                    var fullName = "" + name + getSeparator(block[childName]) + camelCaseToDashed(childName);
+
+                    if (isModifier(block[childName])) {
+                        mem[childName] = function (s) {
+                            return _defineProperty({}, childName, s === true && fullName);
+                        };
+                    } else if (isElement(block[childName])) {
+                        mem[childName] = function () {
+                            return wrapWithClassName(fullName);
+                        };
+                    } else if (typeof block[childName] === "object") {
+                        mem[childName] = makeBem(fullName, block[childName]);
+                    } else {
+                        logError("Unexpected value for " + name + "(" + childName + ":" + block[childName] + ")");
+                    }
+                })();
+            }
+            return mem;
+        }, {}));
+    };
+
+    /**
+     * Returns BEM Generator for Elementand it's Child elements and modifiers
+     *
+     * @param {string} name - name of the element
+     * @param {{name:object}} block - child elements and modifiers of the element
+     */
+    var makeBem = function makeBem(name, block) {
+        return makeElement(name, block, Object.keys(block).filter(function (childName) {
+            return block[childName] === CHILD_TYPE_MODIFIER;
+        }));
+    };
+
+    /**
+     * Proxies return to makeBem
+     *
+     * @param {{name:object}} block - child elements and modifiers of the element
+     */
+
+    module.exports = function (block) {
+        return makeBem(camelCaseToDashed(block[NAME_FIELD_NAME]), block);
+    };
+});

gulpfile.coffee

@@ -0,0 +1,42 @@
+gulp = require "gulp"
+gutil = require "gulp-util"
+cache = require "gulp-cached"
+changed = require "gulp-changed"
+babel = require "gulp-babel"
+plumber = require "gulp-plumber"
+watch = require "gulp-watch"
+notify = require "gulp-notify"
+runSequence = require "run-sequence"
+
+
+src = "./src/*.js"
+dest = "./dist"
+
+gulp.task "build", ["babel"]
+gulp.task "default", ["watch"]
+gulp.task "babel", ->
+  gulp.src src
+  .pipe plumber(
+    errorHandler: notify.onError(
+      "Babel build error: <%= error.name %> <%= error.message %>"
+    )
+  )
+  .pipe cache "babel"
+  .pipe changed dest, extension: ".js"
+
+  .pipe babel
+    modules: "amd"
+  .on "error", (error) ->
+    @hadError = true
+    gutil.log(
+      gutil.colors.red(
+        "#{error.name}: #{error.message} (#{error.fileName})"
+      )
+    )
+  .pipe gulp.dest dest
+
+gulp.task "watch", ["build"], ->
+  watch src, ->
+    runSequence "babel"
+  gutil.log "Watcher started"
+

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-bem-my-style",
+  "version": "0.0.1",
+  "description": "Turns BEM definition into JSX-eatable object",
+  "main": "dist/index.js",
+  "homepage": "https://github.com/evolution-gaming/react-bem-my-style",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/evolution-gaming/react-bem-my-style/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/evolution-gaming/react-bem-my-style.git"
+  },
+  "keywords": [
+    "react",
+    "css",
+    "bem"
+  ],
+  "author": "Jevgeni Geimanen",
+  "maintainers": [
+    {
+      "name": "jevgenig",
+      "email": "[email protected]"
+    }
+  ],
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "coffee-script": "^1.10.0",
+    "eslint": "^1.10.2",
+    "gulp": "^3.9.0",
+    "gulp-babel": "5.1.0",
+    "gulp-cached": "^1.1.0",
+    "gulp-notify": "^2.2.0",
+    "gulp-plumber": "^1.0.1",
+    "gulp-util": "^3.0.7",
+    "gulp-watch": "^4.3.5",
+    "run-sequence": "^1.1.5"
+  }
+}