fix(rn): css-transform (#10482)

* fix(transform): 修复 boxShadow 样式转换 * fix(test): 修复 rn 样式测试用例 * fix(rn): shadow 转换判断顺序优化 Co-authored-by: tony chen <[email protected]>
NervJS · Nov 5, 2021 · bc4fa8c · bc4fa8c
1 parent 299a228
commit bc4fa8c
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 155 deletions.
diff --git a/packages/css-to-react-native/__tests__/index.spec.js b/packages/css-to-react-native/__tests__/index.spec.js
diff --git a/packages/css-to-react-native/src/css-to-react-native/TokenStream.js b/packages/css-to-react-native/src/css-to-react-native/TokenStream.js
@@ -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]
@@ -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
@@ -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 () {

diff --git a/packages/css-to-react-native/src/css-to-react-native/index.js b/packages/css-to-react-native/src/css-to-react-native/index.js
@@ -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

diff --git a/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js b/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
@@ -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

diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js b/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js
@@ -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()
@@ -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()
@@ -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 } }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/font.js b/packages/css-to-react-native/src/css-to-react-native/transforms/font.js
@@ -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
@@ -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)
     }
@@ -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 }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js b/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js
@@ -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()
@@ -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()
@@ -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 }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js b/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
@@ -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

diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/util.js b/packages/css-to-react-native/src/css-to-react-native/transforms/util.js
@@ -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
   }, {})
 
@@ -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)
         )
@@ -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 }
@@ -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()
@@ -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'
   }
 }
diff --git a/packages/css-to-react-native/src/index.js b/packages/css-to-react-native/src/index.js
@@ -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
@@ -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) {
@@ -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(