@tamagui/react-native-web-internals 1.112.2

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

@@ -0,0 +1,426 @@
+/**
+ * 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
+          )
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,169 @@
+/**
+ * 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__/dom-test.node.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 { createSheet } from '../dom'
+
+describe('createSheet', () => {
+  test('creates a sheet on the server', () => {
+    const sheet = createSheet()
+    expect(typeof sheet.insert).toBe('function')
+    expect(sheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`)
+    expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+      "[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;}"
+    `)
+
+    sheet.insert('.test { opacity: 0 }', 1)
+    expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+      "[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=\\"1\\"]{}
+      .test { opacity: 0 }"
+    `)
+  })
+})

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

@@ -0,0 +1,60 @@
+/**
+ * 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 { createSheet } from '../dom'
+
+describe('createSheet', () => {
+  test('creates a sheet on the client', () => {
+    const sheet = createSheet()
+    expect(sheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`)
+    expect(typeof sheet.getTextContent()).toBe('string')
+    expect(typeof sheet.insert).toBe('function')
+  })
+
+  test('supports multiple documents with same styles', () => {
+    const sheet = createSheet()
+    sheet.insert('.test-sheet { opacity: 1 }', 3)
+
+    // Iframe -----
+    const iframe = document.createElement('iframe')
+    document.body.appendChild(iframe)
+    const iframeDoc = iframe.contentWindow.document
+    const iframeRootTag = document.createElement('div')
+    iframeDoc.body.appendChild(iframeRootTag)
+    const iframeSheet = createSheet(iframeRootTag)
+
+    // Did we generate a new sheet?
+    expect(sheet).not.toBe(iframeSheet)
+    expect(iframeSheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`)
+    expect(typeof iframeSheet.insert).toBe('function')
+    expect(iframeDoc.getElementById('react-native-stylesheet')).not.toBe(null)
+    // Does the content match existing sheets?
+    expect(iframeSheet.getTextContent().includes('test-sheet')).toBe(true)
+    // Does the content update when other sheets are updated?
+    sheet.insert('.test-iframe { opacity: 0 }', 3)
+    expect(iframeSheet.getTextContent().includes('test-iframe')).toBe(true)
+
+    // ShadowDOM -----
+    const div = document.createElement('div')
+    const shadowRoot = div.attachShadow({ mode: 'open' })
+    const shadowRootTag = document.createElement('div')
+    shadowRoot.appendChild(shadowRootTag)
+    document.body.appendChild(shadowRoot)
+    const shadowSheet = createSheet(shadowRootTag)
+
+    // Did we generate a new sheet?
+    expect(sheet).not.toBe(shadowSheet)
+    expect(shadowSheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`)
+    expect(typeof shadowSheet.insert).toBe('function')
+    // expect(shadowRoot.getElementById('react-native-stylesheet')).not.toBe(null);
+    // Does the content match existing sheets?
+    expect(shadowSheet.getTextContent().includes('test-sheet')).toBe(true)
+    // Does the content update when other sheets are updated?
+    sheet.insert('.test-shadow { opacity: 0 }', 3)
+    expect(shadowSheet.getTextContent().includes('test-shadow')).toBe(true)
+  })
+})