0.0.64

The 'createDOMElement' function wasn't pulling 'style' out of the
props. A change to the logic that sets DOM props meant that if
'StyleRegistry.resolve' didn't return a 'style' object, the React Native
styles would be passed through to the underlying DOM node.

Fix #315

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

src/apis/StyleSheet/registry.js

@@ -14,7 +14,7 @@ import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
 
 const prefix = 'r';
 const SPACE_REGEXP = /\s/g;
-const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#]/g;
+const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#*]/g;
 
 /**
  * Creates an HTML class name for use on elements
@@ -24,6 +24,14 @@ const createClassName = (prop, value) => {
   return `rn-${prop}:${val}`;
 };
 
+/**
+ * Formatting improves debugging in devtools and snapshot
+ */
+const mapDeclarationsToClassName = (style, fn) => {
+  const result = mapKeyValue(style, fn).join('\n').trim();
+  return `\n${result}`;
+};
+
 /**
  * Inject a CSS rule for a given declaration and record the availability of the
  * resulting class name.
@@ -50,11 +58,11 @@ const injectClassNameIfNeeded = (prop, value) => {
 let resolvedPropsCache = {};
 const registerStyle = (id, flatStyle) => {
   const style = createReactDOMStyle(flatStyle);
-  const className = mapKeyValue(style, (prop, value) => {
+  const className = mapDeclarationsToClassName(style, (prop, value) => {
     if (value != null) {
       return injectClassNameIfNeeded(prop, value);
     }
-  }).join(' ').trim();
+  });
 
   const key = `${prefix}-${id}`;
   resolvedPropsCache[key] = { className };
@@ -70,7 +78,7 @@ const resolveProps = (reactNativeStyle) => {
   const domStyle = createReactDOMStyle(flatStyle);
   const style = {};
 
-  const _className = mapKeyValue(domStyle, (prop, value) => {
+  const className = mapDeclarationsToClassName(domStyle, (prop, value) => {
     if (value != null) {
       const singleClassName = createClassName(prop, value);
       if (injectedClassNames[singleClassName]) {
@@ -80,12 +88,7 @@ const resolveProps = (reactNativeStyle) => {
         style[prop] = value;
       }
     }
-  })
-  // improves debugging in devtools and snapshots
-  .join('\n')
-  .trim();
-
-  const className = `\n${_className}`;
+  });
 
   const props = {
     className,

src/components/Text/__tests__/__snapshots__/index-test.js.snap

@@ -1,15 +1,24 @@
 exports[`components/Text prop "children" 1`] = `
 <span
-  className="rn-borderTopWidth:0px rn-borderRightWidth:0px rn-borderBottomWidth:0px rn-borderLeftWidth:0px rn-color:inherit rn-display:inline rn-font:inherit rn-marginTop:0px rn-marginRight:0px rn-marginBottom:0px rn-marginLeft:0px rn-paddingTop:0px rn-paddingRight:0px rn-paddingBottom:0px rn-paddingLeft:0px rn-textDecoration:none rn-whiteSpace:pre-wrap rn-wordWrap:break-word"
-  style={
-    Array [
-      2,
-      undefined,
-      false,
-      false,
-      undefined,
-    ]
-  }>
+  className="
+rn-borderTopWidth:0px
+rn-borderRightWidth:0px
+rn-borderBottomWidth:0px
+rn-borderLeftWidth:0px
+rn-color:inherit
+rn-display:inline
+rn-font:inherit
+rn-marginTop:0px
+rn-marginRight:0px
+rn-marginBottom:0px
+rn-marginLeft:0px
+rn-paddingTop:0px
+rn-paddingRight:0px
+rn-paddingBottom:0px
+rn-paddingLeft:0px
+rn-textDecoration:none
+rn-whiteSpace:pre-wrap
+rn-wordWrap:break-word">
   children
 </span>
 `;
@@ -44,16 +53,25 @@ rn-wordWrap:break-word"
 
 exports[`components/Text prop "selectable" 1`] = `
 <span
-  className="rn-borderTopWidth:0px rn-borderRightWidth:0px rn-borderBottomWidth:0px rn-borderLeftWidth:0px rn-color:inherit rn-display:inline rn-font:inherit rn-marginTop:0px rn-marginRight:0px rn-marginBottom:0px rn-marginLeft:0px rn-paddingTop:0px rn-paddingRight:0px rn-paddingBottom:0px rn-paddingLeft:0px rn-textDecoration:none rn-whiteSpace:pre-wrap rn-wordWrap:break-word"
-  style={
-    Array [
-      2,
-      undefined,
-      false,
-      false,
-      undefined,
-    ]
-  } />
+  className="
+rn-borderTopWidth:0px
+rn-borderRightWidth:0px
+rn-borderBottomWidth:0px
+rn-borderLeftWidth:0px
+rn-color:inherit
+rn-display:inline
+rn-font:inherit
+rn-marginTop:0px
+rn-marginRight:0px
+rn-marginBottom:0px
+rn-marginLeft:0px
+rn-paddingTop:0px
+rn-paddingRight:0px
+rn-paddingBottom:0px
+rn-paddingLeft:0px
+rn-textDecoration:none
+rn-whiteSpace:pre-wrap
+rn-wordWrap:break-word" />
 `;
 
 exports[`components/Text prop "selectable" 2`] = `

src/modules/createDOMElement/index.js

@@ -25,6 +25,7 @@ const createDOMElement = (component, rnProps = emptyObject) => {
     accessibilityLiveRegion,
     accessibilityRole,
     accessible = true,
+    style: rnStyle, // we need to remove the RN styles from 'domProps'
     testID,
     type,
     ...domProps
@@ -33,7 +34,7 @@ const createDOMElement = (component, rnProps = emptyObject) => {
   const accessibilityComponent = accessibilityRole && roleComponents[accessibilityRole];
   const Component = accessibilityComponent || component;
 
-  const { className, style } = StyleRegistry.resolve(domProps.style) || emptyObject;
+  const { className, style } = StyleRegistry.resolve(rnStyle) || emptyObject;
 
   if (!accessible) { domProps['aria-hidden'] = true; }
   if (accessibilityLabel) { domProps['aria-label'] = accessibilityLabel; }
@@ -53,7 +54,9 @@ const createDOMElement = (component, rnProps = emptyObject) => {
   if (style) {
     domProps.style = style;
   }
-  if (type) { domProps.type = type; }
+  if (type) {
+    domProps.type = type;
+  }
 
   return (
     <Component {...domProps} />