0.2 WIP

This is a major version : anterior versions to 0.2 used an old mechanism
to retrieve group of styles in class attributes. Nowadays, regular
expressions are used instead.

Author: ulyssear

.github/workflows/deploy-image.yml

@@ -1,4 +1,2 @@
 node_modules
-index.min.js
-*.map
 pacakge-lock.json

.gitignore

@@ -86,6 +86,8 @@ CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS propert
 
 ### Prerequisites
 
+> ⚠️ The following prerequisites were tested with the version 0.1.6 of the library and not the current version. However, the compatibility should be the same.
+
 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).
 
 __Modern browers__
@@ -107,53 +109,27 @@ __Older browsers__
 
 #### From CDN
 
-1. Import `index.min.js` (or `index.js`) in your HTML file
+1. Import `main.js` in your HTML file
    ```html
-   <script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.1.6/build/index.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.2.0/main.js"></script>
    ```
 
 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; }
   ```
 
-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));
-  ```
-
 #### Manual installation
 
 1. Clone the repo
    ```sh
    git clone https://github.com/ulyssear/css-in-js-in-html.git
    ```
-2. Import `index.min.js` (or `index.js`) in your HTML file
+2. Import `main.js` in your HTML file
    ```html
-    <script src="path/to/css-in-js-in-html/build/index.min.js"></script>
+    <script src="path/to/css-in-js-in-html/main.js"></script>
     ```
 
-#### (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>
 
 
@@ -180,7 +156,6 @@ See the [open issues](https://github.com/ulyssear/css-in-js-in-html/issues) for
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
-
 <!-- CONTRIBUTING -->
 ## Contributing
 
@@ -234,7 +209,6 @@ Project Link: [https://github.com/ulyssear/css-in-js-in-html](https://github.com
 [license-url]: https://github.com/ulyssear/css-in-js-in-html/blob/master/LICENSE
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
 [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/
 [NPM-shield]: https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white