diff --git a/examples/components/Heading.js b/examples/components/Heading.js index 5571af2c..a5dcf22e 100644 --- a/examples/components/Heading.js +++ b/examples/components/Heading.js @@ -1,7 +1,9 @@ -import React from 'react' -import { StyleSheet, Text } from '../../src' +import React, { 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' }) => ( ) diff --git a/src/modules/StyleSheet/Store.js b/src/modules/StyleSheet/Store.js index 95b85c42..aa0528a5 100644 --- a/src/modules/StyleSheet/Store.js +++ b/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 } diff --git a/src/modules/StyleSheet/__tests__/Store-test.js b/src/modules/StyleSheet/__tests__/Store-test.js index 263421cd..9b67d8c0 100644 --- a/src/modules/StyleSheet/__tests__/Store-test.js +++ b/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('margin', 2) - store.set('margin', 3) + store.set('width', '100%') const expected = '/* 5 unique declarations */\n' + '.alignItems\\:center{align-items:center;}\n' + - '.margin\\:1px{margin:1px;}\n' + - '.margin\\:2px{margin:2px;}\n' + - '.margin\\:3px{margin:3px;}\n' + - '.marginBottom\\:0px{margin-bottom:0px;}' + '.color\\:\\#fff{color:#fff;}\n' + + '.fontFamily\\:\\"Helvetica-Neue\\"\\,-Arial\\,-sans-serif{font-family:"Helvetica Neue", Arial, sans-serif;}\n' + + '.marginBottom\\:0px{margin-bottom:0px;}\n' + + '.width\\:100\\%{width:100%;}' assert.equal(store.toString(), expected) })