@cssxjs/css-to-react-native 3.2.0-0

package/src/tokenTypes.js

@@ -0,0 +1,112 @@
+import { stringify } from 'postcss-value-parser'
+import cssColorKeywords from 'css-color-keywords'
+
+const matchString = node => {
+  if (node.type !== 'string') return null
+  return node.value
+    .replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, (match, charCode) =>
+      String.fromCharCode(parseInt(charCode, 16))
+    )
+    .replace(/\\/g, '')
+}
+
+const hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i
+const cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/
+
+const matchColor = node => {
+  if (
+    node.type === 'word' &&
+    (hexColorRe.test(node.value) ||
+      node.value in cssColorKeywords ||
+      node.value === 'transparent')
+  ) {
+    return node.value
+  } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
+    return stringify(node)
+  }
+  return null
+}
+
+const matchVariable = node => {
+  if (
+    (node.type !== 'function' && node.value !== 'var') ||
+    node.nodes.length === 0
+  )
+    return null
+
+  const variableName = node.nodes[0].value
+
+  if (node.nodes.length === 1) {
+    return `var(${variableName})`
+  }
+
+  const defaultValues = node.nodes
+    .slice(1)
+    .filter(subnode => subnode.type !== 'div')
+    .map(subnode => {
+      if (subnode.type === 'string') {
+        return `'${matchString(subnode)}'`
+      }
+      if (
+        subnode.type === 'function' &&
+        ['rgb', 'rgba', 'hls', 'hlsa'].includes(subnode.value)
+      ) {
+        return `${subnode.value}(${subnode.nodes.map(n => n.value).join('')})`
+      }
+      return subnode.value
+    })
+
+  if (defaultValues.length !== (node.nodes.length - 1) / 2) {
+    return null
+  }
+
+  return `var(${variableName}, ${defaultValues.join`, `})`
+}
+
+const noneRe = /^(none)$/i
+const autoRe = /^(auto)$/i
+const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i
+// Note if these are wrong, you'll need to change index.js too
+const numberRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)$/i
+// Note lengthRe is sneaky: you can omit units for 0
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?=px$))/i
+const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/i
+const angleRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:deg|rad|grad|turn))$/i
+const percentRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?%)$/i
+
+const noopToken = predicate => node => (predicate(node) ? '<token>' : null)
+
+const valueForTypeToken = type => node =>
+  node.type === type ? node.value : null
+
+export const regExpToken = (regExp, transform = String) => node => {
+  if (node.type !== 'word') return null
+
+  const match = node.value.match(regExp)
+  if (match === null) return null
+
+  const value = transform(match[1])
+
+  return value
+}
+
+export const SPACE = noopToken(node => node.type === 'space')
+export const SLASH = noopToken(
+  node => node.type === 'div' && node.value === '/'
+)
+export const COMMA = noopToken(
+  node => node.type === 'div' && node.value === ','
+)
+export const WORD = valueForTypeToken('word')
+export const NONE = regExpToken(noneRe)
+export const AUTO = regExpToken(autoRe)
+export const NUMBER = regExpToken(numberRe, Number)
+export const LENGTH = regExpToken(lengthRe, Number)
+export const UNSUPPORTED_LENGTH_UNIT = regExpToken(unsupportedUnitRe)
+export const ANGLE = regExpToken(angleRe, angle => angle.toLowerCase())
+export const PERCENT = regExpToken(percentRe)
+export const IDENT = regExpToken(identRe)
+export const STRING = matchString
+export const COLOR = matchColor
+export const LINE = regExpToken(/^(none|underline|line-through)$/i)
+export const VARIABLE = matchVariable

package/src/transforms/aspectRatio.js

@@ -0,0 +1,12 @@
+import { NUMBER, SLASH } from '../tokenTypes'
+
+export default tokenStream => {
+  let aspectRatio = tokenStream.expect(NUMBER)
+
+  if (tokenStream.hasTokens()) {
+    tokenStream.expect(SLASH)
+    aspectRatio /= tokenStream.expect(NUMBER)
+  }
+
+  return { aspectRatio }
+}

package/src/transforms/border.js

