@tamagui/react-native-web-internals 2.7.7 → 3.0.0-beta.1097.1

package/src/StyleSheet/__tests__/compiler-createReactDOMStyle-test.tsx

@@ -1,236 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import createReactDOMStyle from '../compiler/createReactDOMStyle'
-
-const reactNativeStyle = {
-  boxShadow: '1px 1px 1px 1px #000',
-  borderWidthLeft: 2,
-  borderWidth: 1,
-  borderWidthRight: 3,
-  display: 'flex',
-  marginVertical: 0,
-  opacity: 0,
-  shadowColor: 'red',
-  shadowOffset: { width: 1, height: 2 },
-  resizeMode: 'contain',
-}
-
-describe('compiler/createReactDOMStyle', () => {
-  test('noop on DOM styles', () => {
-    const firstStyle = createReactDOMStyle(reactNativeStyle)
-    const secondStyle = createReactDOMStyle(firstStyle)
-    expect(firstStyle).toEqual(secondStyle)
-  })
-
-  test('shortform -> longform for inline styles', () => {
-    const style = {
-      borderStyle: 'solid',
-      boxSizing: 'border-box',
-      borderBottomColor: 'white',
-      borderBottomWidth: 1,
-      borderWidth: 0,
-      marginTop: 50,
-      marginVertical: 25,
-      margin: 10,
-      overflow: 'hidden',
-      overscrollBehavior: 'contain',
-      paddingLeft: 50,
-      paddingHorizontal: 25,
-      padding: 10,
-    }
-
-    expect(createReactDOMStyle(style, true)).toMatchInlineSnapshot(`
-      {
-        "borderBottomColor": "rgba(255,255,255,1.00)",
-        "borderBottomStyle": "solid",
-        "borderBottomWidth": "1px",
-        "borderLeftStyle": "solid",
-        "borderLeftWidth": "0px",
-        "borderRightStyle": "solid",
-        "borderRightWidth": "0px",
-        "borderTopStyle": "solid",
-        "borderTopWidth": "0px",
-        "boxSizing": "border-box",
-        "marginBottom": "25px",
-        "marginLeft": "10px",
-        "marginRight": "10px",
-        "marginTop": "50px",
-        "overflowX": "hidden",
-        "overflowY": "hidden",
-        "overscrollBehaviorX": "contain",
-        "overscrollBehaviorY": "contain",
-        "paddingBottom": "10px",
-        "paddingLeft": "50px",
-        "paddingRight": "25px",
-        "paddingTop": "10px",
-      }
-    `)
-  })
-
-  test('aspectRatio', () => {
-    expect(createReactDOMStyle({ aspectRatio: 9 / 16 })).toEqual({
-      aspectRatio: '0.5625',
-    })
-  })
-
-  describe('flexbox styles', () => {
-    test('flex: -1', () => {
-      expect(createReactDOMStyle({ flex: -1 })).toEqual({
-        flexGrow: 0,
-        flexShrink: 1,
-        flexBasis: 'auto',
-      })
-    })
-
-    test('flex: 0', () => {
-      expect(createReactDOMStyle({ flex: 0 })).toEqual({
-        flex: 0,
-      })
-    })
-
-    test('flex: 1', () => {
-      expect(createReactDOMStyle({ flex: 1 })).toEqual({
-        flex: 1,
-      })
-    })
-
-    test('flex: 10', () => {
-      expect(createReactDOMStyle({ flex: 10 })).toEqual({
-        flex: 10,
-      })
-    })
-
-    test('flexBasis overrides', () => {
-      // is flex-basis applied?
-      expect(createReactDOMStyle({ flexBasis: '25%' })).toEqual({
-        flexBasis: '25%',
-      })
-
-      // can flex-basis override the 'flex' expansion?
-      expect(createReactDOMStyle({ flex: 1, flexBasis: '25%' })).toEqual({
-        flex: 1,
-        flexBasis: '25%',
-      })
-    })
-
-    test('flexShrink overrides', () => {
-      // is flex-shrink applied?
-      expect(createReactDOMStyle({ flexShrink: 1 })).toEqual({
-        flexShrink: 1,
-      })
-
-      // can flex-shrink override the 'flex' expansion?
-      expect(createReactDOMStyle({ flex: 1, flexShrink: 2 })).toEqual({
-        flex: 1,
-        flexShrink: 2,
-      })
-    })
-  })
-
-  describe('fontFamily', () => {
-    test('general case', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times, serif' }))
-        .toMatchInlineSnapshot(`
-        {
-          "fontFamily": "Georgia, Times, serif",
-        }
-      `)
-    })
-
-    test('"monospace"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'monospace' })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "monospace,monospace",
-        }
-      `)
-    })
-
-    test('"System"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'System' })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `)
-      expect(createReactDOMStyle({ font: '14px System' })).toMatchInlineSnapshot(`
-        {
-          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `)
-    })
-
-    test('"Noto, System"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Noto, System' })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `)
-      expect(createReactDOMStyle({ font: '14px Noto, System' })).toMatchInlineSnapshot(`
-        {
-          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `)
-    })
-
-    test('"Noto, BlinkMacSystemFont"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Noto, BlinkMacSystemFont' }))
-        .toMatchInlineSnapshot(`
-        {
-          "fontFamily": "Noto,BlinkMacSystemFont",
-        }
-      `)
-    })
-  })
-
-  test('fontVariant', () => {
-    expect(
-      createReactDOMStyle({ fontVariant: ['common-ligatures', 'small-caps'] })
-    ).toEqual({
-      fontVariant: 'common-ligatures small-caps',
-    })
-  })
-
-  test('textAlignVertical', () => {
-    expect(
-      createReactDOMStyle({
-        textAlignVertical: 'center',
-      })
-    ).toEqual({
-      verticalAlign: 'middle',
-    })
-  })
-
-  describe('transform', () => {
-    // passthrough if transform value is ever a string
-    test('string', () => {
-      const transform = 'perspective(50px) scaleX(20) translateX(20px) rotate(20deg)'
-      const style = { transform }
-      const resolved = createReactDOMStyle(style)
-
-      expect(resolved).toEqual({ transform })
-    })
-
-    test('array', () => {
-      const style = {
-        transform: [
-          { perspective: 50 },
-          { scaleX: 20 },
-          { translateX: 20 },
-          { rotate: '20deg' },
-          { matrix: [1, 2, 3, 4, 5, 6] },
-          { matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4] },
-        ],
-      }
-      const resolved = createReactDOMStyle(style)
-
-      expect(resolved).toEqual({
-        transform:
-          'perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)',
-      })
-    })
-  })
-})

package/src/StyleSheet/__tests__/compiler-test.tsx

@@ -1,426 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { atomic, classic, inline } from '../compiler'
-
-describe('StyleSheet/compile', () => {
-  describe('atomic', () => {
-    test('converts style to atomic CSS', () => {
-      const result = atomic({
-        animationDirection: ['alternate', 'alternate-reverse'],
-        animationKeyframes: [
-          { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
-          { from: { left: 0 }, to: { left: 10 } },
-        ],
-        fontFamily: 'System',
-        marginHorizontal: 10,
-        marginStart: 1,
-        marginEnd: 2,
-        placeholderTextColor: 'gray',
-        scrollbarWidth: 'none',
-        pointerEvents: 'box-only',
-        start: '12.34%',
-        textAlign: 'start',
-        transform: [
-          {
-            translateX: 50,
-            scale: -1,
-          },
-        ],
-      })
-
-      expect(result).toMatchInlineSnapshot(`
-        [
-          {
-            "$$css": true,
-            "$$css$localize": true,
-            "animationDirection": "r-animationDirection-1kmv48j",
-            "animationKeyframes": "r-animationKeyframes-zacbmr",
-            "fontFamily": "r-fontFamily-1qd0xha",
-            "marginEnd": [
-              "r-marginRight-a5pmau",
-              "r-marginLeft-9cviqr",
-            ],
-            "marginHorizontal": "r-marginHorizontal-vlx1xi",
-            "marginStart": [
-              "r-marginLeft-13kc5u0",
-              "r-marginRight-1knfw1x",
-            ],
-            "placeholderTextColor": "r-placeholderTextColor-1418aci",
-            "pointerEvents": "r-pointerEvents-ah5dr5",
-            "scrollbarWidth": "r-scrollbarWidth-2eszeu",
-            "start": [
-              "r-left-2s0hu9",
-              "r-right-1bnbe1j",
-            ],
-            "textAlign": [
-              "r-textAlign-fdjqy7",
-              "r-textAlign-1ff274t",
-            ],
-            "transform": "r-transform-1ehiua4",
-          },
-          [
-            [
-              [
-                ".r-animationDirection-1kmv48j{animation-direction:alternate,alternate-reverse;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-animationKeyframes-zacbmr{animation-name:r-animation-8jhqzh,r-animation-5azpl5;}",
-                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginRight-a5pmau{margin-right:2px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginLeft-9cviqr{margin-left:2px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
-              ],
-              2.1,
-            ],
-            [
-              [
-                ".r-marginLeft-13kc5u0{margin-left:1px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginRight-1knfw1x{margin-right:1px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
-                ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
-                ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-left-2s0hu9{left:12.34%;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-right-1bnbe1j{right:12.34%;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-textAlign-fdjqy7{text-align:left;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-textAlign-1ff274t{text-align:right;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-transform-1ehiua4{transform:translateX(50px);}",
-              ],
-              2.2,
-            ],
-          ],
-        ]
-      `)
-    })
-  })
-
-  describe('classic', () => {
-    test('converts style to classic CSS', () => {
-      const result = classic(
-        {
-          animationDirection: ['alternate', 'alternate-reverse'],
-          animationKeyframes: [
-            { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
-            { from: { left: 0 }, to: { left: 10 } },
-          ],
-          marginHorizontal: 10,
-          font: '14px System',
-          transform: [
-            {
-              translateX: 50,
-              scale: -1,
-            },
-          ],
-        },
-        'text'
-      )
-      expect(result).toMatchInlineSnapshot(`
-        [
-          {
-            "$$css": true,
-            "css-text-1jr0ypv": "css-text-1jr0ypv",
-          },
-          [
-            [
-              [
-                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                ".css-text-1jr0ypv{animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
-              ],
-              1,
-            ],
-          ],
-        ]
-      `)
-    })
-  })
-
-  describe('inline', () => {
-    test('converts style to inline styles', () => {
-      const result = inline({
-        marginHorizontal: 10,
-        display: 'flex',
-        flexShrink: 1,
-      })
-
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "display": "flex",
-          "flexShrink": 1,
-          "marginLeft": "10px",
-          "marginRight": "10px",
-        }
-      `)
-    })
-
-    describe('logical style polyfill', () => {
-      ;[false, true].forEach((isRTL) => {
-        const dir = isRTL ? 'rtl' : 'ltr'
-
-        test(`ignores "left" properties for ${dir}`, () => {
-          const initial = {
-            borderLeftColor: 'rgba(255,0,0,1.00)',
-            borderLeftStyle: 'solid',
-            borderLeftWidth: '1px',
-            left: '1px',
-            marginLeft: '5px',
-            paddingLeft: '10px',
-          }
-          expect(inline(initial, isRTL)).toEqual(initial)
-        })
-
-        test(`ignores "right" properties for ${dir}`, () => {
-          const initial = {
-            borderRightColor: 'rgba(255,0,0,1.00)',
-            borderRightStyle: 'solid',
-            borderRightWidth: '1px',
-            right: '1px',
-            marginRight: '5px',
-            paddingRight: '10px',
-          }
-          expect(inline(initial, isRTL)).toEqual(initial)
-        })
-
-        test(`ignores "left" values for ${dir}`, () => {
-          const initial = {
-            clear: 'left',
-            float: 'left',
-            textAlign: 'left',
-            transitionProperty: 'left',
-          }
-          expect(inline(initial, isRTL)).toEqual(initial)
-        })
-
-        test(`ignores "right" values for ${dir}`, () => {
-          const initial = {
-            clear: 'right',
-            float: 'right',
-            textAlign: 'right',
-            transitionProperty: 'right',
-          }
-          expect(inline(initial, isRTL)).toEqual(initial)
-        })
-
-        test(`converts "start" properties for ${dir}`, () => {
-          const initial = {
-            borderStartColor: 'red',
-            borderStartStyle: 'solid',
-            borderStartWidth: 1,
-            start: 1,
-            marginStart: 5,
-            paddingStart: 10,
-          }
-
-          const expectedLTR = {
-            borderLeftColor: 'rgba(255,0,0,1.00)',
-            borderLeftStyle: 'solid',
-            borderLeftWidth: '1px',
-            left: '1px',
-            marginLeft: '5px',
-            paddingLeft: '10px',
-          }
-          const expectedRTL = {
-            borderRightColor: 'rgba(255,0,0,1.00)',
-            borderRightStyle: 'solid',
-            borderRightWidth: '1px',
-            right: '1px',
-            marginRight: '5px',
-            paddingRight: '10px',
-          }
-          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR)
-        })
-
-        test(`converts "end" properties for ${dir}`, () => {
-          const initial = {
-            borderEndColor: 'red',
-            borderEndStyle: 'solid',
-            borderEndWidth: 1,
-            end: 1,
-            marginEnd: 5,
-            paddingEnd: 10,
-          }
-
-          const expectedLTR = {
-            borderRightColor: 'rgba(255,0,0,1.00)',
-            borderRightStyle: 'solid',
-            borderRightWidth: '1px',
-            right: '1px',
-            marginRight: '5px',
-            paddingRight: '10px',
-          }
-          const expectedRTL = {
-            borderLeftColor: 'rgba(255,0,0,1.00)',
-            borderLeftStyle: 'solid',
-            borderLeftWidth: '1px',
-            left: '1px',
-            marginLeft: '5px',
-            paddingLeft: '10px',
-          }
-          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR)
-        })
-
-        test(`converts "start" values for ${dir}`, () => {
-          const initial = {
-            clear: 'start',
-            float: 'start',
-            textAlign: 'start',
-            transitionProperty: 'start',
-          }
-
-          const expectedLTR = {
-            clear: 'left',
-            float: 'left',
-            textAlign: 'left',
-            transitionProperty: 'left',
-          }
-          const expectedRTL = {
-            clear: 'right',
-            float: 'right',
-            textAlign: 'right',
-            transitionProperty: 'right',
-          }
-          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR)
-        })
-
-        test(`converts "end" values for ${dir}`, () => {
-          const initial = {
-            clear: 'end',
-            float: 'end',
-            textAlign: 'end',
-            transitionProperty: 'end',
-          }
-
-          const expectedLTR = {
-            clear: 'right',
-            float: 'right',
-            textAlign: 'right',
-            transitionProperty: 'right',
-          }
-          const expectedRTL = {
-            clear: 'left',
-            float: 'left',
-            textAlign: 'left',
-            transitionProperty: 'left',
-          }
-          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR)
-        })
-
-        test('end/start properties take precedence over left/right', () => {
-          const initialLTR = {
-            borderStartWidth: 10,
-            borderLeftWidth: 0,
-            end: 10,
-            right: 0,
-            marginStart: 10,
-            marginLeft: 0,
-          }
-          const expectedLTR = {
-            borderLeftWidth: '10px',
-            marginLeft: '10px',
-            right: '10px',
-          }
-
-          const initialRTL = {
-            borderStartWidth: 10,
-            borderRightWidth: 0,
-            end: 10,
-            left: 0,
-            marginStart: 10,
-            marginRight: 0,
-          }
-          const expectedRTL = {
-            borderRightWidth: '10px',
-            marginRight: '10px',
-            left: '10px',
-          }
-          expect(inline(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(
-            isRTL ? expectedRTL : expectedLTR
-          )
-        })
-      })
-    })
-  })
-})