diff --git a/demo/css-in-js/index.tsx b/demo/css-in-js/index.tsx
index d5ca63c..89c0252 100644
--- 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(
Scalable Properties
- ,
- document.body
+
)
diff --git a/demo/css-in-js/package.json b/demo/css-in-js/package.json
index 8ffa7ed..1b79b85 100644
--- 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
index aab72e4..aec8332 100644
--- 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
index 11f9cf4..63b9ee1 100644
--- 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(
Scalable Properties
- ,
- document.body
+
)
diff --git a/demo/stitches/package.json b/demo/stitches/package.json
index 7b5f8e7..96e59d6 100644
--- 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
index 6dcc037..3e28475 100644
--- 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
index 4168272..7e0cf79 100644
--- 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
index 4198785..8b420a6 100644
--- 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 = {}