Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(rn): css-transform #10482

Merged
merged 6 commits into from
Nov 5, 2021
Merged

fix(rn): css-transform #10482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7e7ed3
fix(transform): 修复 boxShadow 样式转换
ZakaryCode Oct 18, 2021
14080ed
fix(test): 修复 rn 样式测试用例
ZakaryCode Oct 21, 2021
df40bc5
fix(rn): shadow 转换判断顺序优化
ZakaryCode Nov 1, 2021
9991360
Merge branch 'next' into fix/css-to-rn
ZakaryCode Nov 1, 2021
d710de0
Merge branch 'next' into fix/css-to-rn
ZakaryCode Nov 4, 2021
4a0bfc9
Merge branch 'next' into fix/css-to-rn
zhiqingchen Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 126 additions & 112 deletions packages/css-to-react-native/__tests__/index.spec.js
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 12 additions & 4 deletions packages/css-to-react-native/src/css-to-react-native/TokenStream.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,22 @@ export default class TokenStream {
this.rewindIndex = -1
}

get node () {
return this.nodes[this.index]
}

get length () {
return this.nodes.length
}

hasTokens () {
return this.index <= this.nodes.length - 1
return this.index <= this.length - 1
}

[SYMBOL_MATCH] (...tokenDescriptors) {
if (!this.hasTokens()) return null

const node = this.nodes[this.index]
const node = this.node

for (let i = 0; i < tokenDescriptors.length; i += 1) {
const tokenDescriptor = tokenDescriptors[i]
Expand All @@ -41,7 +49,7 @@ export default class TokenStream {
}

matchesFunction () {
const node = this.nodes[this.index]
const node = this.node
if (node.type !== 'function') return null
const value = new TokenStream(node.nodes, node)
this.index += 1
Expand All @@ -59,7 +67,7 @@ export default class TokenStream {
}

throw () {
throw new Error(`Unexpected token type: ${this.nodes[this.index].type}`)
throw new Error(`Unexpected token type: ${this.node?.type}`)
}

saveRewindPoint () {
Expand Down
2 changes: 1 addition & 1 deletion packages/css-to-react-native/src/css-to-react-native/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const transformRawValue = input => {
const numberMatch = value.match(numberOrLengthRe)
if (numberMatch !== null) {
const num = Number(numberMatch[1])
if (/px/.test(value)) {
if (/(\d+)px/.test(value)) {
return `scalePx2dp(${num})`
} else {
return num
Expand Down
2 changes: 1 addition & 1 deletion packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const regExpToken = (regExp, transform = String) => node => {
if (match === null) return null

const value = transform(match[1])
if (/px/.test(node.value)) {
if (/(\d+)px/.test(node.value)) {
return `scalePx2dp(${value})`
} else {
return value
Expand Down
12 changes: 6 additions & 6 deletions packages/css-to-react-native/src/css-to-react-native/transforms/flex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default tokenStream => {
while (partsParsed < 2 && tokenStream.hasTokens()) {
if (partsParsed !== 0) tokenStream.expect(SPACE)

if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
if (typeof flexGrow === 'undefined' && tokenStream.matches(NUMBER)) {
flexGrow = tokenStream.lastValue

tokenStream.saveRewindPoint()
Expand All @@ -35,9 +35,9 @@ export default tokenStream => {
} else {
tokenStream.rewind()
}
} else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
} else if (typeof flexBasis === 'undefined' && tokenStream.matches(LENGTH)) {
flexBasis = tokenStream.lastValue
} else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
} else if (typeof flexBasis === 'undefined' && tokenStream.matches(AUTO)) {
flexBasis = 'auto'
} else {
tokenStream.throw()
Expand All @@ -48,9 +48,9 @@ export default tokenStream => {

tokenStream.expectEmpty()

if (flexGrow === undefined) flexGrow = defaultFlexGrow
if (flexShrink === undefined) flexShrink = defaultFlexShrink
if (flexBasis === undefined) flexBasis = defaultFlexBasis
if (typeof flexGrow === 'undefined') flexGrow = defaultFlexGrow
if (typeof flexShrink === 'undefined') flexShrink = defaultFlexShrink
if (typeof flexBasis === 'undefined') flexBasis = defaultFlexBasis

return { $merge: { flexGrow, flexShrink, flexBasis } }
}
17 changes: 9 additions & 8 deletions packages/css-to-react-native/src/css-to-react-native/transforms/font.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export default tokenStream => {
while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
if (tokenStream.matches(NORMAL)) {
/* pass */
} else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
} else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
fontStyle = tokenStream.lastValue
} else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
} else if (typeof fontWeight === 'undefined' && tokenStream.matches(WEIGHT)) {
fontWeight = tokenStream.lastValue
} else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
} else if (typeof fontVariant === 'undefined' && tokenStream.matches(VARIANT)) {
fontVariant = [tokenStream.lastValue]
} else {
break
Expand All @@ -41,7 +41,8 @@ export default tokenStream => {

if (tokenStream.matches(SLASH)) {
if (tokenStream.matches(NUMBER)) {
lineHeight = fontSize * tokenStream.lastValue
const size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize
lineHeight = size * tokenStream.lastValue
} else {
lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
}
Expand All @@ -51,12 +52,12 @@ export default tokenStream => {

const fontFamily = parseFontFamily(tokenStream)

if (fontStyle === undefined) fontStyle = defaultFontStyle
if (fontWeight === undefined) fontWeight = defaultFontWeight
if (fontVariant === undefined) fontVariant = defaultFontVariant
if (typeof fontStyle === 'undefined') fontStyle = defaultFontStyle
if (typeof fontWeight === 'undefined') fontWeight = defaultFontWeight
if (typeof fontVariant === 'undefined') fontVariant = defaultFontVariant

const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
if (lineHeight !== undefined) out.lineHeight = lineHeight
if (typeof lineHeight !== 'undefined') out.lineHeight = lineHeight

return { $merge: out }
}
12 changes: 6 additions & 6 deletions packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default tokenStream => {
while (tokenStream.hasTokens()) {
if (didParseFirst) tokenStream.expect(SPACE)

if (line === undefined && tokenStream.matches(LINE)) {
if (typeof line === 'undefined' && tokenStream.matches(LINE)) {
const lines = [tokenStream.lastValue.toLowerCase()]

tokenStream.saveRewindPoint()
Expand All @@ -34,9 +34,9 @@ export default tokenStream => {
}

line = lines.join(' ')
} else if (style === undefined && tokenStream.matches(STYLE)) {
} else if (typeof style === 'undefined' && tokenStream.matches(STYLE)) {
style = tokenStream.lastValue
} else if (color === undefined && tokenStream.matches(COLOR)) {
} else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
color = tokenStream.lastValue
} else {
tokenStream.throw()
Expand All @@ -46,11 +46,11 @@ export default tokenStream => {
}

const $merge = {
textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
textDecorationLine: typeof line !== 'undefined' ? line : defaultTextDecorationLine,
textDecorationColor:
color !== undefined ? color : defaultTextDecorationColor,
typeof color !== 'undefined' ? color : defaultTextDecorationColor,
textDecorationStyle:
style !== undefined ? style : defaultTextDecorationStyle
typeof style !== 'undefined' ? style : defaultTextDecorationStyle
}
return { $merge }
}
2 changes: 1 addition & 1 deletion packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const xyTransformFactory = tokenType => (
if (functionStream.hasTokens()) {
functionStream.expect(COMMA)
y = functionStream.expect(tokenType)
} else if (valueIfOmitted !== undefined) {
} else if (typeof valueIfOmitted !== 'undefined') {
y = valueIfOmitted
} else {
// Assumption, if x === y, then we can omit XY
Expand Down
40 changes: 30 additions & 10 deletions packages/css-to-react-native/src/css-to-react-native/transforms/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const directionFactory = ({
export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
const propertyNames = Object.keys(properties)
const values = propertyNames.reduce((accum, propertyName) => {
accum[propertyName] === undefined; // eslint-disable-line
typeof accum[propertyName] === 'undefined'; // eslint-disable-line
return accum
}, {})

Expand All @@ -47,7 +47,7 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {

const matchedPropertyName = propertyNames.find(
propertyName =>
values[propertyName] === undefined &&
typeof values[propertyName] === 'undefined' &&
properties[propertyName].tokens.some(token =>
tokenStream.matches(token)
)
Expand All @@ -65,7 +65,9 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
tokenStream.expectEmpty()

propertyNames.forEach(propertyName => {
if (values[propertyName] === undefined) { values[propertyName] = properties[propertyName].default }
if (typeof values[propertyName] === 'undefined') {
values[propertyName] = properties[propertyName].default
}
})

return { $merge: values }
Expand Down Expand Up @@ -100,23 +102,41 @@ export const parseShadow = tokenStream => {
if (didParseFirst) tokenStream.expect(SPACE)

if (
offsetX === undefined &&
typeof offsetX === 'undefined' &&
tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
offsetX = tokenStream.lastValue
tokenStream.expect(SPACE)
offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
if (
tokenStream.matches(SPACE) &&
tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
offsetY = tokenStream.lastValue
} else {
offsetY = offsetX
tokenStream.rewind()
}

tokenStream.saveRewindPoint()
if (
tokenStream.matches(SPACE) &&
tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
// blur-radius
radius = tokenStream.lastValue
} else {
tokenStream.rewind()
}
} else if (color === undefined && tokenStream.matches(COLOR)) {
tokenStream.saveRewindPoint()
if (
tokenStream.matches(SPACE) &&
tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
// spread-radius
// 兼容web写法，防止报错
} else {
tokenStream.rewind()
}
} else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
color = tokenStream.lastValue
} else {
tokenStream.throw()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这行代码不应该去掉，我们得保证 shadow 的格式错了的话能提示报错信息

Expand All @@ -125,11 +145,11 @@ export const parseShadow = tokenStream => {
didParseFirst = true
}

if (offsetX === undefined) tokenStream.throw()
if (typeof offsetX === 'undefined') tokenStream.throw()

return {
offset: { width: offsetX, height: offsetY },
radius: radius !== undefined ? radius : 0,
color: color !== undefined ? color : 'black'
radius: typeof radius !== 'undefined' ? radius : 0,
color: typeof color !== 'undefined' ? color : 'black'
}
}
13 changes: 7 additions & 6 deletions packages/css-to-react-native/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const shorthandBorderProps = [
'border-style'
]

const transformDecls = (styles, declarations, result, options) => {
const transformDecls = (styles, declarations, result, options = {}) => {
for (const d in declarations) {
const declaration = declarations[d]
if (declaration.type !== 'declaration') continue
Expand Down Expand Up @@ -52,11 +52,12 @@ const transformDecls = (styles, declarations, result, options) => {
// scalable option, when it is false, transform single value 'px' unit to 'PX'
// do not be wrapped by scalePx2dp function
if (
!options.scalable &&
isLengthUnit &&
/px/.test(value)
typeof options.scalable === 'boolean' &&
!options.scalable &&
/(\d+)px/.test(value)
) {
value = value.replace(/px/g, 'PX')
value = value.replace(/(\d+)px/, '$1PX')
}

if (shorthandBorderProps.indexOf(property) > -1) {
Expand Down Expand Up @@ -93,8 +94,8 @@ const transform = (css, options) => {

rule.declarations.forEach(({ property, value }) => {
const isAlreadyDefinedAsClass =
result[property] !== undefined &&
result.__exportProps[property] === undefined
typeof result[property] !== 'undefined' &&
typeof result.__exportProps[property] === 'undefined'

if (isAlreadyDefinedAsClass) {
throw new Error(
Expand Down