npm package: @nicolas-riciotti/utilitycss
Description: utilitycss.js simplify the syntax to create custom components and provides data binding
Author: Nicolas Riciotti
Latest version: 0.0.26

# TODOS

## Variable
```
$btnPrimary:12px
--var1 --var2
```

## Mixins
```
@var{d:flex,items:stretch,just:between}
@helper{uppercase,block}
@media(max-w:1024px){uppercase,block,p-x:6.26%}
@media:m{uppercase,block}
@anim:animName{}
@state:hover{}
@calc{}
@mixin{}
@query(input.foo:checked + > &){uppercase block}
foo(2){ b:i m-l:i }
```

## Add Calc Support
```
w:calc(100%-1px)
```

## States Merging
```
block bg:light p-y:[60fy,80fy] font:bold,(25fx/30fx),-0.04em m-b:25fy
hover { c:red border:solid,1px,red }
animIn { shift:y:100% c:red border:solid,1px,red (.foo + &):ff:alidJ }
```

## Query Selector
```
$(:hover):c:red
$(:hover):bg:red
$(:hover):w:100px
```

## RegExp
```
/(.*)+[^0-9]{2}/
```

## Property Shoftend Conflicts
  
auto detect which property to use based on value when dealing with conflict
this should reduce number of properties/helpers to learn and shoudl allow usage pf irst letter or any css pro
Direction(`right`,`left`,`top`,`bottom`,`x`,`y`) must be prefixed with `-`
Can use delimiter on direction to share value  

<br/>

## Abbreviations

