kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] StyleSheet: escaping of class names in CSS

Browse Source 
Fix #47
This commit is contained in:
Nicolas Gallagher
2015-12-19 04:22:00 -08:00
parent 25b74d30c4
commit c77ce19f1b
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/components/Heading.js
View File

@@ -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' }) => (
<Text
accessibilityRole='heading'
children={children}
style={headingStyles.size[size]}
style={{ ...styles.root, ...styles.size[size] }}
/>
)

2
src/modules/StyleSheet/Store.js
View File

@@ -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
}

17
src/modules/StyleSheet/__tests__/Store-test.js
View File

@@ -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)
})