Added polyfills

Author: ulyssear

.github/workflows/deploy-image.yml

@@ -24,9 +24,9 @@ jobs:
         with:
           node-version: 16
       - run: npm install
-      - run: npm run format
-      - run: npm run lint:fix
-      - run: npm run build
+      - run: npm run format:all
+      - run: npm run lint:fix:all
+      - run: npm run build:all
 
       # - run: git config advice.addIgnoredFile false
 
@@ -51,7 +51,7 @@ jobs:
           commit_user_name: github-actions
           commit_user_email: noreply@arnaud.tech
           commit_author: github-actions <noreply@arnaud.tech>
-          file_pattern: ./build/index.min.js ./build/index.min.js.map ./package-lock.json
+          file_pattern: ./build/index.min.js ./build/index.min.js.map build/polyfill.min.js build/polyfill.min.js.map package-lock.json
           skip_dirty_check: true
           push_options: '--force'
           branch: ${{ steps.package-version.outputs.current-version }}
@@ -74,6 +74,8 @@ jobs:
           files: |
             build/index.min.js
             build/index.min.js.map
+            build/polyfill.min.js
+            build/polyfill.min.js.map
             package-lock.json
           tag_name: ${{ steps.package-version.outputs.current-version }}
           name: ${{ steps.package-version.outputs.current-version }}

README.md

@@ -74,6 +74,7 @@ CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS propert
 ### Built With
 
 [![Javascript][Javascript-shield]][Javascript-url]
+[![NPM][NPM-shield]][NPM-url]
 
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -83,11 +84,24 @@ CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS propert
 <!-- GETTING STARTED -->
 ## Getting Started
 
+### Prerequisites
 
+The followed prerequisites are the minimum requirements to use the library. The library may work with older browsers with the polyfills but it's not guaranteed (and recommended).
 
-### Prerequisites
+__Modern browers__
+  - Chrome 9+
+  - Edge 12+
+  - Firefox 6+
+  - Safari 5.1+
+  - Opera 12.1+
 
+__Browsers for mobile__
+  - IOS Safari 5.1+
+  - UC Browser for Android 11
+  - Firefox for Android 49
 
+__Older browsers__
+  - IE10+
 
 ### Installation
 
@@ -99,16 +113,14 @@ CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS propert
    ```
 
 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute)
-
-```css
-html[aria-busy="true"], [hidden] { display: none!important; }
-```
+  ```css
+  html[aria-busy="true"], [hidden] { display: none!important; }
+  ```
 
 3. Call `CSS_IN_JS_IN_HTML.init(document,null)` to start the library. The optimal use case is to call it in the `DOMContentLoaded` event.
-
-```js
-document.addEventListener('DOMContentLoaded', () => CSS_IN_JS_IN_HTML.init(document, null));
-```
+  ```js
+  document.addEventListener('DOMContentLoaded', () => CSS_IN_JS_IN_HTML.init(document, null));
+  ```
 
 #### Manual installation
 
@@ -118,11 +130,31 @@ document.addEventListener('DOMContentLoaded', () => CSS_IN_JS_IN_HTML.init(docum
    ```
 2. Import `index.min.js` (or `index.js`) in your HTML file
    ```html
-    <script src="path/to/css-in-js-in-html/index.min.js"></script>
+    <script src="path/to/css-in-js-in-html/build/index.min.js"></script>
     ```
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+#### (Optional) Add polyfills
+
+Some polyfills are required to make the library work on older browsers (IE9 and above). You can add them by importing the following file in your HTML file.
+
+```html
+<script type="text/javascript" src="path/to/css-in-js-in-html/build/polyfill.min.js"></script>
+```
+
+The polyfills permit to use the following features :
+- `window.getComputedStyle`
+- `Array.isArray`
+- `Array.prototype.lastIndexOf`
+- `Array.prototype.reduce`
+- `addEventListener`
+- `window.matchMedia`
+- `document.querySelectorAll`
+- `document.querySelector`
+- `String.prototype.trim`
 
+It's recommended to not use the polyfills if you don't need to support old browsers.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
 <!-- USAGE EXAMPLES -->
