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

package/src/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.tsx

@@ -1,169 +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 createOrderedCSSStyleSheet from '../dom/createOrderedCSSStyleSheet'
-
-const insertStyleElement = () => {
-  const element = document.createElement('style')
-  const head = document.head
-  head.insertBefore(element, head.firstChild)
-  return element
-}
-
-const removeStyleElement = (element) => {
-  document.head.removeChild(element)
-}
-
-describe('createOrderedCSSStyleSheet', () => {
-  describe('#insert', () => {
-    test('insertion order for same group', () => {
-      const sheet = createOrderedCSSStyleSheet()
-
-      expect(sheet.getTextContent()).toMatchInlineSnapshot('""')
-
-      sheet.insert('.a {}', 0)
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
-        .a {}"
-      `)
-
-      sheet.insert('.b {}', 0)
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
-        .a {}
-        .b {}"
-      `)
-
-      sheet.insert('.c {}', 0)
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
-        .a {}
-        .b {}
-        .c {}"
-      `)
-    })
-
-    test('deduplication for same group', () => {
-      const sheet = createOrderedCSSStyleSheet()
-
-      sheet.insert('.a {}', 0)
-      sheet.insert('.a {}', 0)
-      sheet.insert('.a {}', 0)
-
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
-        .a {}"
-      `)
-    })
-
-    test('order for same group', () => {
-      const sheet = createOrderedCSSStyleSheet()
-
-      sheet.insert('.c {}', 0)
-      sheet.insert('.b {}', 0)
-      sheet.insert('.a {}', 0)
-
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
-        .a {}
-        .b {}
-        .c {}"
-      `)
-    })
-
-    test('insertion order for different groups', () => {
-      const sheet = createOrderedCSSStyleSheet()
-
-      sheet.insert('.nine-1 {}', 9.9)
-      sheet.insert('.nine-2 {}', 9.9)
-      sheet.insert('.three {}', 3)
-      sheet.insert('.one {}', 1)
-      sheet.insert('.two {}', 2.2)
-      sheet.insert('.four-1 {}', 4)
-      sheet.insert('.four-2 {}', 4)
-      sheet.insert('.twenty {}', 20)
-      sheet.insert('.ten {}', 10)
-      sheet.insert('.twenty-point2 {}', 20.2)
-
-      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"1\\"]{}
-        .one {}
-        [stylesheet-group=\\"2.2\\"]{}
-        .two {}
-        [stylesheet-group=\\"3\\"]{}
-        .three {}
-        [stylesheet-group=\\"4\\"]{}
-        .four-1 {}
-        .four-2 {}
-        [stylesheet-group=\\"9.9\\"]{}
-        .nine-1 {}
-        .nine-2 {}
-        [stylesheet-group=\\"10\\"]{}
-        .ten {}
-        [stylesheet-group=\\"20\\"]{}
-        .twenty {}
-        [stylesheet-group=\\"20.2\\"]{}
-        .twenty-point2 {}"
-      `)
-    })
-  })
-
-  describe('client-side hydration', () => {
-    let element
-
-    beforeEach(() => {
-      if (element != null) {
-        removeStyleElement(element)
-      }
-      element = insertStyleElement()
-    })
-
-    test('from SSR CSS', () => {
-      // Setup SSR CSS
-      const serverSheet = createOrderedCSSStyleSheet()
-      serverSheet.insert('.one { width: 10px; }', 1)
-      serverSheet.insert('.two-1 { height: 20px; }', 2)
-      serverSheet.insert('.two-2 { color: red; }', 2)
-      serverSheet.insert('@keyframes anim { 0% { opacity: 1; } }', 2)
-      const textContent = serverSheet.getTextContent()
-
-      // Add SSR CSS to client style sheet
-      element.appendChild(document.createTextNode(textContent))
-      const clientSheet = createOrderedCSSStyleSheet(element.sheet)
-      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"1\\"] {}
-        .one {width: 10px;}
-        [stylesheet-group=\\"2\\"] {}
-        .two-1 {height: 20px;}
-        .two-2 {color: red;}
-        @keyframes anim { 
-          0% {opacity: 1;} 
-        }"
-      `)
-    })
-
-    test('works when the group marker is in single quotes', () => {
-      // Setup SSR CSS
-      const serverSheet = createOrderedCSSStyleSheet()
-      serverSheet.insert('.a { color: red }', 0)
-      serverSheet.insert('.b { color: red }', 1)
-      const textContent = serverSheet.getTextContent().replace(/"/g, "'")
-
-      // Add SSR CSS to client style sheet
-      element.appendChild(document.createTextNode(textContent))
-      const clientSheet = createOrderedCSSStyleSheet(element.sheet)
-      clientSheet.insert('.c { color: red }', 0)
-      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group='0'] {}
-        .a {color: red;}
-        .c { color: red }
-        [stylesheet-group='1'] {}
-        .b {color: red;}"
-      `)
-    })
-  })
-})

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