@@ -0,0 +1,57 @@
+import {
+  regExpToken,
+  NONE,
+  COLOR,
+  LENGTH,
+  UNSUPPORTED_LENGTH_UNIT,
+  SPACE,
+  VARIABLE,
+} from '../tokenTypes'
+
+const BORDER_STYLE = regExpToken(/^(solid|dashed|dotted)$/)
+
+const defaultBorderWidth = 1
+const defaultBorderColor = 'black'
+const defaultBorderStyle = 'solid'
+
+export default tokenStream => {
+  let borderWidth
+  let borderColor
+  let borderStyle
+
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty()
+    return { borderWidth: 0, borderColor: 'black', borderStyle: 'solid' }
+  }
+
+  let partsParsed = 0
+  while (partsParsed < 3 && tokenStream.hasTokens()) {
+    if (partsParsed !== 0) tokenStream.expect(SPACE)
+
+    if (
+      borderWidth === undefined &&
+      tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+    ) {
+      borderWidth = tokenStream.lastValue
+    } else if (
+      borderColor === undefined &&
+      (tokenStream.matches(COLOR) || tokenStream.matches(VARIABLE))
+    ) {
+      borderColor = tokenStream.lastValue
+    } else if (borderStyle === undefined && tokenStream.matches(BORDER_STYLE)) {
+      borderStyle = tokenStream.lastValue
+    } else {
+      tokenStream.throw()
+    }
+
+    partsParsed += 1
+  }
+
+  tokenStream.expectEmpty()
+
+  if (borderWidth === undefined) borderWidth = defaultBorderWidth
+  if (borderColor === undefined) borderColor = defaultBorderColor
+  if (borderStyle === undefined) borderStyle = defaultBorderStyle
+
+  return { borderWidth, borderColor, borderStyle }
+}

package/src/transforms/boxShadow.js

@@ -0,0 +1,11 @@
+import { parseShadow } from './util'
+
+export default tokenStream => {
+  const { offset, radius, color } = parseShadow(tokenStream)
+  return {
+    shadowOffset: offset,
+    shadowRadius: radius,
+    shadowColor: color,
+    shadowOpacity: 1,
+  }
+}

package/src/transforms/flex.js

@@ -0,0 +1,65 @@
+import {
+  NONE,
+  AUTO,
+  NUMBER,
+  LENGTH,
+  UNSUPPORTED_LENGTH_UNIT,
+  PERCENT,
+  SPACE,
+} from '../tokenTypes'
+
+const defaultFlexGrow = 1
+const defaultFlexShrink = 1
+const defaultFlexBasis = 0
+
+export default tokenStream => {
+  let flexGrow
+  let flexShrink
+  let flexBasis
+
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty()
+    return { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' }
+  }
+
+  tokenStream.saveRewindPoint()
+  if (tokenStream.matches(AUTO) && !tokenStream.hasTokens()) {
+    return { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' }
+  }
+  tokenStream.rewind()
+
+  let partsParsed = 0
+  while (partsParsed < 2 && tokenStream.hasTokens()) {
+    if (partsParsed !== 0) tokenStream.expect(SPACE)
+
+    if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
+      flexGrow = tokenStream.lastValue
+
+      tokenStream.saveRewindPoint()
+      if (tokenStream.matches(SPACE) && tokenStream.matches(NUMBER)) {
+        flexShrink = tokenStream.lastValue
+      } else {
+        tokenStream.rewind()
+      }
+    } else if (
+      flexBasis === undefined &&
+      tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT)
+    ) {
+      flexBasis = tokenStream.lastValue
+    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+      flexBasis = 'auto'
+    } else {
+      tokenStream.throw()
+    }
+
+    partsParsed += 1
+  }
+
+  tokenStream.expectEmpty()
+
+  if (flexGrow === undefined) flexGrow = defaultFlexGrow
+  if (flexShrink === undefined) flexShrink = defaultFlexShrink
+  if (flexBasis === undefined) flexBasis = defaultFlexBasis
+
+  return { flexGrow, flexShrink, flexBasis }
+}

package/src/transforms/flexFlow.js

