feat(package): migrate to Bun, TypeScript, Playwright and dart-sass

release-npm

.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:

.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

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(
   <Wrapper>
     <Heading>Scalable Properties</Heading>
   </Wrapper>,
-  document.body
+  document.body,
 )
 ```
 

_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 {

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"
   },

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": {

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"
   },