Add browser compatibility tests

- build is now targeted to 2 year old browsers
replete · Jun 24, 2024 · f8eac2a · f8eac2a
1 parent dbcc221
commit f8eac2a
Show file tree

Hide file tree

Showing 12 changed files with 1,599 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 
 #### [View demo](https://replete.github.io/biscuitman)
 
-I didn't like sending 100KB+ for a simple cookie consent solution so I wrote this. It's currently **3.3kB/br and 3.8kB/gz**, including CSS. It's designed to be as small as possible with an adequate featureset for basic website cookie consent.
+100kB+ seemed too heavy for a cookie popup so I wrote this. It's currently < 4kB gz/btr, including CSS. It's designed to be as small as possible with an adequate featureset for basic website cookie consent.
 
 - Stores consent in `localStorage`, exposes in `window.Consent` and through custom events fired on `document`
 - Handles consent granulated by custom sections (e.g. essential, performance, analytics...)
@@ -15,8 +15,13 @@ I didn't like sending 100KB+ for a simple cookie consent solution so I wrote thi
 - Injects scripts when granular consent is granted (`<script data-consent="analytics" type="text/plain" src="..."></script>`)
 - Injects embedded `<script>` from script tags with `src` properties on onload (tidier markup)
 - Mobile-first
-- Browser support: >= 2% browserlist (No IE support, but its not impossible)
-  - Written with latest CSS / JS features and targetted to >= 2% using browserlist
+- Browser support (targeted via `browserlist` in `package.json` - `>= 2%, last 2 years`):
+  - Chrome 105+,
+  - Edge 105+
+  - Safari 15.4+
+  - Firefox 121+
+  - Samsung browser 20+
+  - run `npm run build report` and view `index.html` to compatibility table. If you need a version to work in older browsers, update the browserlist version and modify the CSS
 - 'show more' functionality for long disclaimer text
 - include optional link in any text
 - CSS classes on `<html>` element for consents
@@ -158,7 +163,7 @@ The easiest way to see how events work is to view the `console.debug()` calls in
 - `biscuitman:close` => `{time: 1718915128298}` modal closed
 - `biscuitman:button` => `{id: "settings", time: 1718915128298}` button clicked
 - `biscuitman:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved
-- `biscuitman:inject` =>  `{el: $Element, parent?: $Element, time: 1718914784624}` script injected to DOM. if parent exists, it's a new tag inserted after a `src` script loaded which also had text content (a 'dependent' script = tidier convenient markup)
+- `biscuitman:inject` =>  `{el: $Element, parent?: $Element, id?: 'script-id', time: 1718914784624}` script injected to DOM. if parent exists, it's a new tag inserted after a `src` script loaded which also had text content (a 'dependent' script = tidier convenient markup)
 - `biscuitman:invalidate` => `{data: {...consentObjectJustDeleted}, time: 1718915128298}` consent invalidated
 - `biscuitman:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time
 - `biscuitman:delete` => `{localStorage|cookie: 'cookieName', time: 1718914784624}` fires when consent is rejected or invalidated and cookies/localStorage entries are deleted

diff --git a/cssreport.json b/cssreport.json
diff --git a/dist/biscuitman.css b/dist/biscuitman.css
@@ -1,4 +1,4 @@
-/*! biscuitman.js 0.3.9 */
+/*! biscuitman.js 0.3.10 */
 .biscuitman {
   --t: #444;
   --b: #fff;
@@ -37,7 +37,7 @@
   position: relative;
 }
 
-@media (width >= 770px) {
+@media (min-width: 770px) {
   .biscuitman article {
     padding-right: calc(max(300px, 30vw) + 20px);
   }
@@ -58,7 +58,7 @@
   font-size: 13px;
 }
 
-@media (width >= 575px) {
+@media (min-width: 575px) {
   .biscuitman article p {
     font-size: 14px;
   }
@@ -106,7 +106,7 @@
   opacity: .8;
 }
 
-@media (width >= 576px) {
+@media (min-width: 576px) {
   .biscuitman nav {
     flex-direction: row-reverse;
     gap: 10px;
@@ -120,7 +120,7 @@
   }
 }
 
-@media (width <= 575px) {
+@media (max-width: 575px) {
   .biscuitman nav {
     flex-direction: column;
     flex-grow: 1;
@@ -136,7 +136,7 @@
   max-height: 100%;
 }
 
-@media (width >= 576px) {
+@media (min-width: 576px) {
   .biscuitman dialog {
     border-radius: 10px;
     width: 90vw;
@@ -147,7 +147,7 @@
   }
 }
 
-@media (width >= 576px) and (height >= 1134px) {
+@media (min-width: 576px) and (min-height: 1134px) {
   .biscuitman dialog {
     height: 890px;
   }
@@ -202,7 +202,7 @@
   overflow-y: scroll;
 }
 
-@media (width >= 576px) {
+@media (min-width: 576px) {
   .biscuitman .bm-sections {
     margin-right: -18px;
     padding-right: 4px;
@@ -220,7 +220,7 @@
   display: block;
 }
 
-@media (width >= 576px) {
+@media (min-width: 576px) {
   .biscuitman .bm-sections > p span {
     font-size: 14px;
   }

diff --git a/dist/biscuitman.js b/dist/biscuitman.js
@@ -1,4 +1,4 @@
-/*! biscuitman.js 0.3.9 */
+/*! biscuitman.js 0.3.10 */
 ((d, w, Object1, h, bm)=>{
     const defaults = {
         key: 'myconsent',
@@ -67,7 +67,10 @@
 						</label>
 						<p>${o[`${section}Message`]}</p>
 					</summary>
-					${cookies ? Object1.entries(cookies).map(([k, v])=>`<dl><dt>${k}</dt><dd>${v}</dd></dl>`).join('') : `<dl><dd>${o.noCookies}</dd></dl>`}
+					${cookies ? Object1.entries(cookies).map((param)=>{
+                let [k, v] = param;
+                return `<dl><dt>${k}</dt><dd>${v}</dd></dl>`;
+            }).join('') : `<dl><dd>${o.noCookies}</dd></dl>`}
 				</details>
 			</section>`;
         }).join('')}

diff --git a/dist/biscuitman.min.css b/dist/biscuitman.min.css