[fix] StyleSheet: escaping of class names in CSS

Fix #47

examples/components/Heading.js

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { StyleSheet, Text } from '../../src'
-import { StyleSheet, Text } from '../../src'
 
-const headingStyles = StyleSheet.create({
+const styles = StyleSheet.create({
+  root: {
+    fontFamily: '"Helvetica Neue", arial, sans-serif'
+  },
   size: {
     xlarge: {
       fontSize: '2rem',
@@ -24,7 +26,7 @@ const Heading = ({ children, size = 'normal' }) => (
   <Text
     accessibilityRole='heading'
     children={children}
-    style={headingStyles.size[size]}
+    style={{ ...styles.root, ...styles.size[size] }}
   />
 )
 

src/modules/StyleSheet/Store.js

@@ -41,7 +41,7 @@ export default class Store {
     const getCssSelector = (property, value) => {
       let className = this.get(property, value)
       if (!obfuscate && className) {
-        className = className.replace(/[:?.%\\$#]/g, '\\$&')
+        className = className.replace(/[,":?.%\\$#]/g, '\\$&')
       }
       return className
     }

src/modules/StyleSheet/__tests__/Store-test.js

@@ -82,8 +82,9 @@ suite('modules/StyleSheet/Store', () => {
 
     test('replaces space characters', () => {
       const store = new Store()
+
       store.set('margin', '0 auto')
-      assert.deepEqual(store.get('margin', '0 auto'), 'margin:0-auto')
+      assert.equal(store.get('margin', '0 auto'), 'margin\:0-auto')
     })
   })
 
@@ -91,17 +92,17 @@ suite('modules/StyleSheet/Store', () => {
     test('human-readable style sheet', () => {
       const store = new Store()
       store.set('alignItems', 'center')
+      store.set('color', '#fff')
+      store.set('fontFamily', '"Helvetica Neue", Arial, sans-serif')
       store.set('marginBottom', 0)
-      store.set('margin', 1)
+      store.set('width', '100%')
-      store.set('margin', 2)
-      store.set('margin', 3)
 
       const expected = '/* 5 unique declarations */\n' +
           '.alignItems\\:center{align-items:center;}\n' +
-          '.margin\\:1px{margin:1px;}\n' +
+          '.color\\:\\#fff{color:#fff;}\n' +
-          '.margin\\:2px{margin:2px;}\n' +
+          '.fontFamily\\:\\"Helvetica-Neue\\"\\,-Arial\\,-sans-serif{font-family:"Helvetica Neue", Arial, sans-serif;}\n' +
-          '.margin\\:3px{margin:3px;}\n' +
+          '.marginBottom\\:0px{margin-bottom:0px;}\n' +
-          '.marginBottom\\:0px{margin-bottom:0px;}'
+          '.width\\:100\\%{width:100%;}'
 
       assert.equal(store.toString(), expected)
     })