@@ -0,0 +1,37 @@
+import { regExpToken, SPACE } from '../tokenTypes'
+
+const FLEX_WRAP = regExpToken(/(nowrap|wrap|wrap-reverse)/)
+const FLEX_DIRECTION = regExpToken(/(row|row-reverse|column|column-reverse)/)
+
+const defaultFlexWrap = 'nowrap'
+const defaultFlexDirection = 'row'
+
+export default tokenStream => {
+  let flexWrap
+  let flexDirection
+
+  let partsParsed = 0
+  while (partsParsed < 2 && tokenStream.hasTokens()) {
+    if (partsParsed !== 0) tokenStream.expect(SPACE)
+
+    if (flexWrap === undefined && tokenStream.matches(FLEX_WRAP)) {
+      flexWrap = tokenStream.lastValue
+    } else if (
+      flexDirection === undefined &&
+      tokenStream.matches(FLEX_DIRECTION)
+    ) {
+      flexDirection = tokenStream.lastValue
+    } else {
+      tokenStream.throw()
+    }
+
+    partsParsed += 1
+  }
+
+  tokenStream.expectEmpty()
+
+  if (flexWrap === undefined) flexWrap = defaultFlexWrap
+  if (flexDirection === undefined) flexDirection = defaultFlexDirection
+
+  return { flexWrap, flexDirection }
+}

package/src/transforms/font.js

@@ -0,0 +1,63 @@
+import parseFontFamily from './fontFamily'
+import {
+  regExpToken,
+  SPACE,
+  LENGTH,
+  UNSUPPORTED_LENGTH_UNIT,
+  SLASH,
+} from '../tokenTypes'
+
+const NORMAL = regExpToken(/^(normal)$/)
+const STYLE = regExpToken(/^(italic)$/)
+const WEIGHT = regExpToken(/^([1-9]00|bold)$/)
+const VARIANT = regExpToken(/^(small-caps)$/)
+
+const defaultFontStyle = 'normal'
+const defaultFontWeight = 'normal'
+const defaultFontVariant = []
+
+export default tokenStream => {
+  let fontStyle
+  let fontWeight
+  let fontVariant
+  // let fontSize;
+  let lineHeight
+  // let fontFamily;
+
+  let numStyleWeightVariantMatched = 0
+  while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
+    if (tokenStream.matches(NORMAL)) {
+      /* pass */
+    } else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
+      fontStyle = tokenStream.lastValue
+    } else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
+      fontWeight = tokenStream.lastValue
+    } else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
+      fontVariant = [tokenStream.lastValue]
+    } else {
+      break
+    }
+
+    tokenStream.expect(SPACE)
+    numStyleWeightVariantMatched += 1
+  }
+
+  const fontSize = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+
+  if (tokenStream.matches(SLASH)) {
+    lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+  }
+
+  tokenStream.expect(SPACE)
+
+  const { fontFamily } = parseFontFamily(tokenStream)
+
+  if (fontStyle === undefined) fontStyle = defaultFontStyle
+  if (fontWeight === undefined) fontWeight = defaultFontWeight
+  if (fontVariant === undefined) fontVariant = defaultFontVariant
+
+  const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
+  if (lineHeight !== undefined) out.lineHeight = lineHeight
+
+  return out
+}

package/src/transforms/fontFamily.js

@@ -0,0 +1,20 @@
+import { SPACE, IDENT, STRING } from '../tokenTypes'
+
+export default tokenStream => {
+  let fontFamily
+
+  if (tokenStream.matches(STRING)) {
+    fontFamily = tokenStream.lastValue
+  } else {
+    fontFamily = tokenStream.expect(IDENT)
+    while (tokenStream.hasTokens()) {
+      tokenStream.expect(SPACE)
+      const nextIdent = tokenStream.expect(IDENT)
+      fontFamily += ` ${nextIdent}`
+    }
+  }
+
+  tokenStream.expectEmpty()
+
+  return { fontFamily }
+}

package/src/transforms/fontVariant.js