@@ -187,16 +219,6 @@ Project Link: [https://github.com/ulyssear/css-in-js-in-html](https://github.com
 
 
 
-<!-- TODO : ACKNOWLEDGMENTS ?
-## Acknowledgments
-
-* []()
-* []()
-* []()
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
--->
-
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
@@ -214,4 +236,6 @@ Project Link: [https://github.com/ulyssear/css-in-js-in-html](https://github.com
 [linkedin-url]: https://linkedin.com/in/ulyssearnaud
 [product-screenshot]: images/screenshot.png
 [JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
-[JavaScript-url]: https://www.javascript.com/
+[JavaScript-url]: https://www.javascript.com/
+[NPM-shield]: https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white
+[NPM-url]: https://www.npmjs.com/

package.json

@@ -6,11 +6,19 @@
   "scripts": {
     "test": "jest",
     "format": "rome format --write --indent-style tab --line-width 160 --quote-style single src/index.js",
+    "format:polyfill": "rome format --write --indent-style tab --line-width 160 --quote-style single src/polyfill.js",
     "lint": "rome check src/index.js",
+    "lint:polyfill": "rome check src/polyfill.js",
     "lint:fix": "rome check --apply-suggested src/index.js",
+    "lint:fix:polyfill": "rome check --apply-suggested src/polyfill.js",
+    "lint:all": "rome check src",
+    "lint:fix:all": "rome check --apply-suggested src",
     "build": "esbuild src/index.js --bundle --outfile=build/index.min.js --minify --sourcemap",
+    "build:polyfill": "esbuild src/polyfill.js --bundle --outfile=build/polyfill.min.js --minify --sourcemap",
+    "build:all": "npm run build && npm run build:polyfill",
     "build:hot": "npm run build -- --watch",
-    "start": "concurrently -n \"build,serve\" \"npm run build:hot\" \"npx serve build\""
+    "build:hot:polyfill": "npm run build:polyfill -- --watch",
+    "start": "concurrently -n \"build,build:polyfill,serve\" \"npm run build:hot\" \"npm run build:hot:polyfill\" \"npx serve build\""
   },
   "repository": {
     "type": "git",

src/polyfill.js

@@ -0,0 +1,177 @@
+if (!window.getComputedStyle) {
+  window.getComputedStyle = function(e, t) {
+      return this.el = e, this.getPropertyValue = function(t) {
+          var n = /(\-([a-z]){1})/g;
+          return t == "float" && (t = "styleFloat"), n.test(t) && (t = t.replace(n, function() {
+              return arguments[2].toUpperCase();
+          })), e.currentStyle[t] ? e.currentStyle[t] : null;
+      }, this;
+  };
+}
+
+if (!Array.isArray) {
+    Array.isArray = function(arg) {
+        return Object.prototype.toString.call(arg) === '[object Array]';
+    };
+}
+
+if (!Array.prototype.lastIndexOf) {
+    Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+      'use strict';
+  
+      if (this === void 0 || this === null) {
+        throw new TypeError();
+      }
+  
+      var n, k,
+        t = Object(this),
+        len = t.length >>> 0;
+      if (len === 0) {
+        return -1;
+      }
+  
+      n = len - 1;
+      if (arguments.length > 1) {
+        n = Number(arguments[1]);
+        if (n != n) {
+          n = 0;
+        }
+        else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+          n = (n > 0 || -1) * Math.floor(Math.abs(n));
+        }
+      }
+  
+      for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+        if (k in t && t[k] === searchElement) {
+          return k;
+        }
+      }
+      return -1;
+    };
+  }
+
+
+if (!Array.prototype.reduce) {
+    Array.prototype.reduce = function(callback, initial) {
+        var accumulator = initial;
+        for (var i = 0; i < this.length; i++) {
+            if (accumulator !== undefined) {
+                accumulator = callback.call(undefined, accumulator, this[i],   i, this);
+                continue;
+            }
+            accumulator = this[i];
+        }
+        return accumulator;
+    }
+}
+
+(function(win, doc){
+	if(win.addEventListener)return;
+
+	function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
+	function addEvent(on, fn, self){
+		return (self = this).attachEvent('on' + on, function(e){
+			var e = e || win.event;
+			e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
+			e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
+			fn.call(self, e);
+		});
+	}
+	function addListen(obj, i){
+		if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
+		else obj.addEventListener = addEvent;
+		return obj;
+	}
+
+	addListen([doc, win]);
+	if('Element' in win){
+        win.Element.prototype.addEventListener = addEvent;
+        return;
+    }
+    
+    doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});
+    docHijack('getElementsByTagName');
+    docHijack('getElementById');
+    docHijack('createElement');
+    addListen(doc.all);	
+})(window, document);
+
+window.matchMedia || (window.matchMedia = function() {
+  'use strict';
+
+  var styleMedia = (window.styleMedia || window.media);
+
+  if (!styleMedia) {
+      var style       = document.createElement('style'),
+          script      = document.getElementsByTagName('script')[0],
+          info        = null;
+
+      style.type  = 'text/css';
+      style.id    = 'matchmediajs-test';
+
+      if (!script) {
+        document.head.appendChild(style);
+      } else {
+        script.parentNode.insertBefore(style, script);
+      }
+
+      info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
+
+      styleMedia = {
+          matchMedium: function(media) {
+              var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
+
+              if (style.styleSheet) {
+                  style.styleSheet.cssText = text;
+              } else {
+                  style.textContent = text;
+              }
+
+              return info.width === '1px';
+          }
+      };
+  }
+
+  return function(media) {
+      return {
+          matches: styleMedia.matchMedium(media || 'all'),
+          media: media || 'all'
+      };
+  };
+}());
+
+if (!document.querySelectorAll) {
+  document.querySelectorAll = function (selectors) {
+    var style = document.createElement('style'), elements = [], element;
+    document.documentElement.firstChild.appendChild(style);
+    document._qsa = [];
+
+    style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
+    window.scrollBy(0, 0);
+    style.parentNode.removeChild(style);
+
+    while (document._qsa.length) {
+      element = document._qsa.shift();
+      element.style.removeAttribute('x-qsa');
+      elements.push(element);
+    }
+    document._qsa = null;
+    return elements;
+  };
+}
+
+if (!document.querySelector) {
+  document.querySelector = function (selectors) {
+    var elements = document.querySelectorAll(selectors);
+    return (elements.length) ? elements[0] : null;
+  };
+}
+
+if (!String.prototype.trim) {
+  (function() {
+    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+    String.prototype.trim = function() {
+      return this.replace(rtrim, '');
+    };
+  })();
+}