From 8c4dfb0d11f0da9058b97f3b9207343ca006ce3a Mon Sep 17 00:00:00 2001 From: Matthias Giger Date: Sat, 2 Mar 2024 13:14:39 +0100 Subject: [PATCH] feat(package): migrate to Bun, TypeScript, Playwright and dart-sass release-npm --- .github/workflows/push.yml | 10 +- .gitignore | 6 +- README.md | 5 +- _wasser.scss | 6 +- demo/css-in-js/package.json | 4 +- demo/sass/package.json | 10 +- demo/stitches/package.json | 2 +- docs/basic/basic.css | 31 ---- docs/basic/body-padding/body-padding.css | 43 ----- docs/basic/font/font.css | 106 ------------ docs/less/less.css | 104 ----------- docs/page/page.css | 163 ------------------ docs/performance/performance.css | 75 -------- index.d.ts | 39 ----- index.js => index.ts | 18 +- package.json | 49 ++---- test/{css-in-js.test.js => css-in-js.test.ts} | 46 +++-- test/playwright.config.ts | 11 ++ test/{sass-less.test.js => sass-less.test.ts} | 9 +- test/tsconfig.json | 4 + test/utility/{defaults.js => defaults.ts} | 8 +- test/utility/evaluate.js | 40 ----- test/utility/evaluate.ts | 41 +++++ 23 files changed, 148 insertions(+), 682 deletions(-) delete mode 100644 docs/basic/basic.css delete mode 100644 docs/basic/body-padding/body-padding.css delete mode 100644 docs/basic/font/font.css delete mode 100644 docs/less/less.css delete mode 100644 docs/page/page.css delete mode 100644 docs/performance/performance.css delete mode 100644 index.d.ts rename index.js => index.ts (84%) rename test/{css-in-js.test.js => css-in-js.test.ts} (77%) create mode 100644 test/playwright.config.ts rename test/{sass-less.test.js => sass-less.test.ts} (97%) create mode 100644 test/tsconfig.json rename test/utility/{defaults.js => defaults.ts} (75%) delete mode 100644 test/utility/evaluate.js create mode 100644 test/utility/evaluate.ts diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 00ea4bf..a076940 100644 --- a/.github/workflows/push.yml +++ b/.github/workflows/push.yml @@ -12,11 +12,13 @@ jobs: contents: write steps: - uses: actions/checkout@v4 - - run: npm install - - name: 🧪 Test - run: npm test + - uses: oven-sh/setup-bun@v1 + - run: bun install + - run: bunx playwright install chromium --with-deps - name: 🚧 Build - run: npm run build + run: bun run build + - name: 🧪 Test + run: bun run test - name: 📢 Release uses: tobua/release-npm-action@v3 with: diff --git a/.gitignore b/.gitignore index 2b634ad..d0d770d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,9 @@ node_modules package-lock.json +bun.lockb test/manual/dist -jsconfig.json +test-results +docs/*/**/*.css +tsconfig.json +!test/tsconfig.json dist diff --git a/README.md b/README.md index 6352a0c..fb329a0 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,9 @@ Create highly responsive and still pixel-perfect websites. +> [!TIP] +> A successor JavaScript-only library called [optica](https://github.com/tobua/optica) has been released. It requires the [`clamp()`](https://caniuse.com/css-math-functions) CSS math function but no longer needs any breakpoints. + ## Use Cases Best suited when you have a desktop and a mobile design of the site. Wasser will @@ -53,7 +56,7 @@ render( Scalable Properties , - document.body + document.body, ) ``` diff --git a/_wasser.scss b/_wasser.scss index 080c802..10aada9 100644 --- a/_wasser.scss +++ b/_wasser.scss @@ -1,3 +1,5 @@ +@use 'sass:math'; + $wasser-viewport-min: 320 !default; $wasser-viewport-max: 1500 !default; $wasser-scaling-ratio: 1.5 !default; @@ -13,7 +15,7 @@ $wasser-font-size-to-line-height-ratio: $wasser-scaling-ratio !default; * @param {number} $max — The max value for the property * @param {number|string} [$min] - The min value ot the property */ -@mixin wasser($property, $max, $min: $max / $wasser-scaling-ratio) { +@mixin wasser($property, $max, $min: math.div($max, $wasser-scaling-ratio)) { @if type-of($max) != number { @error 'wasser: A number is expected as the second parameter.'; } @@ -32,7 +34,7 @@ $wasser-font-size-to-line-height-ratio: $wasser-scaling-ratio !default; */ @mixin w-font( $max, - $min: ($max / $wasser-scaling-ratio-font), + $min: math.div($max, $wasser-scaling-ratio-font), $line-height-ratio: $wasser-font-size-to-line-height-ratio ) { @if type-of($max) != number { diff --git a/demo/css-in-js/package.json b/demo/css-in-js/package.json index a507dd6..9d899cf 100644 --- a/demo/css-in-js/package.json +++ b/demo/css-in-js/package.json @@ -1,8 +1,8 @@ { "dependencies": { - "@emotion/react": "^11.11.3", + "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", - "papua": "^5.9.6", + "papua": "^5.9.7", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/demo/sass/package.json b/demo/sass/package.json index eec4e33..0460af6 100644 --- a/demo/sass/package.json +++ b/demo/sass/package.json @@ -1,10 +1,10 @@ { "dependencies": { - "css-loader": "^6.9.0", - "exmpl": "^3.0.0", - "node-sass": "^9.0.0", - "papua": "5.9.6", - "sass-loader": "^13.3.3", + "css-loader": "^6.10.0", + "exmpl": "^3.1.0", + "papua": "5.9.7", + "sass": "^1.71.1", + "sass-loader": "^14.1.1", "style-loader": "^3.3.4" }, "localDependencies": { diff --git a/demo/stitches/package.json b/demo/stitches/package.json index d0d6e56..0305fd4 100644 --- a/demo/stitches/package.json +++ b/demo/stitches/package.json @@ -1,7 +1,7 @@ { "dependencies": { "@stitches/react": "^1.2.8", - "papua": "^5.9.6", + "papua": "^5.9.7", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/docs/basic/basic.css b/docs/basic/basic.css deleted file mode 100644 index 2e2598b..0000000 --- a/docs/basic/basic.css +++ /dev/null @@ -1,31 +0,0 @@ -@charset "UTF-8"; -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} $property - The property to be scaled - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - * @param {string} [$property] - The property, defaults to padding - */ -body { - padding: calc( 33.33333px + (50 - 33.33333) * (100vw - 320px) / (1500 - 319)); - margin: 0; } - @media (min-width: 1500px) { - body { - padding: 50px; } } - @media (max-width: 320px) { - body { - padding: 33.33333px; } } - @media print { - body { - padding: 50px; } } diff --git a/docs/basic/body-padding/body-padding.css b/docs/basic/body-padding/body-padding.css deleted file mode 100644 index 981bd22..0000000 --- a/docs/basic/body-padding/body-padding.css +++ /dev/null @@ -1,43 +0,0 @@ -@charset "UTF-8"; -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} $property - The property to be scaled - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - * @param {string} [$property] - The property, defaults to padding - */ -body { - margin: calc( 26.66667px + (40 - 26.66667) * (100vw - 320px) / (1500 - 319)); } - @media (min-width: 1500px) { - body { - margin: 40px; } } - @media (max-width: 320px) { - body { - margin: 26.66667px; } } - @media print { - body { - margin: 40px; } } - -.inner { - padding: calc( 5px + (20 - 5) * (100vw - 320px) / (1500 - 319)); - background: lightgray; } - @media (min-width: 1500px) { - .inner { - padding: 20px; } } - @media (max-width: 320px) { - .inner { - padding: 5px; } } - @media print { - .inner { - padding: 20px; } } diff --git a/docs/basic/font/font.css b/docs/basic/font/font.css deleted file mode 100644 index 8fb15aa..0000000 --- a/docs/basic/font/font.css +++ /dev/null @@ -1,106 +0,0 @@ -@charset "UTF-8"; -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} $property - The property to be scaled - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - * @param {string} [$property] - The property, defaults to padding - */ -.t-title { - font-size: calc( 32px + (40 - 32) * (100vw - 320px) / (1500 - 319)); - line-height: calc( 48px + (60 - 48) * (100vw - 320px) / (1500 - 319)); } - @media (min-width: 1500px) { - .t-title { - font-size: 40px; } } - @media (max-width: 320px) { - .t-title { - font-size: 32px; } } - @media print { - .t-title { - font-size: 40px; } } - @media (min-width: 1500px) { - .t-title { - line-height: 60px; } } - @media (max-width: 320px) { - .t-title { - line-height: 48px; } } - @media print { - .t-title { - line-height: 60px; } } - -.t-heading { - font-size: calc( 24px + (30 - 24) * (100vw - 320px) / (1500 - 319)); - line-height: calc( 36px + (45 - 36) * (100vw - 320px) / (1500 - 319)); } - @media (min-width: 1500px) { - .t-heading { - font-size: 30px; } } - @media (max-width: 320px) { - .t-heading { - font-size: 24px; } } - @media print { - .t-heading { - font-size: 30px; } } - @media (min-width: 1500px) { - .t-heading { - line-height: 45px; } } - @media (max-width: 320px) { - .t-heading { - line-height: 36px; } } - @media print { - .t-heading { - line-height: 45px; } } - -.t-subheading { - font-size: calc( 20px + (25 - 20) * (100vw - 320px) / (1500 - 319)); - line-height: calc( 30px + (37.5 - 30) * (100vw - 320px) / (1500 - 319)); } - @media (min-width: 1500px) { - .t-subheading { - font-size: 25px; } } - @media (max-width: 320px) { - .t-subheading { - font-size: 20px; } } - @media print { - .t-subheading { - font-size: 25px; } } - @media (min-width: 1500px) { - .t-subheading { - line-height: 37.5px; } } - @media (max-width: 320px) { - .t-subheading { - line-height: 30px; } } - @media print { - .t-subheading { - line-height: 37.5px; } } - -.t-text { - font-size: calc( 12.8px + (16 - 12.8) * (100vw - 320px) / (1500 - 319)); - line-height: calc( 19.2px + (24 - 19.2) * (100vw - 320px) / (1500 - 319)); } - @media (min-width: 1500px) { - .t-text { - font-size: 16px; } } - @media (max-width: 320px) { - .t-text { - font-size: 12.8px; } } - @media print { - .t-text { - font-size: 16px; } } - @media (min-width: 1500px) { - .t-text { - line-height: 24px; } } - @media (max-width: 320px) { - .t-text { - line-height: 19.2px; } } - @media print { - .t-text { - line-height: 24px; } } diff --git a/docs/less/less.css b/docs/less/less.css deleted file mode 100644 index ad94f1f..0000000 --- a/docs/less/less.css +++ /dev/null @@ -1,104 +0,0 @@ -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} @property - The property to be scaled - * @param {number} @max — The max value for the property - * @param {number|string} [@min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} @max — The max value for the property - * @param {number|string} [@min] - The min value ot the property - * @param {string} [@property] - The property, defaults to padding - */ -body { - padding: calc(20px + (40 - 20) * (100vw - 500px) / (1000)); -} -@media (min-width: 1500px) { - body { - padding: 40px; - } -} -@media (max-width: 500px) { - body { - padding: 20px; - } -} -@media print { - body { - padding: 40px; - } -} -h1 { - font-size: calc(10px + (40 - 10) * (100vw - 500px) / (1000)); - line-height: calc(20px + (80 - 20) * (100vw - 500px) / (1000)); - padding: calc(2.5px + (5 - 2.5) * (100vw - 500px) / (1000)); - border-width: calc(5px + (10 - 5) * (100vw - 500px) / (1000)); - border-style: solid; - border-color: lightblue; -} -@media (min-width: 1500px) { - h1 { - font-size: 40px; - } -} -@media (max-width: 500px) { - h1 { - font-size: 10px; - } -} -@media print { - h1 { - font-size: 40px; - } -} -@media (min-width: 1500px) { - h1 { - line-height: 80px; - } -} -@media (max-width: 500px) { - h1 { - line-height: 20px; - } -} -@media print { - h1 { - line-height: 80px; - } -} -@media (min-width: 1500px) { - h1 { - padding: 5px; - } -} -@media (max-width: 500px) { - h1 { - padding: 2.5px; - } -} -@media print { - h1 { - padding: 5px; - } -} -@media (min-width: 1500px) { - h1 { - border-width: 10px; - } -} -@media (max-width: 500px) { - h1 { - border-width: 5px; - } -} -@media print { - h1 { - border-width: 10px; - } -} diff --git a/docs/page/page.css b/docs/page/page.css deleted file mode 100644 index fd5a8fe..0000000 --- a/docs/page/page.css +++ /dev/null @@ -1,163 +0,0 @@ -@charset "UTF-8"; -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} $property - The property to be scaled - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - * @param {string} [$property] - The property, defaults to padding - */ -html { - height: 100vh; } - -body { - height: 100%; - box-sizing: border-box; - margin: 0; - padding: 0; } - -.body { - max-width: calc( 600px + (1000 - 600) * (100vw - 320px) / (1500 - 319)); - padding: calc( 13.33333px + (20 - 13.33333) * (100vw - 320px) / (1500 - 319)); - display: flex; - flex-direction: column; - justify-content: center; - height: 100vh; - margin: 0 auto; - box-sizing: border-box; } - @media (min-width: 1500px) { - .body { - max-width: 1000px; } } - @media (max-width: 320px) { - .body { - max-width: 600px; } } - @media print { - .body { - max-width: 1000px; } } - @media (min-width: 1500px) { - .body { - padding: 20px; } } - @media (max-width: 320px) { - .body { - padding: 13.33333px; } } - @media print { - .body { - padding: 20px; } } - -.header { - height: calc( 100px + (300 - 100) * (100vw - 320px) / (1500 - 319)); - position: relative; - background: #d5d5d5; } - @media (min-width: 1500px) { - .header { - height: 300px; } } - @media (max-width: 320px) { - .header { - height: 100px; } } - @media print { - .header { - height: 300px; } } - .header .title { - left: calc( 10px + (20 - 10) * (100vw - 320px) / (1500 - 319)); - bottom: calc( 5px + (10 - 5) * (100vw - 320px) / (1500 - 319)); - font-size: calc( 10px + (40 - 10) * (100vw - 320px) / (1500 - 319)); - line-height: calc( 15px + (60 - 15) * (100vw - 320px) / (1500 - 319)); - position: absolute; } - @media (min-width: 1500px) { - .header .title { - left: 20px; } } - @media (max-width: 320px) { - .header .title { - left: 10px; } } - @media print { - .header .title { - left: 20px; } } - @media (min-width: 1500px) { - .header .title { - bottom: 10px; } } - @media (max-width: 320px) { - .header .title { - bottom: 5px; } } - @media print { - .header .title { - bottom: 10px; } } - @media (min-width: 1500px) { - .header .title { - font-size: 40px; } } - @media (max-width: 320px) { - .header .title { - font-size: 10px; } } - @media print { - .header .title { - font-size: 40px; } } - @media (min-width: 1500px) { - .header .title { - line-height: 60px; } } - @media (max-width: 320px) { - .header .title { - line-height: 15px; } } - @media print { - .header .title { - line-height: 60px; } } - -.content { - max-width: calc( 600px + (1000 - 600) * (100vw - 320px) / (1500 - 319)); - padding: calc( 13.33333px + (20 - 13.33333) * (100vw - 320px) / (1500 - 319)); - display: flex; - flex: 1; } - @media (min-width: 1500px) { - .content { - max-width: 1000px; } } - @media (max-width: 320px) { - .content { - max-width: 600px; } } - @media print { - .content { - max-width: 1000px; } } - @media (min-width: 1500px) { - .content { - padding: 20px; } } - @media (max-width: 320px) { - .content { - padding: 13.33333px; } } - @media print { - .content { - padding: 20px; } } - .content .wave { - display: flex; - flex: 1; - max-width: 100%; } - -.footer { - height: calc( 30px + (50 - 30) * (100vw - 320px) / (1500 - 319)); - bottom: calc( 5px + (10 - 5) * (100vw - 320px) / (1500 - 319)); - display: flex; - background: #d5d5d5; } - @media (min-width: 1500px) { - .footer { - height: 50px; } } - @media (max-width: 320px) { - .footer { - height: 30px; } } - @media print { - .footer { - height: 50px; } } - @media (min-width: 1500px) { - .footer { - bottom: 10px; } } - @media (max-width: 320px) { - .footer { - bottom: 5px; } } - @media print { - .footer { - bottom: 10px; } } diff --git a/docs/performance/performance.css b/docs/performance/performance.css deleted file mode 100644 index 05bd73f..0000000 --- a/docs/performance/performance.css +++ /dev/null @@ -1,75 +0,0 @@ -@charset "UTF-8"; -/** - * Basic wasser mixin, generates responsive property. - * --- - * @access public - * --- - * @param {string} $property - The property to be scaled - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - */ -/** - * Basic wasser mixin for responsive typography. - * --- - * @access public - * --- - * @param {number} $max — The max value for the property - * @param {number|string} [$min] - The min value ot the property - * @param {string} [$property] - The property, defaults to padding - */ -#container { - display: flex; } - -#regularContainer, -#wasserContainer { - display: flex; - flex-basis: 50%; - flex-direction: column; } - -#regular, -#wasser { - display: flex; - flex-wrap: wrap; } - -.dynamic, -.static { - flex-basis: 20%; } - -.dynamic { - margin: calc( 3.33333px + (5 - 3.33333) * (100vw - 320px) / (1500 - 319)); - border-width: calc( 6.66667px + (10 - 6.66667) * (100vw - 320px) / (1500 - 319)); - padding: calc( 3.33333px + (5 - 3.33333) * (100vw - 320px) / (1500 - 319)); - border-color: black; - border-style: solid; } - @media (min-width: 1500px) { - .dynamic { - margin: 5px; } } - @media (max-width: 320px) { - .dynamic { - margin: 3.33333px; } } - @media print { - .dynamic { - margin: 5px; } } - @media (min-width: 1500px) { - .dynamic { - border-width: 10px; } } - @media (max-width: 320px) { - .dynamic { - border-width: 6.66667px; } } - @media print { - .dynamic { - border-width: 10px; } } - @media (min-width: 1500px) { - .dynamic { - padding: 5px; } } - @media (max-width: 320px) { - .dynamic { - padding: 3.33333px; } } - @media print { - .dynamic { - padding: 5px; } } - -.static { - margin: 5px; - border: 10px solid black; - padding: 5px; } diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index aae0c15..0000000 --- a/index.d.ts +++ /dev/null @@ -1,39 +0,0 @@ -// Reference: https://www.typescriptlang.org/play -export declare const head: () => string -export declare const globalVariables: () => { - ':root': { - [x: string]: - | string - | { - '--max': string - '--between': string - '--min'?: undefined - } - | { - '--between': string - '--min': string - '--max'?: undefined - } - '--factor': string - '--max': string - '--between': string - '--min': string - } -} -export declare const wasser: (max: number, min?: number) => string -export declare const font: (max: number, min?: number, lineHeightRaio?: number) => string -export declare const fontObject: ( - max: any, - min?: number, - lineHeightRaio?: number -) => { - fontSize: string - lineHeight: string -} -export declare const configure: (configuration: { - scalingRatio?: number - viewportMin?: number - viewportMax?: number - scalingRatioFont?: number - fontSizeToLineHeightRatio?: number -}) => void diff --git a/index.js b/index.ts similarity index 84% rename from index.js rename to index.ts index 85eb3a4..1c78b11 100644 --- a/index.js +++ b/index.ts @@ -6,12 +6,14 @@ const variables = { fontSizeToLineHeightRatio: 1.25, } -export const configure = (configuration) => Object.assign(variables, configuration) +export const configure = (configuration: Partial) => { + Object.assign(variables, configuration) +} // Round number to three digits and remove zeros. -const round = (value) => parseFloat(value.toFixed(3)) +const round = (value: number) => parseFloat(value.toFixed(3)) -const calculation = (_max, _min) => { +const calculation = (_max: number, _min: number) => { const max = round(_max) const min = round(_min) const minReached = `${min}px * var(--min)` @@ -65,7 +67,7 @@ export const globalVariables = () => ({ }, }) -export const wasser = (max, min = max / variables.scalingRatio) => { +export const wasser = (max: number, min = max / variables.scalingRatio) => { const errorMessage = (place) => `wasser: A number is expected as the ${place} parameter for wasser(max: number, min: number).` @@ -81,9 +83,9 @@ export const wasser = (max, min = max / variables.scalingRatio) => { } export const font = ( - max, + max: number, min = max / variables.scalingRatioFont, - lineHeightRaio = variables.fontSizeToLineHeightRatio + lineHeightRaio = variables.fontSizeToLineHeightRatio, ) => { if (typeof max !== 'number' || typeof min !== 'number') { throw new Error('wasser font(): A number is expected as the first and second parameter.') @@ -94,9 +96,9 @@ line-height: ${calculation(max * lineHeightRaio, min * lineHeightRaio)};` } export const fontObject = ( - max, + max: number, min = max / variables.scalingRatioFont, - lineHeightRaio = variables.fontSizeToLineHeightRatio + lineHeightRaio = variables.fontSizeToLineHeightRatio, ) => { if (typeof max !== 'number' || typeof min !== 'number') { throw new Error('wasser fontObject(): A number is expected as the first and second parameter.') diff --git a/package.json b/package.json index c893c35..fe7e5fe 100644 --- a/package.json +++ b/package.json @@ -9,27 +9,30 @@ "scripts": { "build": "padua build", "build:less": "lessc docs/less/less.less docs/less/less.css", - "build:sass": "node-sass docs --output docs --recursive", - "start": "padua watch", - "start:less": "npm run build:less & open docs/less/less.html", - "start:sass": "npm run build:sass && open docs/index.html", - "test": "padua test", - "watch": "npm run build && node-sass demo --output docs --watch --recursive" + "build:sass": "sass --no-source-map docs:docs", + "docs": "open docs/index.html", + "test": "playwright test --config test/playwright.config.ts" }, "devDependencies": { + "@playwright/test": "^1.42.1", + "@types/async": "^3.2.24", + "@types/bun": "^1.0.8", + "@types/less": "^3.0.6", "async": "^3.2.5", - "jest-puppeteer": "^9.0.2", "less": "^4.2.0", - "node-sass": "^9.0.0", - "padua": "2.0.8", - "puppeteer": "^21.7.0" + "padua": "3.0.0", + "playwright": "^1.42.1", + "sass": "^1.71.1" }, + "trustedDependencies": [ + "padua" + ], "type": "module", "sideEffects": false, "main": "./dist/index.js", "exports": { ".": { - "types": "./index.d.ts", + "types": "./dist/index.d.ts", "default": "./dist/index.js" }, "./wasser": { @@ -39,12 +42,9 @@ "default": "./wasser.less" } }, - "source": "./index.js", - "types": "./index.d.ts", + "types": "./dist/index.d.ts", "files": [ "dist", - "index.js", - "index.d.ts", "_wasser.scss", "wasser.less" ], @@ -57,24 +57,7 @@ ], "prettier": "padua/configuration/.prettierrc.json", "eslintConfig": { - "extends": "./node_modules/padua/configuration/eslint.cjs", - "globals": { - "browser": true, - "context": true, - "jestPuppeteer": true, - "page": true - } - }, - "jest": { - "preset": "jest-puppeteer", - "transform": { - "^.+\\.jsx?$": [ - "babel-jest", - { - "configFile": "./node_modules/padua/configuration/.babelrc" - } - ] - } + "extends": "./node_modules/padua/configuration/eslint.cjs" }, "publishConfig": { "provenance": true diff --git a/test/css-in-js.test.js b/test/css-in-js.test.ts similarity index 77% rename from test/css-in-js.test.js rename to test/css-in-js.test.ts index 7e0cf79..c6a8dd2 100644 --- a/test/css-in-js.test.js +++ b/test/css-in-js.test.ts @@ -1,3 +1,4 @@ +import { test, expect } from '@playwright/test' import { evaluate } from './utility/evaluate' import { defaults } from './utility/defaults' import { wasser, font, head, configure } from '../index' @@ -5,7 +6,7 @@ import { wasser, font, head, configure } from '../index' const twoElementBody = `

Hello world

Here we are
` -test('Has possible values on viewport somewhre between min and max.', async () => { +test('Has possible values on viewport somewhre between min and max.', async ({ page }) => { const styles = `.text { color: blue; ${font(30)} @@ -21,19 +22,20 @@ test('Has possible values on viewport somewhre between min and max.', async () = widths: [1000], // Executed inside puppeteer, will only return results. selector: function Selector() { - const regularText = document.querySelector('#regular-text') + const regularText = document.querySelector('#regular-text') as Element const regularTextStyle = window.getComputedStyle(regularText) - const divElement = document.querySelector('#div-element') + const divElement = document.querySelector('#div-element') as Element const divElementStyle = window.getComputedStyle(divElement) return { width: document.documentElement.clientWidth, regularTextColor: regularTextStyle.color, - regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10), - regularTextLineHeight: parseFloat(regularTextStyle.lineHeight, 10), + regularTextFontSize: parseFloat(regularTextStyle.fontSize), + regularTextLineHeight: parseFloat(regularTextStyle.lineHeight), divElementColor: divElementStyle.color, - divElementHeight: parseFloat(divElementStyle.height, 10), + divElementHeight: parseFloat(divElementStyle.height), } }, + page, }) const { @@ -56,7 +58,7 @@ test('Has possible values on viewport somewhre between min and max.', async () = expect(divElementHeight).toBeLessThan(50) }) -test('Max and min values reached on maximum viewport.', async () => { +test('Max and min values reached on maximum viewport.', async ({ page }) => { const styles = `.text { color: blue; ${font(30)} @@ -72,13 +74,18 @@ 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') as Element, + ) + const divElementStyle = window.getComputedStyle( + document.querySelector('#div-element') as Element, + ) return { - regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10), - divElementHeight: parseFloat(divElementStyle.height, 10), + regularTextFontSize: parseFloat(regularTextStyle.fontSize), + divElementHeight: parseFloat(divElementStyle.height), } }, + page, }) const minResult = results[defaults.viewportMin] @@ -91,7 +98,7 @@ test('Max and min values reached on maximum viewport.', async () => { expect(maxResult.divElementHeight).toEqual(40) }) -test('Ratios can be configured.', async () => { +test('Ratios can be configured.', async ({ page }) => { configure({ scalingRatio: 2, scalingRatioFont: 3, @@ -112,20 +119,25 @@ 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') as Element, + ) + const divElementStyle = window.getComputedStyle( + document.querySelector('#div-element') as Element, + ) return { - regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10), - divElementHeight: parseFloat(divElementStyle.height, 10), + regularTextFontSize: parseFloat(regularTextStyle.fontSize), + divElementHeight: parseFloat(divElementStyle.height), } }, + page, }) const minResult = results[defaults.viewportMin] const betweenResults = results['910'] const maxResult = results[defaults.viewportMax] - expect(minResult.regularTextFontSize).toEqual(30 / 3, 1) + expect(minResult.regularTextFontSize).toEqual(30 / 3) expect(minResult.divElementHeight).toBeCloseTo(40 / 2, 1) expect(betweenResults.regularTextFontSize).toBeGreaterThan(30 / 3 + 2) diff --git a/test/playwright.config.ts b/test/playwright.config.ts new file mode 100644 index 0000000..ec5b5b1 --- /dev/null +++ b/test/playwright.config.ts @@ -0,0 +1,11 @@ +import { defineConfig, devices } from '@playwright/test' + +export default defineConfig({ + testDir: '.', + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + ], +}) diff --git a/test/sass-less.test.js b/test/sass-less.test.ts similarity index 97% rename from test/sass-less.test.js rename to test/sass-less.test.ts index 1a404fa..96cbb92 100644 --- a/test/sass-less.test.js +++ b/test/sass-less.test.ts @@ -1,23 +1,26 @@ +import { test, expect } from '@playwright/test' import { evaluate, renderSass, renderLess } from './utility/evaluate' import { defaults, defaultEvaluateConfiguration } from './utility/defaults' // Run same test for SASS and LESS -const suite = (name, getContext) => { +const suite = (name: string, getContext: Function) => { const context = getContext() - test(`${name} for sass.`, async () => { + test(`${name} for sass.`, async ({ page }) => { const results = await evaluate({ ...context.evaluateConfiguration, styles: [renderSass(context.sass)], + page, }) context.test(results) }) - test(`${name} for less.`, async () => { + test(`${name} for less.`, async ({ page }) => { const results = await evaluate({ ...context.evaluateConfiguration, styles: [await renderLess(context.less)], + page, }) context.test(results) diff --git a/test/tsconfig.json b/test/tsconfig.json new file mode 100644 index 0000000..379a994 --- /dev/null +++ b/test/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../tsconfig.json", + "include": ["."] +} diff --git a/test/utility/defaults.js b/test/utility/defaults.ts similarity index 75% rename from test/utility/defaults.js rename to test/utility/defaults.ts index 1acd4ac..a36367e 100644 --- a/test/utility/defaults.js +++ b/test/utility/defaults.ts @@ -15,11 +15,11 @@ export const defaultEvaluateConfiguration = (viewPorts) => ({ widths: viewPorts, // Executed inside puppeteer, will only return results. selector: () => { - const regularTextStyle = window.getComputedStyle(document.getElementById('text')) - const divElementStyle = window.getComputedStyle(document.getElementById('element')) + const regularTextStyle = window.getComputedStyle(document.getElementById('text') as Element) + const divElementStyle = window.getComputedStyle(document.getElementById('element') as Element) return { - regularTextFontSize: parseFloat(regularTextStyle.fontSize, 10), - divElementHeight: parseFloat(divElementStyle.height, 10), + regularTextFontSize: parseFloat(regularTextStyle.fontSize), + divElementHeight: parseFloat(divElementStyle.height), } }, }) diff --git a/test/utility/evaluate.js b/test/utility/evaluate.js deleted file mode 100644 index 8b420a6..0000000 --- a/test/utility/evaluate.js +++ /dev/null @@ -1,40 +0,0 @@ -import mapSeries from 'async/mapSeries' -import sass from 'node-sass' -import less from 'less' - -export const renderSass = (input) => - sass.renderSync({ data: input, includePaths: [process.cwd()] }).css.toString() - -export const renderLess = async (input) => (await less.render(input, {})).css - -export const evaluate = async ({ styles, body, widths, selector }) => { - const html = ` - - ${styles.map((style) => ``)} - - - ${body} - -` - - page.setContent(html) - - const results = await mapSeries(widths, async (width) => { - page.setViewport({ - width, - height: 1000, - }) - - const document = await page.$('document') - - return page.evaluate(selector, document) - }) - - const result = {} - - results.forEach((_result, index) => { - result[widths[index]] = _result - }) - - return result -} diff --git a/test/utility/evaluate.ts b/test/utility/evaluate.ts new file mode 100644 index 0000000..26708ad --- /dev/null +++ b/test/utility/evaluate.ts @@ -0,0 +1,41 @@ +// eslint-disable-next-line import/extensions +import mapSeries from 'async/mapSeries.js' +import { compileString } from 'sass' +import less from 'less' + +export const renderSass = (input: string) => + compileString(input, { loadPaths: [process.cwd()] }).css.toString() + +export const renderLess = async (input: string) => (await less.render(input, {})).css + +export const evaluate = async ({ styles, body, widths, selector, page }) => { + const html = ` + + ${styles.map((style: string) => ``)} + + + ${body} + +` + + page.setContent(html) + + const results = await mapSeries(widths, async (width) => { + page.setViewportSize({ + width, + height: 1000, + }) + + const document = await page.$('document') + + return page.evaluate(selector, document) + }) + + const result = {} + + results.forEach((_result, index) => { + result[widths[index]] = _result + }) + + return result +}