@@ -1,406 +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 StyleSheet from '../index'
-
-describe('StyleSheet', () => {
-  // test this first because subsequent 'create' calls will change the snapshot
-  test('getSheet', () => {
-    expect(StyleSheet.getSheet()).toMatchInlineSnapshot(`
-      {
-        "id": "react-native-stylesheet",
-        "textContent": "[stylesheet-group=\\"0\\"]{}
-      body{margin:0;}
-      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
-      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
-      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-      [stylesheet-group=\\"2.2\\"]{}
-      .r-bottom-1p0dtai{bottom:0px;}
-      .r-left-1d2f490{left:0px;}
-      .r-position-u8s1d{position:absolute;}
-      .r-right-zchlnj{right:0px;}
-      .r-top-ipm5af{top:0px;}",
-      }
-    `)
-  })
-
-  test('absoluteFill', () => {
-    expect(StyleSheet.absoluteFill).toMatchInlineSnapshot(`
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    `)
-  })
-
-  test('absoluteFillObject', () => {
-    expect(StyleSheet.absoluteFillObject).toMatchInlineSnapshot(`
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    `)
-  })
-
-  test('compose', () => {
-    expect(StyleSheet.compose(1, 2)).toEqual([1, 2])
-    expect(StyleSheet.compose(1, null)).toBe(1)
-    expect(StyleSheet.compose(null, 2)).toBe(2)
-  })
-
-  describe('create', () => {
-    test('returns original style objects', () => {
-      const style = StyleSheet.create({ root: { position: 'absolute' } })
-      expect(style.root).toMatchInlineSnapshot(`
-        {
-          "position": "absolute",
-        }
-      `)
-    })
-
-    test('e2e resolves to classname', () => {
-      const style = StyleSheet.create({ root: { position: 'absolute' } })
-      expect(StyleSheet(style.root)).toMatchInlineSnapshot(`
-        [
-          "r-position-u8s1d",
-          null,
-        ]
-      `)
-    })
-
-    test('e2e flattens shadow style properties', () => {
-      const style = StyleSheet.create({
-        root: {
-          shadowColor: 'rgba(50,60,70,0.5)',
-          shadowOffset: { width: 1, height: 2 },
-          shadowOpacity: 0.5,
-          shadowRadius: 3,
-          textShadowColor: 'rgba(50,60,70,0.50)',
-          textShadowOffset: { width: 5, height: 10 },
-          textShadowRadius: 15,
-        },
-      })
-      expect(StyleSheet(style.root)).toMatchInlineSnapshot(`
-        [
-          "r-boxShadow-o3ayyy r-textShadow-1x2q051",
-          null,
-        ]
-      `)
-    })
-  })
-
-  describe('flatten', () => {
-    test('should merge style objects', () => {
-      const style = StyleSheet.flatten([{ opacity: 1 }, { order: 2 }])
-      expect(style).toMatchInlineSnapshot(`
-        {
-          "opacity": 1,
-          "order": 2,
-        }
-      `)
-    })
-
-    test('should override style properties', () => {
-      const style = StyleSheet.flatten([
-        { backgroundColor: '#000', order: 1 },
-        { backgroundColor: '#023c69', order: null },
-      ])
-      expect(style).toMatchInlineSnapshot(`
-        {
-          "backgroundColor": "#023c69",
-          "order": null,
-        }
-      `)
-    })
-
-    test('should overwrite properties with `undefined`', () => {
-      const style = StyleSheet.flatten([
-        { backgroundColor: '#000' },
-        { backgroundColor: undefined },
-      ])
-      expect(style).toMatchInlineSnapshot(`
-        {
-          "backgroundColor": undefined,
-        }
-      `)
-    })
-
-    test('should not fail on falsy values', () => {
-      expect(() => StyleSheet.flatten([null, false, undefined])).not.toThrow()
-    })
-
-    test('should recursively flatten arrays', () => {
-      const style = StyleSheet.flatten([
-        null,
-        [],
-        [{ order: 2 }, { opacity: 1 }],
-        { order: 3 },
-      ])
-      expect(style).toMatchInlineSnapshot(`
-        {
-          "opacity": 1,
-          "order": 3,
-        }
-      `)
-    })
-  })
-
-  test('hairlineWidth', () => {
-    expect(Number.isInteger(StyleSheet.hairlineWidth) === true).toBeTruthy()
-  })
-
-  describe('resolve', () => {
-    test('empty', () => {
-      expect(StyleSheet()).toMatchInlineSnapshot(`
-        [
-          "",
-          null,
-        ]
-      `)
-      expect(StyleSheet({})).toMatchInlineSnapshot(`
-        [
-          "",
-          null,
-        ]
-      `)
-      expect(StyleSheet([])).toMatchInlineSnapshot(`
-        [
-          "",
-          null,
-        ]
-      `)
-    })
-
-    test('transforms compiled object to className', () => {
-      expect(
-        StyleSheet([
-          {
-            $$css: true,
-            position: 'position-absolute',
-            opacity: 'opacity-05',
-            width: 'width-200',
-          },
-        ])
-      ).toMatchInlineSnapshot(`
-        [
-          "position-absolute opacity-05 width-200",
-          null,
-        ]
-      `)
-    })
-
-    test('transforms array of compiled objects to className', () => {
-      expect(
-        StyleSheet([
-          {
-            $$css: true,
-            borderWidth: 'borderWidth-0',
-            borderColor: 'borderColor-red',
-            display: 'display-flex',
-            width: 'width-100',
-          },
-          {
-            $$css: true,
-            position: 'position-absolute',
-            opacity: 'opacity-05',
-          },
-          [
-            {
-              $$css: true,
-              width: 'width-200',
-            },
-          ],
-        ])
-      ).toMatchInlineSnapshot(`
-        [
-          "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
-          null,
-        ]
-      `)
-    })
-
-    test('dedupes class names and inline styles', () => {
-      const styleACompiled = {
-        $$css: true,
-        backgroundColor: 'backgroundColor-red',
-        display: 'display-block',
-      }
-      const styleBCompiled = {
-        $$css: true,
-        backgroundColor: 'backgroundColor-green',
-        color: 'color-green',
-      }
-      const styleBInline = {
-        backgroundColor: 'rgba(0,0,255,1.00)',
-        color: null,
-      }
-
-      const [className1, inlineStyle1] = StyleSheet([
-        styleACompiled,
-        styleBCompiled,
-        styleBInline,
-      ])
-      expect(className1).toBe('display-block')
-      expect(inlineStyle1).toEqual({ backgroundColor: 'rgba(0,0,255,1.00)' })
-
-      const [className2, inlineStyle2] = StyleSheet([
-        styleACompiled,
-        styleBInline,
-        styleBCompiled,
-      ])
-      expect(className2).toBe('display-block backgroundColor-green color-green')
-      expect(inlineStyle2).toEqual(null)
-    })
-
-    test('long form inline style properties take precedence over static shorthand properties', () => {
-      const styles1 = StyleSheet.create({
-        test: { paddingHorizontal: '40px' },
-      })
-      const inlineStyle1 = { padding: '8px', paddingHorizontal: '40px' }
-      expect(StyleSheet([styles1.test, inlineStyle1])).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "paddingBottom": "8px",
-            "paddingLeft": "40px",
-            "paddingRight": "40px",
-            "paddingTop": "8px",
-          },
-        ]
-      `)
-
-      const styles2 = StyleSheet.create({ test: { marginVertical: '40px' } })
-      const inlineStyle2 = { margin: '8px', marginVertical: '40px' }
-      expect(StyleSheet([styles2.test, inlineStyle2])).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "marginBottom": "40px",
-            "marginLeft": "8px",
-            "marginRight": "8px",
-            "marginTop": "40px",
-          },
-        ]
-      `)
-    })
-
-    test('polyfills logical styles', () => {
-      const inlineA = { start: '12.34%' }
-      const inlineB = { textAlign: 'start' }
-      const inlineC = { marginEnd: 10 }
-
-      const a = StyleSheet.create({ x: { ...inlineA } }).x
-      const b = StyleSheet.create({ x: { ...inlineB } }).x
-      const c = StyleSheet.create({ x: { ...inlineC } }).x
-      const writingDirection = 'rtl'
-
-      // inline styles
-      const inlineStyle = [inlineA, inlineB, inlineC]
-      expect(StyleSheet(inlineStyle)).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "left": "12.34%",
-            "marginRight": "10px",
-            "textAlign": "left",
-          },
-        ]
-      `)
-      expect(StyleSheet(inlineStyle, { writingDirection })).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "marginLeft": "10px",
-            "right": "12.34%",
-            "textAlign": "right",
-          },
-        ]
-      `)
-      expect(
-        StyleSheet(
-          [inlineStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
-          { writingDirection }
-        )
-      ).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "marginLeft": "0px",
-            "marginRight": "0px",
-            "right": "12.34%",
-            "textAlign": "right",
-          },
-        ]
-      `)
-      expect(
-        StyleSheet([inlineStyle, { marginEnd: null, marginLeft: 11 }], {
-          writingDirection,
-        })
-      ).toMatchInlineSnapshot(`
-        [
-          "",
-          {
-            "marginLeft": "11px",
-            "right": "12.34%",
-            "textAlign": "right",
-          },
-        ]
-      `)
-
-      // static styles
-      const staticStyle = [a, b, c]
-      expect(StyleSheet(staticStyle)).toMatchInlineSnapshot(`
-        [
-          "r-left-2s0hu9 r-textAlign-fdjqy7 r-marginRight-zso239",
-          null,
-        ]
-      `)
-      expect(StyleSheet(staticStyle, { writingDirection })).toMatchInlineSnapshot(`
-        [
-          "r-right-1bnbe1j r-textAlign-1ff274t r-marginLeft-1n0xq6e",
-          null,
-        ]
-      `)
-      // logical wins
-      expect(
-        StyleSheet(
-          [staticStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
-          {
-            writingDirection,
-          }
-        )
-      ).toMatchInlineSnapshot(`
-        [
-          "r-right-1bnbe1j r-textAlign-1ff274t",
-          {
-            "marginLeft": "0px",
-            "marginRight": "0px",
-          },
-        ]
-      `)
-      // logical can be nulled
-      expect(
-        StyleSheet([staticStyle, { marginEnd: null, marginLeft: 11 }], {
-          writingDirection,
-        })
-      ).toMatchInlineSnapshot(`
-        [
-          "r-right-1bnbe1j r-textAlign-1ff274t",
-          {
-            "marginLeft": "11px",
-          },
-        ]
-      `)
-    })
-  })
-})

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

@@ -1,107 +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 { preprocess } from '../preprocess'
-
-describe('StyleSheet/preprocess', () => {
-  describe('preprocesses multiple shadow styles into a single declaration', () => {
-    test('shadowColor only', () => {
-      expect(preprocess({ shadowColor: 'red' })).toEqual({
-        boxShadow: '0px 0px 0px rgba(255,0,0,1.00)',
-      })
-    })
-
-    test('shadowColor and shadowOpacity only', () => {
-      expect(preprocess({ shadowColor: 'red', shadowOpacity: 0.5 })).toEqual({
-        boxShadow: '0px 0px 0px rgba(255,0,0,0.50)',
-      })
-    })
-
-    test('shadowOffset only', () => {
-      expect(preprocess({ shadowOffset: { width: 1, height: 2 } })).toEqual({
-        boxShadow: '1px 2px 0px rgba(0,0,0,1.00)',
-      })
-    })
-
-    test('shadowRadius only', () => {
-      expect(preprocess({ shadowRadius: 5 })).toEqual({
-        boxShadow: '0px 0px 5px rgba(0,0,0,1.00)',
-      })
-    })
-
-    test('shadowOffset, shadowRadius, shadowColor', () => {
-      expect(
-        preprocess({
-          shadowColor: 'rgba(50,60,70,0.5)',
-          shadowOffset: { width: 1, height: 2 },
-          shadowOpacity: 0.5,
-          shadowRadius: 3,
-        })
-      ).toEqual({
-        boxShadow: '1px 2px 3px rgba(50,60,70,0.25)',
-      })
-    })
-  })
-
-  describe('preprocesses multiple textShadow styles into a single declaration', () => {
-    test('textShadowColor only', () => {
-      expect(preprocess({ textShadowColor: 'red' })).toEqual({})
-    })
-
-    test('textShadowOffset only', () => {
-      expect(preprocess({ textShadowOffset: { width: 1, height: 2 } })).toEqual({})
-    })
-
-    test('textShadowRadius only', () => {
-      expect(preprocess({ textShadowRadius: 5 })).toEqual({})
-    })
-
-    test('textShadowColor and textShadowOffset only', () => {
-      expect(
-        preprocess({
-          textShadowColor: 'red',
-          textShadowOffset: { width: 0, height: 0 },
-        })
-      ).toEqual({})
-      expect(
-        preprocess({
-          textShadowColor: 'red',
-          textShadowOffset: { width: -1, height: 0 },
-        })
-      ).toEqual({
-        textShadow: '-1px 0px 0px rgba(255,0,0,1.00)',
-      })
-      expect(
-        preprocess({
-          textShadowColor: 'red',
-          textShadowOffset: { width: 1, height: 2 },
-        })
-      ).toEqual({
-        textShadow: '1px 2px 0px rgba(255,0,0,1.00)',
-      })
-    })
-
-    test('textShadowColor and textShadowRadius only', () => {
-      expect(preprocess({ textShadowColor: 'red', textShadowRadius: 0 })).toEqual({})
-      expect(preprocess({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({
-        textShadow: '0px 0px 5px rgba(255,0,0,1.00)',
-      })
-    })
-
-    test('textShadowColor, textShadowOffset, textShadowRadius', () => {
-      expect(
-        preprocess({
-          textShadowColor: 'rgba(50,60,70,0.50)',
-          textShadowOffset: { width: 5, height: 10 },
-          textShadowRadius: 15,
-        })
-      ).toEqual({
-        textShadow: '5px 10px 15px rgba(50,60,70,0.50)',
-      })
-    })
-  })
-})