ulyssear / css-in-js-in-html Goto Github PK

• Command to convert an HTML file to an optimized file (act like a minifier that optimizes class attributes too).
• External resources converter to base64

• Simple class:
  background-color-[yellow] applies background-color: yellow.

• Multiple classes:
  “background-[black] color-[white]” applies background: black; color: white.

• Simple class with event
  “blur:color-[purple]” applies color: purple for “blur” event.

• Multiple events with simple class
  “mouseenter:text-decoration-[underline] mouseleave:text-decoration-[none]” applies text-decoration: underline and text-decoration: none respectively for the “mouseenter” and “mouseleave” events.

• Multiple classe with event:
  “mouseover:{transition-[1s] background-[gainsboro]} applies transition: 1s;background: gainsboro for the “mouseover” event.

• Simple class with selector:
  “[a]:text-decoration-[none]” applies text-decoration: none to the elements matching the selector “a”

• Multiple classes with selector:
  “[a]:{text-decoration-[none] color-[black]” applies text-decoration: none; color: black to the elements matching the selector “a”.

• Simple class with event and selector:
  “blur:[a]:color-[purple]” applies color: purple to the elements matching the selector “a” on “blur” event.

• Multiple classes with event and selector
  “blur:[a]:{transition-[1s] color-[purple]}” applies transition: 1s; color: purple to the elements matching the selector “a” on “blur” event.

• Multiple events with simple class:
  “{blur,click}:color-[purple]” applies color: purple for “blur” and “click” events.

• Multiple events with multiple classes:
  “{blur,click}:{transition-[1s] color-[purple]}” applies color: purple for “blur” and “click” events.

• No class after rendering the document:
  “{blur,click}:{transition-[1s] color-[purple]}” applies color: purple for “blur” and “click” events and there is no class “{blur,click}:{transition-[1s] color-[purple]}”.

First example : A simple stopwatch https://github.com/ulyssear/simple-stopwatch

Error thrown with this source code :

<form class="[input[type='checkbox']]:display-[none]">
    <label>
        <span>Mot de passe généré</span>
        <input type="text" name="generated-password">
    </label>
    <label>
        <span>Nombre de caractères</span>
        <input type="range" name="password-length" min="8" max="256" value="32">
    </label>
    <fieldset class="[label > span]:{padding-[0.5rem 1rem] border-[1px solid #ccc] border-radius-[0.25rem] cursor-[pointer] display-[inline-block] margin-[0.5rem 0.25rem] background-color-[#fff] transition-[all 0.2s ease-in-out]}">
        <legend>Paramètres</legend>
        <label>
            <span>Majuscules</span>
            <input type="checkbox" name="options[uppercase]" checked>
        </label>
        <label>
            <span>Minuscules</span>
            <input type="checkbox" name="options[lowercase]" checked>
        </label>
        <label>
            <span>Chiffres</span>
            <input type="checkbox" name="options[numbers]" checked>
        </label>
        <label>
            <span>Symboles</span>
            <input type="checkbox" name="options[symbols]" checked>
        </label>
    </fieldset>
</form>