necolas · necolas · Oct 15, 2024 · Oct 15, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@babel/preset-react": "^7.18.6",
     "@testing-library/react": "^13.3.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^28.1.2",
+    "babel-jest": "^29.7.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "caniuse-api": "^3.0.0",
@@ -53,8 +53,8 @@
     "glob": "^8.0.3",
     "husky": "^8.0.0",
     "inline-style-prefixer": "^6.0.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
     "npm-run-all": "^4.1.3",

diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppRegistry runApplication styles roots in different documents 1`] = `
+[
+  "[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"] {}",
+  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  "[stylesheet-group="2"] {}",
+  ".r-display-xoduu5 {display: inline-flex;}",
+  ".r-flex-13awgt0 {flex: 1;}",
+  "[stylesheet-group="3"] {}",
+  ".r-bottom-1p0dtai {bottom: 0px;}",
+  ".r-left-1d2f490 {left: 0px;}",
+  ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao {pointer-events: none !important;}",
+  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+  ".r-position-u8s1d {position: absolute;}",
+  ".r-right-zchlnj {right: 0px;}",
+  ".r-top-ipm5af {top: 0px;}",
+]
+`;
+
+exports[`AppRegistry runApplication styles roots in different documents 2`] = `
+[
+  "[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"] {}",
+  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  "[stylesheet-group="2"] {}",
+  ".r-display-xoduu5 {display: inline-flex;}",
+  ".r-flex-13awgt0 {flex: 1;}",
+  "[stylesheet-group="3"] {}",
+  ".r-bottom-1p0dtai {bottom: 0px;}",
+  ".r-left-1d2f490 {left: 0px;}",
+  ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao {pointer-events: none !important;}",
+  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+  ".r-position-u8s1d {position: absolute;}",
+  ".r-right-zchlnj {right: 0px;}",
+  ".r-top-ipm5af {top: 0px;}",
+]
+`;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -101,32 +101,7 @@ describe.each([['concurrent'], ['legacy']])('AppRegistry', (mode) => {
         )
         .map((cssRule) => cssRule.cssText);
 
-      expect(cssText).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\\"] {}",
-          ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
-          "[stylesheet-group=\\"2\\"] {}",
-          ".r-display-xoduu5 {display: inline-flex;}",
-          ".r-flex-13awgt0 {flex: 1;}",
-          "[stylesheet-group=\\"3\\"] {}",
-          ".r-bottom-1p0dtai {bottom: 0px;}",
-          ".r-left-1d2f490 {left: 0px;}",
-          ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
-          ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
-          ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
-          ".r-pointerEvents-633pao {pointer-events: none !important;}",
-          ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
-          ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
-          ".r-position-u8s1d {position: absolute;}",
-          ".r-right-zchlnj {right: 0px;}",
-          ".r-top-ipm5af {top: 0px;}",
-        ]
-      `);
+      expect(cssText).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
@@ -39,21 +39,21 @@ describe('AppRegistry', () => {
         </AppContainer>
       `);
       expect(styleElement).toMatchInlineSnapshot(`
-        "<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
+        "<style id="react-native-stylesheet">[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\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
@@ -96,21 +96,21 @@ describe('AppRegistry', () => {
       AppRegistry.registerComponent('App', () => RootComponent);
       const first = getApplicationStyles('App');
       expect(first).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[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\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
@@ -144,22 +144,22 @@ describe('AppRegistry', () => {
       );
       const second = getApplicationStyles('AlternativeApp');
       expect(second).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[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\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
         .r-bottom-1p0dtai{bottom:0px;}

diff --git a/...es/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js b/...es/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
@@ -149,13 +149,13 @@ describe('compiler/createReactDOMStyle', () => {
       expect(createReactDOMStyle({ fontFamily: 'System' }))
         .toMatchInlineSnapshot(`
         {
-          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+          "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",
+          "font": "14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif",
         }
       `);
     });
@@ -164,13 +164,13 @@ describe('compiler/createReactDOMStyle', () => {
       expect(createReactDOMStyle({ fontFamily: 'Noto, System' }))
         .toMatchInlineSnapshot(`
         {
-          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+          "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",
+          "font": "14px Noto, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif",
         }
       `);
     });

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js
@@ -79,7 +79,7 @@ describe('StyleSheet/compile', () => {
             ],
             [
               [
-                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
+                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}",
               ],
               3,
             ],
@@ -206,7 +206,7 @@ describe('StyleSheet/compile', () => {
                 "@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-test-tbk4su{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) scale(-1);}",
+                ".css-test-tbk4su{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) scale(-1);}",
               ],
               1,
             ],

diff --git a/.../react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js b/.../react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js
@@ -27,20 +27,20 @@ describe('createOrderedCSSStyleSheet', () => {
 
       sheet.insert('.a {}', 0);
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         .a {}"
       `);
 
       sheet.insert('.b {}', 0);
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         .a {}
         .b {}"
       `);
 
       sheet.insert('.c {}', 0);
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         .a {}
         .b {}
         .c {}"
@@ -55,7 +55,7 @@ describe('createOrderedCSSStyleSheet', () => {
       sheet.insert('.a {}', 0);
 
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         .a {}"
       `);
     });
@@ -68,7 +68,7 @@ describe('createOrderedCSSStyleSheet', () => {
       sheet.insert('.a {}', 0);
 
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         .a {}
         .b {}
         .c {}"
@@ -90,23 +90,23 @@ describe('createOrderedCSSStyleSheet', () => {
       sheet.insert('.twenty-point2 {}', 20.2);
 
       expect(sheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"1\\"]{}
+        "[stylesheet-group="1"]{}
         .one {}
-        [stylesheet-group=\\"2.2\\"]{}
+        [stylesheet-group="2.2"]{}
         .two {}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .three {}
-        [stylesheet-group=\\"4\\"]{}
+        [stylesheet-group="4"]{}
         .four-1 {}
         .four-2 {}
-        [stylesheet-group=\\"9.9\\"]{}
+        [stylesheet-group="9.9"]{}
         .nine-1 {}
         .nine-2 {}
-        [stylesheet-group=\\"10\\"]{}
+        [stylesheet-group="10"]{}
         .ten {}
-        [stylesheet-group=\\"20\\"]{}
+        [stylesheet-group="20"]{}
         .twenty {}
-        [stylesheet-group=\\"20.2\\"]{}
+        [stylesheet-group="20.2"]{}
         .twenty-point2 {}"
       `);
     });
@@ -135,9 +135,9 @@ describe('createOrderedCSSStyleSheet', () => {
       element.appendChild(document.createTextNode(textContent));
       const clientSheet = createOrderedCSSStyleSheet(element.sheet);
       expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"1\\"] {}
+        "[stylesheet-group="1"] {}
         .one {width: 10px;}
-        [stylesheet-group=\\"2\\"] {}
+        [stylesheet-group="2"] {}
         .two-1 {height: 20px;}
         .two-2 {color: red;}
         @keyframes anim {