pqina · DevOpsJon · Mar 11, 2025
diff --git a/.babelrc b/.babelrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+**1.8.5** | 11-03-2025
+
+-   Fixed build system compatibility with Node.js v16+ and v23+
+-   Updated build dependencies to current versions:
+    -   Babel 6 → Babel 7
+    -   Gulp 3 → Gulp 4
+    -   Updated all related plugins
+-   Fixed Sass deprecation warnings
+-   Added proper Babel configuration
+-   Maintained all existing functionality and API
+
 **1.8.4** | 26-11-2024
 
 -   Update Tick

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Flip Countdown
 
-Flip is an advanced and beautiful flip counter plugin. Easy to use and highly flexible, you can set up a custom counter on your website in minutes. Display visitor counts, countdown to a special date or celebrate progress. Whatever you’re planning, the options are endless.
+Flip is an advanced and beautiful flip counter plugin. Easy to use and highly flexible, you can set up a custom counter on your website in minutes. Display visitor counts, countdown to a special date or celebrate progress. Whatever you're planning, the options are endless.
 
 ![](./flip.gif)
 
@@ -14,16 +14,16 @@ Flip is an advanced and beautiful flip counter plugin. Easy to use and highly fl
 
 ---
 
-
 ## Quick Start
 
 If you just want to get on your way, copy the `example` directory and use it as a starting point.
 
 This example will automatically initialize Flip counters on the website and can be used with the [presets on the demo site](https://pqina.nl/flip/#presets).
 
 Or you can use one of the javascript framework codesandboxes below:
-- [React](https://codesandbox.io/s/react-flip-demo-txoux)
-- [Vue](https://codesandbox.io/s/vue-flip-demo-xhtfk)
+
+-   [React](https://codesandbox.io/s/react-flip-demo-txoux)
+-   [Vue](https://codesandbox.io/s/vue-flip-demo-xhtfk)
 
 ## Setup
 
@@ -32,7 +32,7 @@ For the code snippets below we'll assume it's the `flip.min.css` and `flip.min.j
 Copy the following HTML snippet in the `<head>` of your web page.
 
 ```html
-<link href="/flip/flip.min.css" rel="stylesheet">
+<link href="/flip/flip.min.css" rel="stylesheet" />
 ```
 
 Then copy the following snippet and place it just before the closing `</body>` tag.
@@ -48,14 +48,13 @@ You can now copy past the [presets](https://pqina.nl/flip/#presets) to your webs
 You can also load the files from a CDN like unpkg using the links below:
 
 ```html
-<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
+<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet" />
 ```
 
 ```html
 <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>
 ```
 
-
 ### Install from NPM
 
 ```
@@ -66,7 +65,7 @@ npm i @pqina/flip --save
 import Tick from '@pqina/flip';
 
 console.log(Tick);
-// logs {supported: true, options: {…}, helper: {…}, data: {…}, DOM: {…}, …}
+// logs {supported: true, options: {…}, helper: {…}, data: {…}, DOM: {…}, …}
 ```
 
 Module usage example project on Stackblitz: https://stackblitz.com/edit/flip-counter-module
@@ -75,36 +74,27 @@ Module usage example project on Stackblitz: https://stackblitz.com/edit/flip-cou
 
 Information on how to customize Tick and use the Tick API can be found on the [product website](https://pqina.nl/tick/).
 
-
 ## Accessibility
 
 For better compatibility with screenreaders, we need to hide the flip view using `aria-hidden`, this prevents the contents from being read out loud. We can then use an `aria-label` attribute to provide a formatted label instead.
 
 ```html
-<div class="tick"
-     data-value="1234"
-     data-did-init="setupFlip">
-
+<div class="tick" data-value="1234" data-did-init="setupFlip">
     <!-- Hide visual content from screenreaders with `aria-hidden` -->
     <div data-repeat="true" aria-hidden="true">
         <span data-view="flip"></span>
     </div>
-
 </div>
 
 <script>
-function setupFlip(tick) {
-
-    Tick.helper.interval(function() {
-
-        tick.value++;
-
-        // Set `aria-label` attribute which screenreaders will read instead of HTML content
-        tick.root.setAttribute('aria-label', tick.value);
-
-    }, 1000);
-
-}
+    function setupFlip(tick) {
+        Tick.helper.interval(function () {
+            tick.value++;
+
+            // Set `aria-label` attribute which screenreaders will read instead of HTML content
+            tick.root.setAttribute('aria-label', tick.value);
+        }, 1000);
+    }
 </script>
 ```
 

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env"]
+}; 
diff --git a/dist/flip.css b/dist/flip.css
@@ -191,7 +191,7 @@
 
 /*
  * @pqina/flip v1.8.4 - A Beautifully Animated Flip Clock
- * Copyright (c) 2024 PQINA - https://pqina.nl/flip/
+ * Copyright (c) 2025 PQINA - https://pqina.nl/flip/
  */
 /**
  * Layout
@@ -254,7 +254,8 @@
   opacity: 0;
   -webkit-transform-origin: 0 100%;
           transform-origin: 0 100%;
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5), 0 0.125em 0.5em rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5), 0 0.125em 0.5em rgba(0, 0, 0, 0.75);
+          box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5), 0 0.125em 0.5em rgba(0, 0, 0, 0.75);
   z-index: 0;
 }
 
@@ -312,15 +313,17 @@
           transform-origin: center bottom;
   top: 0;
   z-index: 2;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
 }
 
 .tick-flip-panel-back {
   -webkit-transform-origin: center top;
           transform-origin: center top;
   top: 50%;
   z-index: 1;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
 }
 .tick-flip-panel-back::after {
   z-index: 1;
@@ -360,30 +363,35 @@
 }
 
 .tick-flip-panel-front-shadow {
+  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.3)));
   background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
 }
 
 .tick-flip-panel-back-shadow {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.5)));
   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
 }
 
 .tick-flip-panel-back-highlight {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0.3)));
   background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.3));
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.3));
 }
 
 .tick [data-style*="shadow:inner"],
 .tick [data-style*="shadow:inner"] .tick-flip-card-shadow {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .tick [data-style*="shadow:none"] .tick-flip-panel-front,
 .tick [data-style*="shadow:none"] .tick-flip-panel-back,
 .tick [data-style*="shadow:none"] .tick-flip-shadow,
 .tick [data-style*="shadow:none"] .tick-flip-card-shadow {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .tick [data-style*="shadow:none"] .tick-flip-back::after,
 .tick [data-style*="shadow:none"] .tick-flip-panel-front-shadow,
@@ -423,5 +431,6 @@
 }
 
 .tick-flip-shadow {
-  box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.25), 0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.25), 0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);
+          box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.25), 0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);
 }