<table>
    <tr>
        <td>
            <span>a:nn</span><span style="padding-left: 15px; color: #777;">animation:none<span>
        </td>
        <td>
            <span>c:red</span><span style="padding-left: 15px; color: #777;">color:red<span>
        </td>
        <td>
            <span>adl:0s</span><span style="padding-left: 15px; color: #777;">animation-delay:0s<span>
        </td>
    </tr>    
    <tr>
        <td>
            <span>adr:0s</span><span style="padding-left: 15px; color: #777;">animation-duration<span>
        </td>
        <td>
            <span>atf:0s</span><span style="padding-left: 15px; color: #777;">animation-timing-function<span>
        </td>
        <td>
            <span>bg:nn</span><span style="padding-left: 15px; color: #777;">background:none<span>
        </td>
    </tr>     
    <tr>
        <td><span>bgsz:n</span><span style="padding-left: 15px; color: #777;">background-size:none</span></td>
        <td><span>bgga:l(to-l,#fff,#000)</span><span style="padding-left: 15px; color: #777;">background-gradient:linear(to left,#fff,#000)</span></td>
        <td><span>bgps:nn</span><span style="padding-left: 15px; color: #777;">background-position:none</span></td>
    </tr>   
    <tr> 
        <td><span>bgig:n</span><span style="padding-left:15px;color: #777"> background-image:none</span></td>
        <td><span>bgci:n</span><span style="padding-left:15px;color: #777"> background-clip:none</span></td>
        <td><span>bgcl:n</span><span style="padding-left:15px;color: #777"> background-color:none</span></td>
    </tr>
    <tr>
        <td><span>bg-bl-md:nn</span><span style="padding-left:15px;color: #777">background-repeat:none</span></td>
        <td><span>bg-bl-md:nr</span><span style="padding-left:15px;color: #777">background-blend-mode: normal;</span></td>
        <td><span>bgbm:ml</span><span style="padding-left:15px;color: #777">background-blend-mode: multiply;</span></td>
    </tr>
    <tr>
        <td><span>bg-bl-md:sc</span><span style="padding-left:15px;color: #777">background-blend-mode: screen;</span></td>
        <td><span>bg-bl-md:ov</span><span style="padding-left:15px;color: #777">background-blend-mode: overlay;</span></td>
        <td><span>bg-bl-md:dr</span><span style="padding-left:15px;color: #777">background-blend-mode: darken;</span></td>
    </tr>
    <tr>
        <td><span>bg-bl-md:lg</span><span style="padding-left:15px;color: #777">background-blend-mode: lighten;</span></td>
        <td><span>bg-bl-md:cl-dd</span><span style="padding-left:15px;color: #777">background-blend-mode: color-dodge;</span></td>
        <td><span>bg-bl-md:cl-br</span><span style="padding-left:15px;color: #777">background-blend-mode: color-burn;</span></td>
    </tr>
    <tr>
        <td><span>bg-bl-md:hr-lg</span><span style="padding-left:15px;color: #777">background-blend-mode: hard-light;</span></td>
        <td><span>bg-bl-md:sf-lg</span><span style="padding-left:15px;color: #777">background-blend-mode: soft-light;</span></td>
        <td><span>bg-bl-md:df</span><span style="padding-left:15px;color: #777">background-blend-mode: difference;</span></td>
    </tr>
    <tr>
        <td><span>bg-bl-md:ex</span><span style="padding-left:15px;color: #777">background-blend-mode: exclusion;</span></td>
        <td><span>bg-bl-md:he</span><span style="padding-left:15px;color: #777">background-blend-mode: hue;</span></td>
        <td><span>bg-bl-md:st</span><span style="padding-left:15px;color: #777">background-blend-mode: saturation;</span></td>
    </tr>
    <tr>
        <td><span>bgbm:cl</span><span style="padding-left:15px;color: #777">background-blend-mode: color;</span></td>
        <td><span>bgbm:lm</span><span style="padding-left:15px;color: #777">background-blend-mode: luminosity;</span></td>
        <td><span>br:s,1px,red</span><span style="padding-left:15px;color: #777"> border:solid,1px,red</span></td>
    </tr>
    <tr>
        <td><span>br-rd:3px</span><span style="padding-left:15px;color: #777">border-radius:3px</span></td>
        <td><span>br-r:3px</span><span style="padding-left:15px;color: #777"> border-right:solid,1px,red</span></td>
        <td><span>br-r:3px</span><span style="padding-left:15px;color: #777"> border-right:3px </span></td>
    </tr>
    <tr>
        <td><span>b:0</span><span style="padding-left:15px;color: #777"> bottom:0</span></td>
        <td><span>fn:bold,12px/10px</span><span style="padding-left:15px;color: #777">font:bold,12px/10px</span></td>
        <td><span>f:l</span><span style="padding-left:15px;color: #777">float:left</span></td>
    </tr>
    <tr>
        <td><span>fl-sh:0</span><span style="padding-left:15px;color: #777"> flex-shrink:0</span></td>
        <td><span>fn-sz:0</span><span style="padding-left:15px;color: #777"> font-size: 0</span></td>
        <td><span>fn-st:nm</span><span style="padding-left:15px;color: #777"> font-style: normal</span></td>
    </tr>
    <tr>
        <td><span>fn-wg:b</span><span style="padding-left:15px;color: #777"> font-weight:bold</span></td>
        <td><span>bx-sh:0px3px2px</span><span style="padding-left:15px;color: #777"> box-shadow: 0px 3px 2px</span></td>
        <td><span>bx-sz:bb</span><span style="padding-left:15px;color: #777"> box-sizing: border-box</span></td>
    </tr>
    <tr>
        <td><span>fl-wr:wp</span><span style="padding-left:15px;color: #777">flex-wrap:wrap</span></td>
        <td><span>fill:red</span><span style="padding-left:15px;color: #777">fill:red</span></td>
        <td><span>lt-sp:1px</span><span style="padding-left:15px;color: #777"> letter-spacing:none</span></td>
    </tr>
    <tr>
        <td><span>ls-st-tp:bt</span><span style="padding-left:15px;color: #777">list-style-type</span></td>
        <td><span>mr:3px</span><span style="padding-left:15px;color: #777">margin:3px;</span></td>
        <td><span>mbm:de</span><span style="padding-left:15px;color: #777"> mix-blend-mode:difference</span></td>
    </tr>
    <tr>
        <td><span>op:0</span><span style="padding-left:15px;color: #777"> opacity: 0</span></td>
        <td><span>ov:hidden</span><span style="padding-left:15px;color: #777"> overflow: hidden</span></td>
        <td><span>ov:0</span><span style="padding-left:15px;color: #777">overflow</span></td>
    </tr>
    <tr>
        <td><span>ov-x:0</span><span style="padding-left:15px;color: #777">overflow-x</span></td>
        <td><span>ov-y:0</span><span style="padding-left:15px;color: #777">overflow-y</span></td>
        <td><span>pd:3px</span><span style="padding-left:15px;color: #777"> padding:3px;</span></td>
    </tr>
    <tr>
        <td><span>pn:none</span><span style="padding-left:15px;color: #777"> pointer:none</span></td>
        <td><span>ps:fixed</span><span style="padding-left:15px;color: #777"> position:fixed</span></td>
        <td><span>st:red  </span><span style="padding-left:15px;color: #777"> stroke:red</span></td>
    </tr>
    <tr>
        <td><span>st-do: stroke-dashoffset:0</span></td>
        <td><span>st-da:0</span><span style="padding-left:15px;color: #777">stroke-dasharray:0</span></td>
        <td><span>t:50%</span><span style="padding-left:15px;color: #777"> top:50%</span></td>
    </tr>
    <tr>
        <td><span>t:.5,.5</span><span style="padding-left:15px;color: #777"> transform: translate(50%,50%)</span></td>
        <td><span>tx:.5</span><span style="padding-left:15px;color: #777"> transform: translateX(50%)</span></td>
        <td><span>ty:.5</span><span style="padding-left:15px;color: #777"> transform: translateY(50%)</span></td>
    </tr>
    <tr>
        <td><span>sc:.5,.5</span><span style="padding-left:15px;color: #777"> transform: scale(50%,50%)</span></td>
        <td><span>sc-x:.5</span><span style="padding-left:15px;color: #777"> transform: scaleX(50%)</span></td>
        <td><span>sc-y:.5</span><span style="padding-left:15px;color: #777"> transform: scaleY(50%)</span></td>
    </tr>
    <tr>
        <td><span>sk:50d,50d</span><span style="padding-left:15px;color: #777"> transform: skew(50deg,50deg)</span></td>
        <td><span>sk-x:50d</span><span style="padding-left:15px;color: #777"> transform: skewX(deg)</span></td>
        <td><span>sk-y:50r</span><span style="padding-left:15px;color: #777"> transform: skewY(rad)</span></td>
    </tr>
    <tr>
        <td><span>rt:50deg</span><span style="padding-left:15px;color: #777"> transform: rotate(rad)</span></td>
        <td><span>tx-dc:u</span><span style="padding-left:15px;color: #777">text-decoration</span></td>
        <td><span>tx-tr:0</span><span style="padding-left:15px;color: #777">text-transform</span></td>
    </tr>
    <tr>
        <td><span>fl-d:c</span><span style="padding-left:15px;color: #777">flex-direction:column</span></td>
        <td><span>js-c:fb</span><span style="padding-left:15px;color: #777"> justify-content:flex-between</span></td>
        <td><span>tx-a:r</span><span style="padding-left:15px;color: #777"> text-align:right</span></td>
    </tr>
    <tr>
        <td><span>vr-al:m</span><span style="padding-left:15px;color: #777"> vertical-align:middle</span></td>
        <td><span>al-it:fx-cr</span><span style="padding-left:15px;color: #777"> align-items:flex-center</span></td>
        <td><span>fl-gr:0</span><span style="padding-left:15px;color: #777"> flex-grow:0</span></td>
    </tr>
    <tr>
        <td><span>gp:0</span><span style="padding-left:15px;color: #777">gap</span></td>
        <td><span>cl-gp:0</span><span style="padding-left:15px;color: #777">column-gap</span></td>
        <td><span>rw-gp:0</span><span style="padding-left:15px;color: #777">row-gap</span></td>
    </tr>
    <tr>
        <td><span>gr-at-rw:0</span><span style="padding-left:15px;color: #777">grid-auto-rows</span></td>
        <td><span>gr-at-fl:0</span><span style="padding-left:15px;color: #777">grid-auto-flow</span></td>
        <td><span>gr-at-cl:0</span><span style="padding-left:15px;color: #777">grid-auto-columns</span></td>
    </tr>
    <tr>
        <td><span>br-b-r-w:0</span><span style="padding-left:15px;color: #777">border-bottom-right-width</span></td>
        <td><span>br-b-l-st:0</span><span style="padding-left:15px;color: #777">border-bottom-left-style</span></td>
        <td><span>br-b-l-rd:0</span><span style="padding-left:15px;color: #777">border-bottom-left-radius</span></td>
    </tr>
    <tr>
        <td><span>ob-ft:0</span><span style="padding-left:15px;color: #777">object-fit</span></td>
        <td><span>ov-bh:0</span><span style="padding-left:15px;color: #777">overscroll-behavior</span></td>
        <td><span>pn-ev:0</span><span style="padding-left:15px;color: #777">pointer-events</span></td>
    </tr>
    <tr>
        <td><span>cr:0</span><span style="padding-left:15px;color: #777">cursor</span></td>
        <td><span>-wk-ap:0</span><span style="padding-left:15px;color: #777">-webkit-apperance</span></td>
        <td><span>z-in:0</span><span style="padding-left:15px;color: #777">z-index</span></td>
    </tr>
    <tr>
        <td><span>tr:nn</span><span style="padding-left:15px;color: #777">transition:none</span></td>
        <td><span>tr-dl:0s</span><span style="padding-left:15px;color: #777">transition-delay</span></td>
        <td><span>tr-dr:0s</span><span style="padding-left:15px;color: #777">transition-duration</span></td>
    </tr>
    <tr>
        <td><span>tr-pr:0s</span><span style="padding-left:15px;color: #777">transition-property</span></td>
        <td><span></span><span style="padding-left:15px;color: #777"></td>
        <td><span></span><span style="padding-left:15px;color: #777"></td>
    </tr>
</table>
  <br/>


## Handle 'url()' in value
```
bi:url('../bar/foo.jpg') => background-image:url("../bar/foo.jpg")
```

## Escaping white space 
use `\` instead of `,`  
this allow usage of ',' for other fucntionality, and prevent conflcit in custom selector prefix (allow both?) 
```
border:solid,px,red => border:solid\1px\red
(.foo + &):c:red => (.foo\+\&):c:red
```

## Transform
```
sc:2 rt:12deg ts:-50%\-50%
```

## Unit Less == % 
```
0.625 = 6.25%
0.5   = 50%
1     = 100%
2     = 200%
```


## Component
```
$(.foo:checked + &):(p:10px f:12px,22px,bold bg:red b:none)
```
<br>
<br>

# EXAMPLE

````html
space-y:25fy  w:calc(32px\+\11))
d:block bg:$light py:{$a,$b} c:$primary font:$Ubuntu
````

Old syntax
```html
<button class="
    | appearance:none bg:none abs fit tl:0 block transform shift-x:-50% 
    | anim-in:shift-x:0% 
    | anim-in:tween:all,1s,1.3s,easeOut">
    <span class="
        | iblock abs tr:0 radius:100px h:100%
        | transform scale:0 shift-x:50% 
        | anim-in:scale:1 anim-in:shift-x:0%
        | anim-in:tween:all,1s,1.3s,easeOut">
        <span class="bg:#fff abs t:0 l:50% block w:300% h:fit"></span>
        <span class="radius:100px mask bg:blue  abs tl:0 block fit"></span>
    </span>
    <span class="
        | pointer:none iblock abs tl:0 fit radius:100px mask 
        | anim-in:tween:all,0.9s,1.7s,easeOut2 
        | transform shift-x:-100% anim-in:shift-x:0%">
        <span class="
            | iblock fit border:solid,2px,light radius:100px 
            | anim-in:tween:all,0.9s,1.7s,easeOut2 
            | transform shift-x:100% anim-in:shift-x:0%">
        </span>
    </span>
</button>
````
New syntax
```html
<button class="
    | -wk-ap|bg:nn ps:a w|h:1 t|l:0 dp:b tx:-.5 enter:tx:0|ts:*,1,1.3,o2
    | px:.625@m">
    <span class="
        | d:ib p:a t|r:0 br:100 h:1 s:0 tx:.5 
        | :hover:s:1|tx:0|ts:*,1,1.3,o3">
        <span class="b:#f p:a t:0 l:0.5 d:b w:3 h:1"></span>
        <span class="br:100 of:h bg:bl ps:a t|l:0 d:b w|h:1"></span>
    </span>
    <span class="
        | pn:nn dp:ib ps:a t|l:0 w|h:1 br:100 t-x:-1
        | ov:h enter:tr:a,0.9,1.7,o2|tx:0">
        <span class="
            | tx:1 dp:ib w|h:1 bd:s,2,#f bd-br:100 
            | enter:t:*,0.9,1.7,o2|tx:0">
        </span>
    </span>
</button>
```

## Colors
can use 1, 2 or 3 or 6 hexaad let utility css auto fill:  
```
#a      => #aaaaaa  
#ab     => #ababab  
#abc    => #abcabc  
#abcdef => #abcdef  
```

```html
<div class="c:#f bg:#ef bd:s,1,#efa"></div>
```
```css
... {
    color: #ffffff;
    background: #efefef;
    border: solid,1px#efaefa;
}
```
## Inline Math
```html
<div class="p:10px*2 m:10px/2 l:5px+5px t:5px-5px bd:s,5^2,#0"></div>
```

```css
... {
    padding: 20px;
    margin: 5px;
    left: 10px;
    top: 0px;
    border: solid 25px #000
}
```

## Inline loop

```js
(for:i,5):bs:0,2^i,2^i,#0x12

(for:i,0..5):bs:0,2^i,2^i,#0x12
```

```css
... {
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.12), 
        0 2px 2px rgba(0,0,0,0.12), 
        0 4px 4px rgba(0,0,0,0.12), 
        0 8px 8px rgba(0,0,0,0.12),
        0 16px 16px rgba(0,0,0,0.12);
}
```

# Example
```html

    <button 
        @click="${ this.slidePrev }" 
        class="
            cursor:pointer group rel transform tween:all,0.5s,easeOut 
            c:#fff ${selectedIndex > 0 ? 'scale:1' : 'scale:0' } abs 
            t:50% l:60fx shift-x:-50% transform shift-y:-50% pointer:auto
            bg:primary h:50px w:50px radius:100px hover:scale:1.2!  
            hover:border:solid,1px,primary hover:c:primary mask ">
        <span class="
            abs tl:0 w:fit h:fit tween:transform,0.5s,easeOut bg:#fff 
            transform scale:0  group-hover:scale:1">
        </span>
        <span class="
            group-hover:c:primary bg:none c:#fff z:2 block 
            tween:all,0.5s,easeOut abs tl:50% 
            l:50% w:10px h:10px transform scale:1  shift-x:-50% 
            rotate:45deg group-hover:scale:0.8! shift-y:-50%">
            <span class="
                bg:currentColor block w:2px h:10px radius:3px abs l:0 t:0">
            </span>
            <span class="
                bg:currentColor block w:10px h:2px radius:3px abs l:0 b:0">
            </span>
        </span>
    </button>
```

```html
    <button 
        @click="${this.slidePrev}" 
        class="
            $foo:r:3;p:a;b:c;d:b;:h>:a:line,1.3,.2,o
            @k[line]0{ty:1;o:0}.5{ty:0.7;o:.2}1:{ty:0;o:1}
            c:p p:r t:0.5,> c:#f t:.5 l:60f t:-.5 o:h p:a b:c
            b:s,1,cc r:100 w:50,30 h:12,10 s:${ii>0|0} :b:p:a :b:tl:0 :b:wh:1 
            :b:t:*,.5,> :b:b:#f :b:s:0 :h:s:1.2! :h:c:$c0 :h:b:#f :h:b:s:1
            ">
        <span class=
            "b:n c:#f z:2 d:b p:a tl:.5 l:.5 ti:0.5,o wh:10 t:-.5 r:45d 
            s:1 :h>:s:0.8 :h>:r:45">
            <span class="w:2 h:10 foo tl:0"></span>
            <span class="w:10 h:2 foo bl:0"></span>
        </span>
    </button>
```