initial commit

Author: kristerkari

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

LICENSE.md

@@ -0,0 +1,20 @@
+# The MIT License
+
+Copyright (c) 2017 Krister Kari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,58 @@
+# css-to-react-native-transform
+
+A lightweight wrapper on top of
+[css-to-react-native](https://github.com/styled-components/css-to-react-native)
+to allow valid CSS to be turned into React Native Stylesheet objects.
+
+Example:
+
+```css
+.my-class {
+  font-size: 18px;
+  line-height: 24px;
+  color: red;
+}
+
+.other {
+  padding: 1rem;
+}
+```
+
+is transformed to:
+
+```js
+{
+  myClass: {
+    fontSize: 18,
+    lineHeight: 24,
+    color: "red"
+  },
+  other: {
+    paddingBottom: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16
+  }
+}
+```
+
+## API
+
+```js
+import transform from "css-to-react-native-transform";
+// or const transform = require("css-to-react-native-transform").default;
+
+transform(`
+  .foo { 
+    color: #f00; 
+  }
+`); // => { foo: { color: "#f00" } }
+```
+
+## Limitations
+
+* For `rem` unit the root element `font-size` is currently set to 16 pixels. A
+  setting needs to be implemented to allow the user to define the root element
+  `font-size`.
+* There is also support for the `box-shadow` shorthand, and this converts into
+  `shadow-` properties. Note that these only work on iOS.

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "css-to-react-native-transform",
+  "description": "Convert CSS text to a React Native stylesheet object",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "author": "Krister Kari",
+  "license": "MIT",
+  "scripts": {
+    "build": "babel src --ignore index.spec.js --out-dir dist",
+    "test": "jest",
+    "prepublish": "npm run build",
+    "release": "np"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^21.2.0",
+    "babel-preset-es2015": "^6.24.1",
+    "jest": "^21.2.1",
+    "np": "^2.18.2"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    }
+  },
+  "dependencies": {
+    "css": "^2.2.1",
+    "css-to-react-native": "^2.0.4"
+  },
+  "repository": {
+    "type": "git",
+    "url":
+      "git+https://github.com/kristerkari/css-to-react-native-transform.git"
+  },
+  "keywords": ["React", "ReactNative", "styles", "CSS"],
+  "files": ["dist", "src", "README.md"]
+}

src/index.js

@@ -0,0 +1,38 @@
+import parseCSS from "css/lib/parse";
+import transformCSS from "css-to-react-native";
+import { boxShadowToShadowProps } from "./transforms/boxShadow";
+import { remToPx } from "./transforms/rem";
+
+const transform = css => {
+  const { stylesheet } = parseCSS(css);
+
+  const result = {};
+
+  for (const rule of stylesheet.rules) {
+    for (let selector of rule.selectors) {
+      selector = selector.replace(/\.|#/g, "");
+
+      let styles;
+
+      styles = result[selector] = result[selector] || {};
+
+      for (const declaration of rule.declarations) {
+        if (declaration.type !== "declaration") continue;
+
+        const property = declaration.property;
+        const value = remToPx(declaration.value);
+
+        // box-shadow is implemented in css-to-react-native,
+        // but not released yet. Remove after it is supported.
+        if (property === "box-shadow") {
+          Object.assign(styles, boxShadowToShadowProps(value));
+        } else {
+          Object.assign(styles, transformCSS([[property, value]]));
+        }
+      }
+    }
+  }
+  return result;
+};
+
+export default transform;