feat(cssToJS): implemented plugin

Author: ritz078

.travis.yml

@@ -13,5 +13,3 @@ before_script:
   - npm prune
 script:
   - yarn lint && yarn test
-after_success:
-  - yarn semantic-release

Readme.md

@@ -1,27 +1,46 @@
-# javascript-plugin-boilerplate
-
-> A boilerplate to write plugins in pure JavaScript using ES2015. Includes mocha, chai, prettier, husky, Rollup and Eslint
-
-### Features
-* ES2015 support (using [rollup.js](http://rollupjs.org/) and [Babel](http://babeljs.io/))
-* [UMD](https://github.com/umdjs/umd) supported build
-* Automatic versioning using [semantic-release](https://github.com/semantic-release/semantic-release)
-* [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/) for testing
-* Lint using [babel-eslint](https://github.com/babel/babel-eslint)
-* Code coverage recording with [istanbul](https://gotwarlost.github.io/istanbul/)
-* Code coverage reporting to codecov.io
-* Prettier for code formatting as a precommit hook
-
-## npm scripts
-- **test**: Run tests
-- **test:watch**: Run tests while watching at the same time
-- **test:cover**: Create code coverage report using istanbul
-- **test:report**: Report code coverage report to codecov.io
-- **build**: Build all JS files to different formats
-- **build:watch**: Build all JS files to different formats while watching
-- **lint**: Run eslint on all JS files
-- **lint:fix**: Fix linting errors
-- **format**: Run prettier on js files
+# transform css-to-js
+
+> A utility to convert your CSS into JS or React Native compatible styles.
+
+The online repl is available at https://transform.now.sh/css-to-js
+
+### Installation
+```
+npm i transform-css-to-js
+```
+
+### Usage
+
+import cssToJS from "transform-css-to-js"
+
+const css = `.main-wrapper {
+  flex-direction: row;
+  display: flex;
+  flex: 1;
+}
+
+#content {
+  flex: 1;
+}
+
+ul {
+  padding: 20px 0;
+  flex: 1;
+}
+
+li {
+  font-family:'Lato';
+  color: whitesmoke;
+  line-height: 44px;
+}`
+
+const jsStyle = cssToJS(css)
+const reactNativeCompatibleCSS = cssToJS(css, true)
+```
+
+### API
+
+#### cssToJS(CSS, [supportReactNative])
 
 ## License
 MIT @ Ritesh Kumar

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "javascript-plugin-boilerplate",
-  "version": "0.0.0-semantically-released",
+  "name": "transform-css-to-js",
+  "version": "0.1.0",
   "description": "A boilerplate to write plugins in pure JavaScript using ES2015",
   "main": "dist/lunar.umd.js",
   "module": "dist/lunar.es.js",
@@ -15,11 +15,9 @@
     "test:cover": "nyc ava",
     "test:report": "cat ./coverage/lcov.info | codecov && rm -rf ./coverage",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "build": "npm run build:umd && npm run build:es && npm run build:cjs",
-    "build:umd": "rollup -c rollup.umd.js",
-    "build:es": "rollup -c rollup.es.js",
+    "build": "npm run build:cjs",
     "build:cjs": "rollup -c rollup.cjs.js",
-    "build:watch": "concurrently 'npm run build:umd -- -w' 'npm run build:es -- -w' 'npm run build:cjs -- -w'",
+    "build:watch": "npm run build:cjs -- -w",
     "lint": "eslint src/**/*.js *.js tests/**/*.js",
     "lint:fix": "npm run lint -- -fix",
     "format": "prettier --write src/**/*.js *.js tests/**/*.js",
@@ -34,7 +32,6 @@
     "babel-preset-env": "^1.6.0",
     "babel-register": "^6.24.1",
     "codecov.io": "^0.1.6",
-    "concurrently": "^3.5.0",
     "cz-conventional-changelog": "^2.0.0",
     "eslint": "^4.2.0",
     "eslint-config-prettier": "^2.3.0",
@@ -71,11 +68,16 @@
       "git add"
     ]
   },
-  "homepage": "https://github.com/ritz078/javascript-plugin-boilerplate",
+  "homepage": "https://github.com/ritz078/transform-css-to-js",
   "ava": {
     "require": [
       "babel-register",
       "babel-polyfill"
     ]
+  },
+  "dependencies": {
+    "css-to-react-native": "^2.0.4",
+    "lodash": "^4.17.4",
+    "stringify-object": "^3.2.0"
   }
 }

rollup.cjs.js

@@ -13,7 +13,7 @@ const banner = `/*
 
 const config = {
   entry: "src/index.js",
-  dest: "dist/lunar.cjs.js",
+  dest: "dist/index.js",
   format: "cjs",
   banner,
   plugins: [fileSize()]

rollup.es.js

@@ -1,3 +1,219 @@
-export default function(a, b) {
-  return a + b;
+import cssToReactNative from "css-to-react-native";
+import kebabCase from "lodash/kebabCase";
+import stringify from "stringify-object";
+
+const SPACE = "  ";
+function toProperty(name) {
+  if (name.charAt(0) === "-") name = name.slice(0);
+
+  return name.replace(/[^a-z0-9]([a-z0-9])?/gi, function(v, l) {
+    if (l) return l.toUpperCase();
+    return "";
+  });
+}
+
+function toSelectors(name) {
+  const names = name.split(",");
+
+  return names.map(function(name) {
+    name = name.trim();
+    let newName = "";
+
+    if (name.charAt(0) === ".") {
+      newName += "Class";
+      name = name.slice(1);
+    } else if (name.charAt(0) === "#") {
+      newName += "Id";
+      name = name.slice(1);
+    } else {
+      newName += "Element";
+    }
+
+    return (
+      name.replace(/([^a-z0-9])([a-z0-9])?/gi, function(v, c, l) {
+        if (l)
+          return c === "," || c === " " ? l.toLowerCase() : l.toUpperCase();
+        return "";
+      }) + newName
+    );
+  });
+}
+
+function tokenizer(code) {
+  const tokens = [];
+  let token = "";
+  const whitespc = ["\r\n", "\n\r", "\n", "\r"];
+  let lastChar = "\0";
+  let nextChar = "\0";
+  let char = "\0";
+  const specialChars = ["{", "}", ":", ";"];
+  const specialCharsPB = ["{", "}", ";"];
+  let sc = null;
+  let inBrackets = false;
+
+  for (let i = 0; i < code.length; i++) {
+    if (i) lastChar = code.charAt(i - 1);
+    char = code.charAt(i);
+    if (i + 1 < code.length) nextChar = code.charAt(i + 1);
+
+    if (~whitespc.indexOf(char) && ~whitespc.indexOf(lastChar)) {
+      continue;
+    }
+
+    sc = inBrackets ? specialChars : specialCharsPB;
+
+    if (~sc.indexOf(char)) {
+      if (char === "{") inBrackets = true;
+      if (char === "}") inBrackets = false;
+      tokens.push(token);
+      tokens.push(char);
+      token = "";
+      continue;
+    }
+
+    token += char;
+  }
+
+  if (token) tokens.push(token);
+
+  return tokens
+    .map(function(token) {
+      return token.trim();
+    })
+    .filter(function(token) {
+      return token;
+    });
+}
+
+function convertoToJS(tokens) {
+  const items = [];
+  let actualItem = null;
+  let actualProp = null;
+  function readSelector(token) {
+    const selectors = toSelectors(token);
+
+    actualItem = {
+      originalValue: token,
+      selectors: selectors,
+      values: {}
+    };
+
+    actualProp = null;
+    items.push(actualItem);
+
+    return readBracketO;
+  }
+
+  function readBracketO(token) {
+    if (token !== "{") throw new Error("expected '{' ");
+
+    return readProperty;
+  }
+
+  function readBracketC(token) {
+    if (token !== "}") throw new Error("expected '}' ");
+    return readSelector;
+  }
+
+  function readDefinition(token) {
+    if (token !== ":") throw new Error("expected ':' ");
+
+    return readValue;
+  }
+
+  function readProperty(token) {
+    if (token === "}") return readBracketC(token);
+
+    const property = toProperty(token);
+    actualProp = property;
+
+    if (!actualItem.values[property]) {
+      actualItem.values[property] = [];
+    }
+
+    return readDefinition;
+  }
+
+  function readValue(token) {
+    actualItem.values[actualProp].push(token);
+
+    return readFinal;
+  }
+
+  function readFinal(token) {
+    if (token === "}") return readBracketC(token);
+    if (token !== ";") throw new Error("expected ';' ");
+    return readProperty;
+  }
+
+  let nextAction = readSelector;
+  let i = 0;
+  tokens.forEach(function(token) {
+    i++;
+    nextAction = nextAction(token);
+  });
+
+  return renderJS(items);
+}
+
+function renderJS(items) {
+  let objects = ["{"];
+  objects = objects.concat(items.map(renderItem).join(","));
+  objects.push("}");
+  return objects.join("\n");
+}
+
+function renderItem(item) {
+  const code = ["\n  //" + item.originalValue];
+
+  let properties = [];
+
+  for (const prop in item.values) {
+    if (item.values.hasOwnProperty(prop)) {
+      const propitem = {
+        name: prop,
+        value: item.values[prop][item.values[prop].length - 1]
+      };
+      let markup = '"';
+      if (~propitem.value.indexOf('"')) {
+        markup = "'";
+        propitem.value = propitem.value.replace(/'/gi, "\\'");
+      }
+      properties.push(
+        SPACE + SPACE + propitem.name + ": " + markup + propitem.value + markup
+      );
+    }
+  }
+
+  properties = properties.map(function(x) {
+    return SPACE + x;
+  });
+
+  item.selectors.forEach(function(i) {
+    code.push(SPACE + i + ": {");
+    code.push(properties.join(",\n"));
+    code.push(SPACE + "}");
+  });
+
+  return code.join("\n");
+}
+
+function getRnCode(css) {
+  const styles = {};
+  const code = eval("(" + convertoToJS(tokenizer(css)) + ")");
+  Object.keys(code).forEach(key => {
+    styles[key] = {};
+    const arr = [];
+    Object.keys(code[key]).forEach(key2 => {
+      arr.push([kebabCase(key2), code[key][key2]]);
+    });
+    styles[key] = cssToReactNative(arr);
+  });
+  return stringify(styles, {
+    indent: "  "
+  });
+}
+
+export default function(code, reactNative = false) {
+  return reactNative ? getRnCode(code) : convertoToJS(tokenizer(code));
 }