Remove stylesheet

Author: agustito37

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-native-use-styles",
+  "name": "react-use-styles",
   "version": "1.3.7",
-  "description": "React Native useStyles",
+  "description": "React useStyles",
   "main": "index.js",
   "module": "src/index.js",
   "types": "index.d.ts",
@@ -25,7 +25,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rootstrap/react-native-use-styles.git"
+    "url": "git+https://github.com/rootstrap/react-use-styles.git"
   },
   "keywords": [
     "react",
@@ -39,9 +39,9 @@
   "author": "Agustín Prieto <agustin@rootstrap.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/rootstrap/react-native-use-styles/issues"
+    "url": "https://github.com/rootstrap/react-use-styles/issues"
   },
-  "homepage": "https://github.com/rootstrap/react-native-use-styles#readme",
+  "homepage": "https://github.com/rootstrap/react-use-styles#readme",
   "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -70,7 +70,6 @@
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-native": "^0.59.0",
     "react-test-renderer": "^16.8.0"
   },
   "husky": {

src/dictionaries/aliases.js src/aliases/index.jssrc/dictionaries/aliases.js renamed to src/aliases/index.js

@@ -2,7 +2,7 @@
   input: 'fx:dir:col'
   output: { flexDirection: 'column' }
 */
-export default Object.assign(Object.create(null), {
+const aliases = Object.assign(Object.create(null), {
   bot: 'bottom',
   col: 'column',
   dir: 'direction',
@@ -16,3 +16,7 @@ export default Object.assign(Object.create(null), {
   wd: 'width',
   hg: 'height',
 });
+
+export default (alias) => {
+  return aliases[alias] || alias;
+};

src/core/cache.js

@@ -1,4 +1,3 @@
-import { StyleSheet } from 'react-native';
 import { GLOBAL_KEY, CONSTANTS_KEY, COMPUTED_KEY } from '../constants';
 import { warn } from '../utils';
 
@@ -10,7 +9,7 @@ export const clearCache = () => {
 };
 clearCache();
 
-const processDefinition = (definition) => {
+const mutateDefinition = (definition) => {
   const constants = definition.constants;
   const computed = definition.computed;
 
@@ -27,9 +26,7 @@ const processDefinition = (definition) => {
   definition.constants = null;
   definition.computed = null;
 
-  const styles = StyleSheet.create(definition);
-
-  return { styles, constants, computed };
+  return { constants, computed };
 };
 
 const getValueFromStorageObject = (key, object, isConstant, isComputed) => {
@@ -45,7 +42,7 @@ const getValueFromStorageObject = (key, object, isConstant, isComputed) => {
 };
 
 export const setInCache = (definition, namespace) => {
-  const { styles, constants, computed } = processDefinition(definition);
+  const { constants, computed } = mutateDefinition(definition);
   let cache = globalCache;
 
   if (namespace) {
@@ -55,7 +52,7 @@ export const setInCache = (definition, namespace) => {
     cache = cache[GLOBAL_KEY];
   }
 
-  Object.assign(cache, StyleSheet.create(styles));
+  Object.assign(cache, definition);
   Object.assign(cache, {
     [CONSTANTS_KEY]: constants,
     [COMPUTED_KEY]: computed,
@@ -117,8 +114,7 @@ export const getFromCache = (
     return;
   }
 
-  // if it's a style, get native style from cached id with flatten
-  return isConstant || isComputed ? value : StyleSheet.flatten(value);
+  return value;
 };
 
 export const getConstant = (name, namespace) => {

src/core/transformer.js

@@ -1,6 +1,5 @@
-import stylesDictionary from '../dictionaries/styles';
-import aliasesDictionary from '../dictionaries/aliases';
-import { hasConstant, warn } from '../utils';
+import getAlias from '../aliases';
+import { hasConstant, capitalize } from '../utils';
 import { DEFAULT_SEPARATOR } from '../constants';
 
 export let separator = DEFAULT_SEPARATOR;
@@ -14,32 +13,20 @@ const getValueFromParts = (parts, getConstant) => {
   if (hasConstant(value)) {
     value = getConstant(value);
   } else {
-    value = aliasesDictionary[value] || value;
+    value = getAlias(value);
   }
 
   return parseFloat(value) || value;
 };
 
 const getKeyFromParts = (parts) => {
-  let current = stylesDictionary;
-
-  for (let x = 0; x < parts.length - 1; x += 1) {
-    let part = parts[x];
-    part = aliasesDictionary[part] || part;
-    current = current[part];
-
-    if (current === undefined) {
-      warn(
-        current === undefined,
-        `"${part}" is not a valid key for styles`,
-        'Invalid-Style-Key',
-      );
-      // return to be executed when current is undefined
-      return;
-    }
+  let current = getAlias(parts[0]);
+
+  for (let x = 1; x < parts.length - 1; x += 1) {
+    current += capitalize(getAlias(parts[x]));
   }
 
-  return current.__propName;
+  return current;
 };
 
 // PRECONDITION: at least one key-value pair exists in the path

src/dictionaries/styles.js

@@ -29,6 +29,10 @@ export const getPathFromLiteralTag = (strings, expressions) =>
     '',
   );
 
+export const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
 export const warn = (conditional, description = '', warningKey = '') => {
   if (conditional) {
     console.warn(

src/utils/index.js

@@ -58,7 +58,9 @@ describe('utils', () => {
       },
     });
     expect(
-      transform('color:$purple', key => getFromStorage(key, null, null, true)),
+      transform('color:$purple', (key) =>
+        getFromStorage(key, null, null, true),
+      ),
     ).toMatchObject({
       color: 'purple',
     });
@@ -75,7 +77,7 @@ describe('utils', () => {
       'namespace',
     );
     expect(
-      transform('color:@namespace$purple', key =>
+      transform('color:@namespace$purple', (key) =>
         getFromStorage(key, 'namespace', null, true),
       ),
     ).toMatchObject({
@@ -87,12 +89,4 @@ describe('utils', () => {
     setSeparator('-');
     expect(transform('flex-1')).toMatchObject({ flex: 1 });
   });
-
-  it('Development mode only: transform produces a console.warn when providing an Invalid-Style-Key', () => {
-    expect(transform('non-existent:1')).toMatchObject({ undefined: 1 });
-    expect(console.warn).toBeCalledTimes(1);
-    expect(console.warn).toHaveBeenLastCalledWith(
-      'useStyles Invalid-Style-Key: "non-existent" is not a valid key for styles. You are seeing this warning because you are in development mode. In a production build, there will be no warning.',
-    );
-  });
 });