@@ -0,0 +1,14 @@
+import { SPACE, IDENT } from '../tokenTypes'
+
+export default tokenStream => {
+  const values = [tokenStream.expect(IDENT)]
+
+  while (tokenStream.hasTokens()) {
+    tokenStream.expect(SPACE)
+    values.push(tokenStream.expect(IDENT))
+  }
+
+  return {
+    fontVariant: values,
+  }
+}

package/src/transforms/index.js

@@ -0,0 +1,78 @@
+import {
+  AUTO,
+  COLOR,
+  LENGTH,
+  PERCENT,
+  UNSUPPORTED_LENGTH_UNIT,
+  WORD,
+  VARIABLE,
+} from '../tokenTypes'
+import aspectRatio from './aspectRatio'
+import border from './border'
+import boxShadow from './boxShadow'
+import flex from './flex'
+import flexFlow from './flexFlow'
+import font from './font'
+import fontFamily from './fontFamily'
+import fontVariant from './fontVariant'
+import placeContent from './placeContent'
+import textDecoration from './textDecoration'
+import textDecorationLine from './textDecorationLine'
+import textShadow from './textShadow'
+import transform from './transform'
+import { directionFactory, parseShadowOffset } from './util'
+
+const background = tokenStream => ({
+  backgroundColor: tokenStream.expect(COLOR, VARIABLE),
+})
+const borderColor = directionFactory({
+  types: [COLOR, VARIABLE],
+  prefix: 'border',
+  suffix: 'Color',
+})
+const borderRadius = directionFactory({
+  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+  prefix: 'border',
+  suffix: 'Radius',
+})
+const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
+const margin = directionFactory({
+  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
+  prefix: 'margin',
+})
+const padding = directionFactory({ prefix: 'padding' })
+
+const fontWeight = tokenStream => ({
+  fontWeight: tokenStream.expect(WORD), // Also match numbers as strings
+})
+const shadowOffset = tokenStream => ({
+  shadowOffset: parseShadowOffset(tokenStream),
+})
+const textShadowOffset = tokenStream => ({
+  textShadowOffset: parseShadowOffset(tokenStream),
+})
+
+export default {
+  aspectRatio,
+  background,
+  border,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  boxShadow,
+  flex,
+  flexFlow,
+  font,
+  fontFamily,
+  fontVariant,
+  fontWeight,
+  margin,
+  padding,
+  placeContent,
+  shadowOffset,
+  textShadow,
+  textShadowOffset,
+  textDecoration,
+  textDecorationLine,
+  transform,
+}

package/src/transforms/placeContent.js

@@ -0,0 +1,24 @@
+import { regExpToken, SPACE } from '../tokenTypes'
+
+const ALIGN_CONTENT = regExpToken(
+  /(flex-(?:start|end)|center|stretch|space-(?:between|around))/
+)
+const JUSTIFY_CONTENT = regExpToken(
+  /(flex-(?:start|end)|center|space-(?:between|around|evenly))/
+)
+
+export default tokenStream => {
+  const alignContent = tokenStream.expect(ALIGN_CONTENT)
+
+  let justifyContent
+  if (tokenStream.hasTokens()) {
+    tokenStream.expect(SPACE)
+    justifyContent = tokenStream.expect(JUSTIFY_CONTENT)
+  } else {
+    justifyContent = 'stretch'
+  }
+
+  tokenStream.expectEmpty()
+
+  return { alignContent, justifyContent }
+}

package/src/transforms/textDecoration.js

@@ -0,0 +1,56 @@
+import { regExpToken, SPACE, LINE, COLOR, VARIABLE } from '../tokenTypes'
+
+const STYLE = regExpToken(/^(solid|double|dotted|dashed)$/)
+
+const defaultTextDecorationLine = 'none'
+const defaultTextDecorationStyle = 'solid'
+const defaultTextDecorationColor = 'black'
+
+export default tokenStream => {
+  let line
+  let style
+  let color
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    if (line === undefined && tokenStream.matches(LINE)) {
+      const lines = [tokenStream.lastValue.toLowerCase()]
+
+      tokenStream.saveRewindPoint()
+      if (
+        lines[0] !== 'none' &&
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LINE)
+      ) {
+        lines.push(tokenStream.lastValue.toLowerCase())
+        // Underline comes before line-through
+        lines.sort().reverse()
+      } else {
+        tokenStream.rewind()
+      }
+
+      line = lines.join(' ')
+    } else if (style === undefined && tokenStream.matches(STYLE)) {
+      style = tokenStream.lastValue
+    } else if (
+      color === undefined &&
+      (tokenStream.matches(COLOR) || tokenStream.matches(VARIABLE))
+    ) {
+      color = tokenStream.lastValue
+    } else {
+      tokenStream.throw()
+    }
+
+    didParseFirst = true
+  }
+
+  return {
+    textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
+    textDecorationColor:
+      color !== undefined ? color : defaultTextDecorationColor,
+    textDecorationStyle:
+      style !== undefined ? style : defaultTextDecorationStyle,
+  }
+}

