diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index f7852089f..3e90e4820 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -42,7 +42,7 @@ pnpm run format You can also run all four of them at the same time: ``` -pnpm run check +pnpm run check ``` > **Note**: If your tests use other fela packages as depedencies, you might need to run `yarn build` (it's also part of the install step). diff --git a/.prettierrc b/.prettierrc index bffe50b0d..89f1c1996 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,7 +2,7 @@ "trailingComma": "es5", "singleQuote": true, "bracketSpacing": true, - "jsxBracketSameLine": true, + "bracketSameLine": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, diff --git a/examples/example-inferno/package.json b/examples/example-inferno/package.json index dd6662667..8cb9b0347 100644 --- a/examples/example-inferno/package.json +++ b/examples/example-inferno/package.json @@ -41,7 +41,9 @@ "cross-env": "^6.0.3", "express": "^4.14.0", "express-http-proxy": "^1.0.3", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "rimraf": "^3.0.0", "webpack": "^4.41.6", "webpack-cli": "^4.9.2", diff --git a/examples/example-preact/package.json b/examples/example-preact/package.json index 36a2142c9..f5575a34f 100644 --- a/examples/example-preact/package.json +++ b/examples/example-preact/package.json @@ -41,7 +41,9 @@ "cross-env": "^6.0.3", "express": "^4.14.0", "express-http-proxy": "^1.0.3", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "rimraf": "^3.0.0", "webpack": "^4.41.6", "webpack-cli": "^4.9.2", diff --git a/examples/example-react/package.json b/examples/example-react/package.json index e670a8bf6..c7189e1b6 100644 --- a/examples/example-react/package.json +++ b/examples/example-react/package.json @@ -40,7 +40,9 @@ "cross-env": "^6.0.3", "express": "^4.14.0", "express-http-proxy": "^1.0.3", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "rimraf": "^3.0.0", "webpack": "^4.41.6", "webpack-cli": "^4.9.2", diff --git a/packages/fela-bindings/package.json b/packages/fela-bindings/package.json index 02f6dc7cc..492c34a37 100644 --- a/packages/fela-bindings/package.json +++ b/packages/fela-bindings/package.json @@ -56,7 +56,9 @@ "babel-jest": "^26.6.0", "cross-env": "^6.0.3", "fela": "^12.2.1", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "react": "^17.0.2", "rimraf": "^3.0.0" } diff --git a/packages/fela-codemods/package.json b/packages/fela-codemods/package.json index 6a9f36dd1..b99b0b870 100644 --- a/packages/fela-codemods/package.json +++ b/packages/fela-codemods/package.json @@ -55,7 +55,9 @@ "fela": "^12.2.1", "fela-preset-web": "^12.2.1", "fela-tools": "^12.2.1", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "rimraf": "^3.0.0" } } diff --git a/packages/fela-dom/package.json b/packages/fela-dom/package.json index 6aed3a145..199ae4467 100644 --- a/packages/fela-dom/package.json +++ b/packages/fela-dom/package.json @@ -58,7 +58,9 @@ "fela": "^12.2.1", "fela-preset-web": "^12.2.1", "fela-tools": "^12.2.1", - "jest": "^26.6.0", + "jest": "^29.7.0", + "jest-environment-node": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "js-beautify": "^1.14.0", "jsdom": "^16.6.0", "rimraf": "^3.0.0", diff --git a/packages/fela-dom/src/dom/__tests__/__snapshots__/rehydrate-test.js.snap b/packages/fela-dom/src/dom/__tests__/__snapshots__/rehydrate-test.js.snap index 1e953f266..89509d656 100755 --- a/packages/fela-dom/src/dom/__tests__/__snapshots__/rehydrate-test.js.snap +++ b/packages/fela-dom/src/dom/__tests__/__snapshots__/rehydrate-test.js.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Rehydrating from DOM nodes should rehydrate the renderer cache 1`] = ` -Array [ +[ 10, - Object { - " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": Object { + { + " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": { "className": "e", "declaration": "-webkit-background-color:red;background-color:red", "media": "", @@ -13,7 +13,7 @@ Array [ "support": "", "type": "RULE", }, - "(display: grid) .foo.barcolorred": Object { + "(display: grid) .foo.barcolorred": { "className": "h", "declaration": "color:red", "media": "", @@ -22,7 +22,7 @@ Array [ "support": "(display: grid)", "type": "RULE", }, - "(display: grid)colorblue": Object { + "(display: grid)colorblue": { "className": "g", "declaration": "color:blue", "media": "", @@ -31,7 +31,7 @@ Array [ "support": "(display: grid)", "type": "RULE", }, - ":hover> h1colorgreen": Object { + ":hover> h1colorgreen": { "className": "j", "declaration": "color:green", "media": "", @@ -40,7 +40,7 @@ Array [ "support": "", "type": "RULE", }, - ":hovercolorred": Object { + ":hovercolorred": { "className": "i", "declaration": "color:red", "media": "", @@ -49,7 +49,7 @@ Array [ "support": "", "type": "RULE", }, - "WebkitBackgroundColorred;background-color:red": Object { + "WebkitBackgroundColorred;background-color:red": { "className": "c", "declaration": "-webkit-background-color:red;background-color:red", "media": "", @@ -58,7 +58,7 @@ Array [ "support": "", "type": "RULE", }, - "WebkitFlex1;-ms-flex:1;flex:1": Object { + "WebkitFlex1;-ms-flex:1;flex:1": { "className": "d", "declaration": "-webkit-flex:1;-ms-flex:1;flex:1", "media": "", @@ -67,16 +67,16 @@ Array [ "support": "", "type": "RULE", }, - "[alt=\\"Hello\\"]fontSize12px": Object { + "[alt=\"Hello\"]fontSize12px": { "className": "f", "declaration": "font-size:12px", "media": "", - "pseudo": "[alt=\\"Hello\\"]", - "selector": ".f[alt=\\"Hello\\"]", + "pseudo": "[alt=\"Hello\"]", + "selector": ".f[alt=\"Hello\"]", "support": "", "type": "RULE", }, - "coloryellow": Object { + "coloryellow": { "className": "b", "declaration": "color:yellow", "media": "", @@ -90,10 +90,10 @@ Array [ `; exports[`Rehydrating from DOM nodes should rehydrate the renderer cache 2`] = ` -Array [ +[ 10, - Object { - " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": Object { + { + " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": { "className": "e", "declaration": "-webkit-background-color:red;background-color:red", "media": "", @@ -102,7 +102,7 @@ Array [ "support": "", "type": "RULE", }, - "(display: grid) .foo.barcolorred": Object { + "(display: grid) .foo.barcolorred": { "className": "h", "declaration": "color:red", "media": "", @@ -111,7 +111,7 @@ Array [ "support": "(display: grid)", "type": "RULE", }, - "(display: grid)colorblue": Object { + "(display: grid)colorblue": { "className": "g", "declaration": "color:blue", "media": "", @@ -120,7 +120,7 @@ Array [ "support": "(display: grid)", "type": "RULE", }, - ":hover> h1colorgreen": Object { + ":hover> h1colorgreen": { "className": "j", "declaration": "color:green", "media": "", @@ -129,7 +129,7 @@ Array [ "support": "", "type": "RULE", }, - ":hovercolorred": Object { + ":hovercolorred": { "className": "i", "declaration": "color:red", "media": "", @@ -138,7 +138,7 @@ Array [ "support": "", "type": "RULE", }, - "WebkitBackgroundColorred;background-color:red": Object { + "WebkitBackgroundColorred;background-color:red": { "className": "c", "declaration": "-webkit-background-color:red;background-color:red", "media": "", @@ -147,7 +147,7 @@ Array [ "support": "", "type": "RULE", }, - "WebkitFlex1;-ms-flex:1;flex:1": Object { + "WebkitFlex1;-ms-flex:1;flex:1": { "className": "d", "declaration": "-webkit-flex:1;-ms-flex:1;flex:1", "media": "", @@ -156,16 +156,16 @@ Array [ "support": "", "type": "RULE", }, - "[alt=\\"Hello\\"]fontSize12px": Object { + "[alt=\"Hello\"]fontSize12px": { "className": "f", "declaration": "font-size:12px", "media": "", - "pseudo": "[alt=\\"Hello\\"]", - "selector": ".parentClass .f[alt=\\"Hello\\"]", + "pseudo": "[alt=\"Hello\"]", + "selector": ".parentClass .f[alt=\"Hello\"]", "support": "", "type": "RULE", }, - "coloryellow": Object { + "coloryellow": { "className": "b", "declaration": "color:yellow", "media": "", diff --git a/packages/fela-dom/src/dom/__tests__/__snapshots__/render-test.js.snap b/packages/fela-dom/src/dom/__tests__/__snapshots__/render-test.js.snap index 8eabfdb35..261e268b3 100755 --- a/packages/fela-dom/src/dom/__tests__/__snapshots__/render-test.js.snap +++ b/packages/fela-dom/src/dom/__tests__/__snapshots__/render-test.js.snap @@ -4,7 +4,7 @@ exports[`render (development) should correctly sort rules 1`] = ` " - + @@ -16,14 +16,14 @@ exports[`render (development) should create style nodes and render CSS rules 1`] " - - - + @@ -66,7 +66,7 @@ exports[`render (development) should not overwrite rehydrated styles 1`] = ` " - - - + @@ -107,28 +107,28 @@ exports[`render (development) should not render multiple times 1`] = ` `; exports[`render (production) should correctly sort rules 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "color": "blue", }, - "1_.e": Object { + "1_.e": { "color": "red", }, - "2_.c:hover": Object { + "2_.c:hover": { "color": "red", }, - "3_.f:hover": Object { + "3_.f:hover": { "color": "blue", }, - "4_.b:focus-within": Object { + "4_.b:focus-within": { "color": "black", }, - "5_.d:active": Object { + "5_.d:active": { "color": "yellow", }, }, @@ -137,91 +137,91 @@ Array [ `; exports[`render (production) should create style nodes and render CSS rules 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "background-color": "red", }, - "1_.b": Object { + "1_.b": { "color": "blue", }, }, }, - Object { + { "_type": "KEYFRAME", "style": "@-webkit-keyframes k1{0%{color:yellow}100%{color:orange}}@-moz-keyframes k1{0%{color:yellow}100%{color:orange}}@keyframes k1{0%{color:yellow}100%{color:orange}}", }, - Object { + { "_type": "FONT", - "style": "@font-face{font-weight:300;src:url('../Lato.ttf') format('truetype');font-family:\\"Lato\\"}", + "style": "@font-face{font-weight:300;src:url('../Lato.ttf') format('truetype');font-family:\"Lato\"}", }, ] `; exports[`render (production) should not overwrite rehydrated styles 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.b": Object { + "style": { + "0_.b": { "color": "yellow", }, - "1_.f": Object { + "1_.f": { "background-color": "red", }, - "2_.g": Object { + "2_.g": { "color": "blue", }, - "3_.c:hover": Object { + "3_.c:hover": { "color": "red", }, }, }, - Object { + { "_media": "", "_support": "true", "_type": "RULE", - "style": Object { - "(display:flex)": Object { - "0_.e": Object { + "style": { + "(display:flex)": { + "0_.e": { "color": "green", }, }, - "(display:grid)": Object { - "0_.h": Object { + "(display:grid)": { + "0_.h": { "color": "black", }, }, }, }, - Object { + { "_media": "(max-width: 800px)", "_support": false, "_type": "RULE", - "style": Object { - "0_.d": Object { + "style": { + "0_.d": { "color": "blue", }, }, }, - Object { + { "_media": "", "_support": "true", "_type": "RULE", - "style": Object { - "(display:flex)": Object { - "0_.e": Object { + "style": { + "(display:flex)": { + "0_.e": { "color": "green", }, }, - "(display:grid)": Object { - "0_.h": Object { + "(display:grid)": { + "0_.h": { "color": "black", }, }, @@ -231,16 +231,16 @@ Array [ `; exports[`render (production) should not render multiple times 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "background-color": "red", }, - "1_.b": Object { + "1_.b": { "color": "blue", }, }, diff --git a/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createNode-test.js.snap b/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createNode-test.js.snap index 5edee7f19..d66026f6d 100755 --- a/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createNode-test.js.snap +++ b/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createNode-test.js.snap @@ -1,43 +1,43 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Creating a style node should have the correct attributes 1`] = ` -Object { +{ "_media": undefined, "_support": undefined, - "html": "", + "html": "", } `; exports[`Creating a style node should have the correct attributes 2`] = ` -Object { +{ "_media": "(min-width:300px)", "_support": undefined, - "html": "", + "html": "", } `; exports[`Creating a style node should have the correct attributes 3`] = ` -Object { +{ "_media": undefined, "_support": "(display:flex)", - "html": "", + "html": "", } `; exports[`Creating a style node should have the correct attributes 4`] = ` -Object { +{ "_media": "(min-width:300px)", "_support": "(display:flex)", - "html": "", + "html": "", } `; exports[`Creating a style node should respect the correct order 1`] = ` " - - - - - + + + + + " `; diff --git a/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createSubscription-test.js.snap b/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createSubscription-test.js.snap index ff3d33b0b..509f184c9 100755 --- a/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createSubscription-test.js.snap +++ b/packages/fela-dom/src/dom/connection/__tests__/__snapshots__/createSubscription-test.js.snap @@ -1,40 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Subscribing to the DOM should clear all DOM nodes 1`] = `Array []`; +exports[`Subscribing to the DOM should clear all DOM nodes 1`] = `[]`; exports[`Subscribing to the DOM should correctly recreate nodes after clean 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "color": "blue", }, }, }, - Object { + { "_media": "(min-width: 300px)", "_support": false, "_type": "RULE", - "style": Object { - "0_.b": Object { + "style": { + "0_.b": { "color": "red", }, }, }, - Object { + { "_media": "(min-width: 300px) and (max-height: 500px)", "_support": false, "_type": "RULE", - "style": Object { - "0_.c": Object { + "style": { + "0_.c": { "color": "yellow", }, }, }, - Object { + { "_type": "KEYFRAME", "style": "@-webkit-keyframes k1{from{color:red}to{color:blue}}@-moz-keyframes k1{from{color:red}to{color:blue}}@keyframes k1{from{color:red}to{color:blue}}", }, @@ -42,8 +42,8 @@ Array [ `; exports[`Subscribing to the DOM should render keyframes to a DOM node 1`] = ` -Array [ - Object { +[ + { "_type": "KEYFRAME", "style": "@-webkit-keyframes k1{from{color:red}to{color:blue}}@-moz-keyframes k1{from{color:red}to{color:blue}}@keyframes k1{from{color:red}to{color:blue}}", }, @@ -51,56 +51,56 @@ Array [ `; exports[`Subscribing to the DOM should render media rules and support rules to single DOM nodes (devMode) 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "color": "blue", }, }, }, - Object { + { "_media": "", "_support": "true", "_type": "RULE", - "style": Object { - "(display: flex)": Object { - "0_.b": Object { + "style": { + "(display: flex)": { + "0_.b": { "display": "flex", }, }, }, }, - Object { + { "_media": "(min-width: 300px)", "_support": false, "_type": "RULE", - "style": Object { - "0_.c": Object { + "style": { + "0_.c": { "color": "red", }, }, }, - Object { + { "_media": "(min-width: 300px) and (max-height: 500px)", "_support": false, "_type": "RULE", - "style": Object { - "0_.d": Object { + "style": { + "0_.d": { "color": "yellow", }, }, }, - Object { + { "_media": "(min-width: 300px) and (max-height: 500px)", "_support": "true", "_type": "RULE", - "style": Object { - "(display: grid)": Object { - "0_.e": Object { + "style": { + "(display: grid)": { + "0_.e": { "display": "grid", }, }, @@ -110,19 +110,19 @@ Array [ `; exports[`Subscribing to the DOM should render rules to a DOM node 1`] = ` -Array [ - Object { +[ + { "_media": "", "_support": false, "_type": "RULE", - "style": Object { - "0_.a": Object { + "style": { + "0_.a": { "background-color": "red", }, - "1_.b": Object { + "1_.b": { "color": "blue", }, - "2_.c:hover": Object { + "2_.c:hover": { "color": "red", }, }, @@ -131,8 +131,8 @@ Array [ `; exports[`Subscribing to the DOM should render static styles to a DOM node 1`] = ` -Array [ - Object { +[ + { "_type": "STATIC", "style": "body, html{background-color:red;color:blue}", }, diff --git a/packages/fela-dom/src/dom/connection/createNode.js b/packages/fela-dom/src/dom/connection/createNode.js index b4f3fe6a9..e068738b0 100644 --- a/packages/fela-dom/src/dom/connection/createNode.js +++ b/packages/fela-dom/src/dom/connection/createNode.js @@ -1,5 +1,3 @@ -import { objectReduce } from 'fast-loops' - import getNodeSibling from './getNodeSibling' export default function createNode( @@ -24,13 +22,13 @@ export default function createNode( } // applying custom style tag attributes - for (let attribute in styleNodeAttributes) { + for (const attribute in styleNodeAttributes) { node.setAttribute(attribute, styleNodeAttributes[attribute]) } // also apply attributes set globally with window.FelaConfig - if (typeof window !== undefined && window.FelaConfig) { - for (let attribute in window.FelaConfig.styleNodeAttributes) { + if (!(typeof window === 'undefined') && window.FelaConfig) { + for (const attribute in window.FelaConfig.styleNodeAttributes) { node.setAttribute( attribute, window.FelaConfig.styleNodeAttributes[attribute] diff --git a/packages/fela-dom/src/dom/connection/createSubscription.js b/packages/fela-dom/src/dom/connection/createSubscription.js index 0509b3f1b..fcbb71cb6 100644 --- a/packages/fela-dom/src/dom/connection/createSubscription.js +++ b/packages/fela-dom/src/dom/connection/createSubscription.js @@ -38,8 +38,8 @@ export default function createSubscription( node.textContent += change.fontFace } break - case STATIC_TYPE: - let css = change.selector + case STATIC_TYPE: { + const css = change.selector ? generateCSSRule(change.selector, change.css) : change.css @@ -47,6 +47,7 @@ export default function createSubscription( node.textContent += css } break + } case RULE_TYPE: insertRule(change, renderer, node) break diff --git a/packages/fela-dom/src/dom/connection/getNodeSibling.js b/packages/fela-dom/src/dom/connection/getNodeSibling.js index c161cb885..0a4d1d66d 100644 --- a/packages/fela-dom/src/dom/connection/getNodeSibling.js +++ b/packages/fela-dom/src/dom/connection/getNodeSibling.js @@ -10,7 +10,7 @@ export default function getNodeSibling( case STATIC_TYPE: case KEYFRAME_TYPE: return nodes[0] - case RULE_TYPE: + case RULE_TYPE: { const mediaNodes = nodes.map((node) => node.media) const filteredNodes = mediaNodes.filter((m) => m.length !== 0) @@ -51,5 +51,9 @@ export default function getNodeSibling( return nodes.find((el) => el.media === insertMedia) } } + return undefined + } + default: + return undefined } } diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateKeyframes-test.js.snap b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateKeyframes-test.js.snap new file mode 100644 index 000000000..85fe063ff --- /dev/null +++ b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateKeyframes-test.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Rehydrating keyframes should match all keyframes 1`] = ` +{ + "{0% {opacity:0;}}": { + "keyframe": "@keyframes frameName1{0% {opacity:0;}}", + "name": "frameName1", + "type": "KEYFRAME", + }, + "{100%{opacity: 1;}}": { + "keyframe": "@keyframes frameName2{100%{opacity: 1;}}", + "name": "frameName2", + "type": "KEYFRAME", + }, +} +`; diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap index 343a6a54d..1432a0dc0 100755 --- a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap +++ b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateRules-test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Rehydrating rules should rehydrate additional class names correctly 1`] = ` -Object { - ".rc-tooltip.rc-tooltip-placement-topRightpaddingLeft20px": Object { +{ + ".rc-tooltip.rc-tooltip-placement-topRightpaddingLeft20px": { "className": "a", "declaration": "padding-left:20px", "media": "", @@ -15,8 +15,8 @@ Object { `; exports[`Rehydrating rules should rehydrate css custom properties 1`] = ` -Object { - "--custom-property12px": Object { +{ + "--custom-property12px": { "className": "a", "declaration": "--custom-property:12px", "media": "", @@ -29,8 +29,8 @@ Object { `; exports[`Rehydrating rules should rehydrate prioritized longhand rules 1`] = ` -Object { - ":hovercolorred": Object { +{ + ":hovercolorred": { "className": "c", "declaration": "color:red", "media": "", @@ -39,7 +39,7 @@ Object { "support": "", "type": "RULE", }, - "padding10px": Object { + "padding10px": { "className": "b", "declaration": "padding:10px", "media": "", @@ -48,7 +48,7 @@ Object { "support": "", "type": "RULE", }, - "paddingLeft20px": Object { + "paddingLeft20px": { "className": "a", "declaration": "padding-left:20px", "media": "", @@ -61,8 +61,8 @@ Object { `; exports[`Rehydrating rules should rehydrate the renderer cache 1`] = ` -Object { - ":hover:activeborderColor2px solid rgb(255, 255, 0)": Object { +{ + ":hover:activeborderColor2px solid rgb(255, 255, 0)": { "className": "c", "declaration": "border-color:2px solid rgb(255, 255, 0)", "media": "", @@ -71,7 +71,7 @@ Object { "support": "", "type": "RULE", }, - "colorblue": Object { + "colorblue": { "className": "b", "declaration": "color:blue", "media": "", @@ -80,7 +80,7 @@ Object { "support": "", "type": "RULE", }, - "colorred": Object { + "colorred": { "className": "a", "declaration": "color:red", "media": "", @@ -93,8 +93,8 @@ Object { `; exports[`Rehydrating rules should rehydrate the renderer cache with specifity prefix 1`] = ` -Object { - ":hover:activeborderColor2px solid rgb(255, 255, 0)": Object { +{ + ":hover:activeborderColor2px solid rgb(255, 255, 0)": { "className": "c", "declaration": "border-color:2px solid rgb(255, 255, 0)", "media": "", @@ -103,7 +103,7 @@ Object { "support": "", "type": "RULE", }, - "colorblue": Object { + "colorblue": { "className": "b", "declaration": "color:blue", "media": "", @@ -112,7 +112,7 @@ Object { "support": "", "type": "RULE", }, - "colorred": Object { + "colorred": { "className": "a", "declaration": "color:red", "media": "", diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateSupportRules-test.js.snap b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateSupportRules-test.js.snap index 120227811..3f251aab1 100755 --- a/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateSupportRules-test.js.snap +++ b/packages/fela-dom/src/dom/rehydration/__tests__/__snapshots__/rehydrateSupportRules-test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Rehydrating @supports rules should rehydrate the renderer cache 1`] = ` -Object { - "(display:grid) and (display:flex)colorgreen": Object { +{ + "(display:grid) and (display:flex)colorgreen": { "className": "c", "declaration": "color:green", "media": "", @@ -11,7 +11,7 @@ Object { "support": "(display:grid) and (display:flex)", "type": "RULE", }, - "(display:grid)colorblue": Object { + "(display:grid)colorblue": { "className": "b", "declaration": "color:blue", "media": "", @@ -20,7 +20,7 @@ Object { "support": "(display:grid)", "type": "RULE", }, - "(display:grid)colorred": Object { + "(display:grid)colorred": { "className": "a", "declaration": "color:red", "media": "", @@ -33,8 +33,8 @@ Object { `; exports[`Rehydrating @supports rules should rehydrate the renderer cache with specifityPrefix 1`] = ` -Object { - "(display:grid) and (display:flex)colorgreen": Object { +{ + "(display:grid) and (display:flex)colorgreen": { "className": "c", "declaration": "color:green", "media": "", @@ -43,7 +43,7 @@ Object { "support": "(display:grid) and (display:flex)", "type": "RULE", }, - "(display:grid)colorblue": Object { + "(display:grid)colorblue": { "className": "b", "declaration": "color:blue", "media": "", @@ -52,7 +52,7 @@ Object { "support": "(display:grid)", "type": "RULE", }, - "(display:grid)colorred": Object { + "(display:grid)colorred": { "className": "a", "declaration": "color:red", "media": "", diff --git a/packages/fela-dom/src/dom/rehydration/__tests__/rehydrateKeyframes-test.js b/packages/fela-dom/src/dom/rehydration/__tests__/rehydrateKeyframes-test.js new file mode 100644 index 000000000..cc560637a --- /dev/null +++ b/packages/fela-dom/src/dom/rehydration/__tests__/rehydrateKeyframes-test.js @@ -0,0 +1,11 @@ +import rehydrateKeyframes from '../rehydrateKeyframes' + +describe('Rehydrating keyframes', () => { + it('should match all keyframes', () => { + expect( + rehydrateKeyframes( + '@keyframes frameName1{0% {opacity:0;}}; @keyframes frameName2{100%{opacity: 1;}}' + ) + ).toMatchSnapshot() + }) +}) diff --git a/packages/fela-dom/src/dom/rehydration/rehydrateKeyframes.js b/packages/fela-dom/src/dom/rehydration/rehydrateKeyframes.js index 6bd4335f7..26ca4aa6d 100644 --- a/packages/fela-dom/src/dom/rehydration/rehydrateKeyframes.js +++ b/packages/fela-dom/src/dom/rehydration/rehydrateKeyframes.js @@ -1,12 +1,12 @@ -import { KEYFRAME_TYPE, generateDeclarationReference } from 'fela-utils' +import { KEYFRAME_TYPE } from 'fela-utils' const RE = /@(-webkit-|-moz-)?keyframes ([a-z_][a-z0-9-_]*)(\{.*?(?=}})}})/gi export default function rehydrateKeyframes(css, cache = {}) { - let decl + const matches = css.matchAll(RE) - while ((decl = RE.exec(css))) { - const [keyframe, prefix, animationName, reference] = decl + for (const match of matches) { + const [keyframe, , animationName, reference] = match if (!cache[reference]) { cache[reference] = { diff --git a/packages/fela-dom/src/dom/rehydration/rehydrateRules.js b/packages/fela-dom/src/dom/rehydration/rehydrateRules.js index 78574bf1a..ab9b532b6 100644 --- a/packages/fela-dom/src/dom/rehydration/rehydrateRules.js +++ b/packages/fela-dom/src/dom/rehydration/rehydrateRules.js @@ -27,7 +27,7 @@ function rehydrateClassList(classList, className) { if (classList) { const regex = new RegExp(`(([.]${className})+)?(.*)?`, '') - const [match, repeated, selector, other = ''] = classList.match(regex) + const [, repeated, selector, other = ''] = classList.match(regex) return [other, repeated ? repeated.length / selector.length + 1 : 1] } diff --git a/packages/fela-dom/src/server/__tests__/__snapshots__/renderToMarkup-test.js.snap b/packages/fela-dom/src/server/__tests__/__snapshots__/renderToMarkup-test.js.snap index 477f947a3..952a0610a 100755 --- a/packages/fela-dom/src/server/__tests__/__snapshots__/renderToMarkup-test.js.snap +++ b/packages/fela-dom/src/server/__tests__/__snapshots__/renderToMarkup-test.js.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Rendering to HTML markup should add custom style attributes 1`] = ` -" - - - - -