feat(package): update dependencies and migrate changes

release-npm
tobua · Feb 9, 2023 · 500319f · 500319f
1 parent f766b73
commit 500319f
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 58 deletions.
diff --git a/demo/css-in-js/index.tsx b/demo/css-in-js/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Global, css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { wasser, font, configure, head } from 'wasser'
@@ -17,10 +17,9 @@ const Heading: any = styled('h1')`
   ${font(50)}
 `
 
-render(
+createRoot(document.body as HTMLElement).render(
   <Wrapper>
     <Global styles={css(head())} />
     <Heading>Scalable Properties</Heading>
-  </Wrapper>,
-  document.body
+  </Wrapper>
 )
diff --git a/demo/css-in-js/package.json b/demo/css-in-js/package.json
@@ -1,10 +1,10 @@
 {
   "dependencies": {
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "papua": "^0.1.39",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "papua": "^3.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "localDependencies": {
     "wasser": "../.."

diff --git a/demo/sass/package.json b/demo/sass/package.json
@@ -1,10 +1,10 @@
 {
   "dependencies": {
-    "css-loader": "^6.7.0",
-    "exmpl": "^2.2.1",
-    "node-sass": "^7.0.1",
-    "papua": "0.1.39",
-    "sass-loader": "^12.6.0",
+    "css-loader": "^6.7.3",
+    "exmpl": "^3.0.0",
+    "node-sass": "^8.0.0",
+    "papua": "3.0.1",
+    "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1"
   },
   "localDependencies": {

diff --git a/demo/stitches/index.tsx b/demo/stitches/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStitches } from '@stitches/react'
 import { wasser, fontObject, configure, globalVariables } from 'wasser'
 
@@ -20,9 +20,8 @@ const Heading = styled('h1', {
   ...fontObject(50),
 })
 
-render(
+createRoot(document.body as HTMLElement).render(
   <Wrapper>
     <Heading>Scalable Properties</Heading>
-  </Wrapper>,
-  document.body
+  </Wrapper>
 )
diff --git a/demo/stitches/package.json b/demo/stitches/package.json
@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@stitches/react": "^1.2.7",
-    "papua": "^0.1.39",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@stitches/react": "^1.2.8",
+    "papua": "^3.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "localDependencies": {
     "wasser": "../.."

diff --git a/package.json b/package.json
@@ -47,12 +47,12 @@
     "frontend"
   ],
   "devDependencies": {
-    "async": "^3.2.3",
-    "jest-puppeteer": "^6.1.0",
-    "less": "^4.1.2",
-    "node-sass": "^7.0.1",
-    "padua": "0.5.3",
-    "puppeteer": "^13.4.1"
+    "async": "^3.2.4",
+    "jest-puppeteer": "^7.0.0",
+    "less": "^4.1.3",
+    "node-sass": "^8.0.0",
+    "padua": "1.1.0",
+    "puppeteer": "^19.6.3"
   },
   "prettier": "padua/configuration/.prettierrc.json",
   "eslintConfig": {
@@ -76,6 +76,6 @@
     }
   },
   "engines": {
-    "node": ">= 14"
+    "node": ">= 16"
   }
 }
diff --git a/test/css-in-js.test.js b/test/css-in-js.test.js
@@ -20,7 +20,7 @@ test('Has possible values on viewport somewhre between min and max.', async () =
     body: twoElementBody,
     widths: [1000],
     // Executed inside puppeteer, will only return results.
-    selector: () => {
+    selector: function Selector() {
       const regularText = document.querySelector('#regular-text')
       const regularTextStyle = window.getComputedStyle(regularText)
       const divElement = document.querySelector('#div-element')
@@ -72,12 +72,8 @@ test('Max and min values reached on maximum viewport.', async () => {
     widths: [defaults.viewportMin, defaults.viewportMax],
     // Executed inside puppeteer, will only return results.
     selector: () => {
-      const regularTextStyle = window.getComputedStyle(
-        document.querySelector('#regular-text')
-      )
-      const divElementStyle = window.getComputedStyle(
-        document.querySelector('#div-element')
-      )
+      const regularTextStyle = window.getComputedStyle(document.querySelector('#regular-text'))
+      const divElementStyle = window.getComputedStyle(document.querySelector('#div-element'))
       return {
         regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10),
         divElementHeight: parseFloat(divElementStyle.height, 10),
@@ -116,12 +112,8 @@ test('Ratios can be configured.', async () => {
     widths: [defaults.viewportMin, 910, defaults.viewportMax],
     // Executed inside puppeteer, will only return results.
     selector: () => {
-      const regularTextStyle = window.getComputedStyle(
-        document.querySelector('#regular-text')
-      )
-      const divElementStyle = window.getComputedStyle(
-        document.querySelector('#div-element')
-      )
+      const regularTextStyle = window.getComputedStyle(document.querySelector('#regular-text'))
+      const divElementStyle = window.getComputedStyle(document.querySelector('#div-element'))
       return {
         regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10),
         divElementHeight: parseFloat(divElementStyle.height, 10),

diff --git a/test/utility/evaluate.js b/test/utility/evaluate.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/extensions
 import mapSeries from 'async/mapSeries'
 import sass from 'node-sass'
 import less from 'less'
@@ -20,21 +19,16 @@ export const evaluate = async ({ styles, body, widths, selector }) => {
 
   page.setContent(html)
 
-  const results = await new Promise((done) =>
-    // Have to be run in series as browser instance is shared.
-    mapSeries(
-      widths,
-      async (width) => {
-        page.setViewport({
-          width,
-          height: 1000,
-        })
-
-        return page.evaluate(selector)
-      },
-      (_, result) => done(result)
-    )
-  )
+  const results = await mapSeries(widths, async (width) => {
+    page.setViewport({
+      width,
+      height: 1000,
+    })
+
+    const document = await page.$('document')
+
+    return page.evaluate(selector, document)
+  })
 
   const result = {}