package/src/transforms/textDecorationLine.js

@@ -0,0 +1,18 @@
+import { SPACE, LINE } from '../tokenTypes'
+
+export default tokenStream => {
+  const lines = []
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    lines.push(tokenStream.expect(LINE).toLowerCase())
+
+    didParseFirst = true
+  }
+
+  lines.sort().reverse()
+
+  return { textDecorationLine: lines.join(' ') }
+}

package/src/transforms/textShadow.js

@@ -0,0 +1,10 @@
+import { parseShadow } from './util'
+
+export default tokenStream => {
+  const { offset, radius, color } = parseShadow(tokenStream)
+  return {
+    textShadowOffset: offset,
+    textShadowRadius: radius,
+    textShadowColor: color,
+  }
+}

package/src/transforms/transform.js

@@ -0,0 +1,74 @@
+import { SPACE, COMMA, LENGTH, NUMBER, ANGLE, PERCENT } from '../tokenTypes'
+
+const oneOfTypes = tokenTypes => functionStream => {
+  const value = functionStream.expect(...tokenTypes)
+  functionStream.expectEmpty()
+  return value
+}
+
+const singleNumber = oneOfTypes([NUMBER])
+const singleLengthOrPercent = oneOfTypes([LENGTH, PERCENT])
+const singleAngle = oneOfTypes([ANGLE])
+const xyTransformFactory = tokenTypes => (
+  key,
+  valueIfOmitted
+) => functionStream => {
+  const x = functionStream.expect(...tokenTypes)
+
+  let y
+  if (functionStream.hasTokens()) {
+    functionStream.expect(COMMA)
+    y = functionStream.expect(...tokenTypes)
+  } else if (valueIfOmitted !== undefined) {
+    y = valueIfOmitted
+  } else {
+    // Assumption, if x === y, then we can omit XY
+    // I.e. scale(5) => [{ scale: 5 }] rather than [{ scaleX: 5 }, { scaleY: 5 }]
+    return x
+  }
+
+  functionStream.expectEmpty()
+
+  return [{ [`${key}Y`]: y }, { [`${key}X`]: x }]
+}
+const xyNumber = xyTransformFactory([NUMBER])
+const xyLengthOrPercent = xyTransformFactory([LENGTH, PERCENT])
+const xyAngle = xyTransformFactory([ANGLE])
+
+const partTransforms = {
+  perspective: singleNumber,
+  scale: xyNumber('scale'),
+  scaleX: singleNumber,
+  scaleY: singleNumber,
+  translate: xyLengthOrPercent('translate', 0),
+  translateX: singleLengthOrPercent,
+  translateY: singleLengthOrPercent,
+  rotate: singleAngle,
+  rotateX: singleAngle,
+  rotateY: singleAngle,
+  rotateZ: singleAngle,
+  skewX: singleAngle,
+  skewY: singleAngle,
+  skew: xyAngle('skew', '0deg'),
+}
+
+export default tokenStream => {
+  let transforms = []
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    const functionStream = tokenStream.expectFunction()
+    const { functionName } = functionStream
+    let transformedValues = partTransforms[functionName](functionStream)
+    if (!Array.isArray(transformedValues)) {
+      transformedValues = [{ [functionName]: transformedValues }]
+    }
+    transforms = transformedValues.concat(transforms)
+
+    didParseFirst = true
+  }
+
+  return { transform: transforms }
+}