Skip to content

Commit 8cc7cfb

Browse files
jacobp100jacobp100
authored
Merge pull request #104 from styled-components/border-none
Border none
2 parents 8a6b50f + fdddfcd commit 8cc7cfb

File tree

15 files changed

+133
-99
lines changed

15 files changed

+133
-99
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "css-to-react-native",
3-
"version": "2.3.0",
3+
"version": "2.3.1",
44
"description": "Convert CSS text to a React Native stylesheet object",
55
"main": "index.js",
66
"scripts": {

‎src/__tests__/border.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import transformCss from '..'
22

3+
it('transforms border none', () => {
4+
expect(transformCss([['border', 'none']])).toEqual({
5+
borderWidth: 0,
6+
borderColor: 'black',
7+
borderStyle: 'solid',
8+
})
9+
})
10+
311
it('transforms border shorthand', () => {
412
expect(transformCss([['border', '2px dashed #f00']])).toEqual({
513
borderWidth: 2,

‎src/index.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,11 @@ const transformShorthandValue =
5050

5151
export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
5252
const isRawValue = allowShorthand === false || !(propName in transforms)
53-
const propValue = isRawValue
54-
? transformRawValue(inputValue)
53+
const propValues = isRawValue
54+
? { [propName]: transformRawValue(inputValue) }
5555
: transformShorthandValue(propName, inputValue.trim())
5656

57-
return propValue && propValue.$merge
58-
? propValue.$merge
59-
: { [propName]: propValue }
57+
return propValues
6058
}
6159

6260
export const getPropertyName = propName => {

‎src/transforms/border.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { regExpToken, tokens } from '../tokenTypes'
2+
3+
const { NONE, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT, SPACE } = tokens
4+
5+
const BORDER_STYLE = regExpToken(/^(solid|dashed|dotted)$/)
6+
7+
const defaultBorderWidth = 1
8+
const defaultBorderColor = 'black'
9+
const defaultBorderStyle = 'solid'
10+
11+
export default tokenStream => {
12+
let borderWidth
13+
let borderColor
14+
let borderStyle
15+
16+
if (tokenStream.matches(NONE)) {
17+
tokenStream.expectEmpty()
18+
return { borderWidth: 0, borderColor: 'black', borderStyle: 'solid' }
19+
}
20+
21+
let partsParsed = 0
22+
while (partsParsed < 3 && tokenStream.hasTokens()) {
23+
if (partsParsed !== 0) tokenStream.expect(SPACE)
24+
25+
if (
26+
(borderWidth === undefined && tokenStream.matches(LENGTH)) ||
27+
tokenStream.matches(UNSUPPORTED_LENGTH_UNIT)
28+
) {
29+
borderWidth = tokenStream.lastValue
30+
} else if (borderColor === undefined && tokenStream.matches(COLOR)) {
31+
borderColor = tokenStream.lastValue
32+
} else if (borderStyle === undefined && tokenStream.matches(BORDER_STYLE)) {
33+
borderStyle = tokenStream.lastValue
34+
} else {
35+
tokenStream.throw()
36+
}
37+
38+
partsParsed += 1
39+
}
40+
41+
tokenStream.expectEmpty()
42+
43+
if (borderWidth === undefined) borderWidth = defaultBorderWidth
44+
if (borderColor === undefined) borderColor = defaultBorderColor
45+
if (borderStyle === undefined) borderStyle = defaultBorderStyle
46+
47+
return { borderWidth, borderColor, borderStyle }
48+
}

‎src/transforms/boxShadow.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import { parseShadow } from './util'
33
export default tokenStream => {
44
const { offset, radius, color } = parseShadow(tokenStream)
55
return {
6-
$merge: {
7-
shadowOffset: offset,
8-
shadowRadius: radius,
9-
shadowColor: color,
10-
shadowOpacity: 1,
11-
},
6+
shadowOffset: offset,
7+
shadowRadius: radius,
8+
shadowColor: color,
9+
shadowOpacity: 1,
1210
}
1311
}

‎src/transforms/flex.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export default tokenStream => {
1313

1414
if (tokenStream.matches(NONE)) {
1515
tokenStream.expectEmpty()
16-
return { $merge: { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' } }
16+
return { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' }
1717
}
1818

1919
tokenStream.saveRewindPoint()
2020
if (tokenStream.matches(AUTO) && !tokenStream.hasTokens()) {
21-
return { $merge: { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' } }
21+
return { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' }
2222
}
2323
tokenStream.rewind()
2424

@@ -52,5 +52,5 @@ export default tokenStream => {
5252
if (flexShrink === undefined) flexShrink = defaultFlexShrink
5353
if (flexBasis === undefined) flexBasis = defaultFlexBasis
5454

55-
return { $merge: { flexGrow, flexShrink, flexBasis } }
55+
return { flexGrow, flexShrink, flexBasis }
5656
}

‎src/transforms/flexFlow.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { regExpToken, tokens } from '../tokenTypes'
2+
3+
const { SPACE } = tokens
4+
5+
const FLEX_WRAP = regExpToken(/(nowrap|wrap|wrap-reverse)/)
6+
const FLEX_DIRECTION = regExpToken(/(row|row-reverse|column|column-reverse)/)
7+
8+
const defaultFlexWrap = 'nowrap'
9+
const defaultFlexDirection = 'row'
10+
11+
export default tokenStream => {
12+
let flexWrap
13+
let flexDirection
14+
15+
let partsParsed = 0
16+
while (partsParsed < 2 && tokenStream.hasTokens()) {
17+
if (partsParsed !== 0) tokenStream.expect(SPACE)
18+
19+
if (flexWrap === undefined && tokenStream.matches(FLEX_WRAP)) {
20+
flexWrap = tokenStream.lastValue
21+
} else if (
22+
flexDirection === undefined &&
23+
tokenStream.matches(FLEX_DIRECTION)
24+
) {
25+
flexDirection = tokenStream.lastValue
26+
} else {
27+
tokenStream.throw()
28+
}
29+
30+
partsParsed += 1
31+
}
32+
33+
tokenStream.expectEmpty()
34+
35+
if (flexWrap === undefined) flexWrap = defaultFlexWrap
36+
if (flexDirection === undefined) flexDirection = defaultFlexDirection
37+
38+
return { flexWrap, flexDirection }
39+
}

‎src/transforms/font.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default tokenStream => {
4949

5050
tokenStream.expect(SPACE)
5151

52-
const fontFamily = parseFontFamily(tokenStream)
52+
const { fontFamily } = parseFontFamily(tokenStream)
5353

5454
if (fontStyle === undefined) fontStyle = defaultFontStyle
5555
if (fontWeight === undefined) fontWeight = defaultFontWeight
@@ -58,5 +58,5 @@ export default tokenStream => {
5858
const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
5959
if (lineHeight !== undefined) out.lineHeight = lineHeight
6060

61-
return { $merge: out }
61+
return out
6262
}

‎src/transforms/fontFamily.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ export default tokenStream => {
1818

1919
tokenStream.expectEmpty()
2020

21-
return fontFamily
21+
return { fontFamily }
2222
}

‎src/transforms/index.js‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { regExpToken, tokens } from '../tokenTypes'
1+
import { tokens } from '../tokenTypes'
2+
import border from './border'
23
import boxShadow from './boxShadow'
34
import flex from './flex'
5+
import flexFlow from './flexFlow'
46
import font from './font'
57
import fontFamily from './fontFamily'
68
import textShadow from './textShadow'
79
import textDecoration from './textDecoration'
810
import textDecorationLine from './textDecorationLine'
911
import transform from './transform'
10-
import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
12+
import { directionFactory, parseShadowOffset } from './util'
1113

1214
const {
1315
IDENT,
@@ -20,21 +22,7 @@ const {
2022
} = tokens
2123

2224
const background = tokenStream => ({
23-
$merge: { backgroundColor: tokenStream.expect(COLOR) },
24-
})
25-
const border = anyOrderFactory({
26-
borderWidth: {
27-
tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
28-
default: 1,
29-
},
30-
borderColor: {
31-
tokens: [COLOR],
32-
default: 'black',
33-
},
34-
borderStyle: {
35-
tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
36-
default: 'solid',
37-
},
25+
backgroundColor: tokenStream.expect(COLOR),
3826
})
3927
const borderColor = directionFactory({
4028
types: [WORD],
@@ -52,20 +40,18 @@ const margin = directionFactory({
5240
prefix: 'margin',
5341
})
5442
const padding = directionFactory({ prefix: 'padding' })
55-
const flexFlow = anyOrderFactory({
56-
flexWrap: {
57-
tokens: [regExpToken(/(nowrap|wrap|wrap-reverse)/)],
58-
default: 'nowrap',
59-
},
60-
flexDirection: {
61-
tokens: [regExpToken(/(row|row-reverse|column|column-reverse)/)],
62-
default: 'row',
63-
},
43+
const fontVariant = tokenStream => ({
44+
fontVariant: [tokenStream.expect(IDENT)],
45+
})
46+
const fontWeight = tokenStream => ({
47+
fontWeight: tokenStream.expect(WORD), // Also match numbers as strings
48+
})
49+
const shadowOffset = tokenStream => ({
50+
shadowOffset: parseShadowOffset(tokenStream),
51+
})
52+
const textShadowOffset = tokenStream => ({
53+
textShadowOffset: parseShadowOffset(tokenStream),
6454
})
65-
const fontVariant = tokenStream => [tokenStream.expect(IDENT)]
66-
const fontWeight = tokenStream => tokenStream.expect(WORD) // Also match numbers as strings
67-
const shadowOffset = shadowOffsetFactory()
68-
const textShadowOffset = shadowOffsetFactory()
6955

7056
export default {
7157
background,

0 commit comments

Comments
 (0)