@zuzjs/ui 0.4.0 → 0.4.2

package/dist/funs/css.js

@@ -1,145 +1,193 @@
+import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
+import { cssAnimationCurves, cssDirect, cssProps, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
-import { cssProps } from "./stylesheet.js";
-import { isColor, isHexColor, isNumber } from "./index.js";
 class CSS {
-    unit;
+    cx;
+    cache;
     PROPS;
     DIRECT;
-    IGNORE;
-    chars;
     hashids;
-    cx;
-    cache;
-    pseudoRegExp;
-    // pseudoPattern: string;
-    pseudoList;
-    // baseRegex: RegExp;
-    pseudoCounter;
-    pseudoPattern;
-    pseudoReg;
-    propCounter;
-    keysWithoutCommaToSpace;
+    chars;
     rgbaRegex;
+    IGNORE;
+    unit;
+    keysWithoutCommaToSpace;
+    propCounter;
     seperator;
+    pseudoList;
+    ids;
     constructor(options) {
         const opts = options || {};
+        this.cx = [];
+        this.cache = {};
         this.unit = opts.unit || `px`;
-        this.hashids = new Hashids('', 4);
-        this.chars = "#abcdefghijklmnopqrstuvwxyz0123456789";
         this.seperator = `__@@__`;
-        this.PROPS = cssProps;
+        this.hashids = new Hashids(__SALT, 5);
+        this.chars = "#@_-[]{}();:^/!^&*+='\"`,.~abcdefghijklmnopqrstuvwxyz0123456789";
+        this.rgbaRegex = /\b\w+\[\d+,\d+,\d+(?:,\d+)?\]/g;
+        this.pseudoList = [
+            "@before", "@after", "@active", "@checked", "@default", "@disabled", "@empty", "@enabled", "@first", "@firstChild", "@firstOfType", "@focus", "@hover", "@indeterminate", "@inRange", "@invalid", "@lastChild", "@lastOfType", "@link", "@not", "@nthChild", "@nthLastChild", "@nthLastOfType", "@nthOfType", "@onlyChild", "@onlyOfType", "@optional", "@outOfRange", "@readOnly", "@readWrite", "@required", "@root", "@scope", "@target", "@valid", "@visited"
+        ];
         this.IGNORE = [
             `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`
         ];
-        this.DIRECT = {
-            "content": "content:'';",
-            "bold": "font-weight: bold;",
-            "flex": "display:flex;",
-            "cols": "flex-direction:column;",
-            "ass": "align-self:flex-start;",
-            "ais": "align-items:flex-start;",
-            "aib": "align-items:baseline;",
-            "aic": "align-items:center;",
-            "aie": "align-items:flex-end;",
-            "jcs": "justify-content:flex-start;",
-            "jcc": "justify-content:center;",
-            "jce": "justify-content:flex-end;",
-            "tal": "text-align: left;",
-            "tac": "text-align: center;",
-            "tar": "text-align: right;",
-            "tas": "text-align: justify;",
-            "fill": "top: 0px;left: 0px;right: 0px;bottom: 0px;",
-            "rel": "position:relative;",
-            "abs": "position:absolute;",
-            "fixed": "position:fixed;",
-            "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
-            "tdn": "text-decoration:none;",
-            "tdu": "text-decoration:underline;",
-            "nous": "user-select:none;",
-            "nope": "pointer-events:none;",
-            "ph": "padding-left:__VALUE__;padding-right:__VALUE__;",
-            "pv": "padding-top:__VALUE__;padding-bottom:__VALUE__;",
-            "mh": "margin-left:__VALUE__;margin-right:__VALUE__;",
-            "mv": "margin-top:__VALUE__;margin-bottom:__VALUE__;",
-            "translate": "transform:translate(__VALUE__);",
-            "translateX": "transform:translateX(__VALUE__);",
-            "translateY": "transform:translateY(__VALUE__);",
-            "rotate": "transform: rotate(__VALUE__);",
-            "scale": "transform: scale(__VALUE__);",
-            "anim": "transition: all __VALUE__ linear 0s;",
-        };
         this.keysWithoutCommaToSpace = [
             `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
-            `border`, `border-bottom`, `border-top`, `border-left`, `border-right`
+            `border`, `border-bottom`, `border-top`, `border-left`, `border-right`,
+            `grid-template-rows`, `grid-template-columns`
         ];
         this.propCounter = {};
-        this.cx = [];
-        this.cache = {};
-        // 1. this.baseRegex = /(\$?[\w%!-]+:\$?[\w%!-]+(?:,[-\w%!.]+)*)|(\$?[\w%!-]+:\$?[-\w%,.!]+)/g;
-        // 2. this.baseRegex = /(\$?[\w%!-]+:\$?\w+\[(.*?)\]+)|(\$?[\w%!-]+:\$?[-\w%,.!]+|\$?[-\w%,.!]+)/g;
-        // 3. this.baseRegex = /(\$?[\w%!-]+:\$?[\w%!-]+(?:\[[^\]]*\])?(?:,[^\s,]+)*)|(\$?[\w%!-]+:\$?[-\w%,.!]+|\$?[-\w%,.!]+)/g;
-        // let __baseRegex = /\$?\b\w+:\$?(?:\d+(\.\d+)?%?|\w+\[[^\]]*\]|[-\w%!,.]+|[\w%!-]+)/g
-        // const _any = `([^\\s]+)`
-        // const _bracketWord = `\\w+\\[[^\\]]*\\]`
-        // // const __number = `\\-?\\d+(\\.\\d+)?%?(?:[[a-z]+]?)?`
-        // // (?:\.?|\d+)?
-        // const _number = `\\-?\\d*(\\.\\d+)?%?(?:[[a-z]+]?)?`
-        // const _baseRegex = `\\$?\\b\\w+:(?:`+
-        //         `\\$?${_number},?${_number}?` + // 50|50%|50.5
-        //         `|\\$?${_bracketWord}` + // calc[12 - 22] | color:rgba[255,255,255,0.5] 
-        //         `|(?:${_any},${_any},${_any}\\b)` +
-        //         // `|(?:${_number},${_number},${_number},${_number})` +
-        //         // `|(?:${_number}[,${_number}]?)` +
-        //         `|\\$?[\\w-]+` +
-        //     `)!?`
-        // console.log(_baseRegex)
-        // this.baseRegex = new RegExp(_baseRegex, `g`)
-        this.rgbaRegex = /\b\w+\[\d+,\d+,\d+(?:,\d+)?\]/g;
-        this.pseudoList = ["before", "after", "active", "checked", "default", "disabled", "empty", "enabled", "first", "first-child", "first-of-type", "focus", "hover", "indeterminate", "in-range", "invalid", "last-child", "last-of-type", "link", "not", "nth-child", "nth-last-child", "nth-last-of-type", "nth-of-type", "only-child", "only-of-type", "optional", "out-of-range", "read-only", "read-write", "required", "root", "scope", "target", "valid", "visited"];
-        this.pseudoCounter = {};
-        this.pseudoList.map((p) => this.pseudoCounter[p] = 0);
-        this.pseudoPattern = this.pseudoList.map((word) => word).join('|');
-        this.pseudoReg = new RegExp(this.pseudoPattern, `g`);
-        // this.pseudoRegExp = /&(\w+)\(\s*([^()]*?(?:\([^()]*\))*[^()]*)\s*\)/g
-        this.pseudoRegExp = /(?:&|.)(\w+)\(\s*([^()]*?(?:\([^()]*\))*[^()]*)\s*\)/g;
+        this.ids = [];
+        this.PROPS = cssProps;
+        this.DIRECT = cssDirect;
     }
-    getStyleSheet(cache, indentLevel = 0, pseudo = false) {
+    styleSheet(cache, pseudo = ``) {
         const self = this;
-        const indent = ``; //`    `.repeat(indentLevel)
-        let scss = ``;
-        // for( const key in cache){
-        Object.keys(cache).map((key) => {
-            // if ( key.includes(`actions`) )
-            //     console.log(`kc`, key, cache[key])
-            if (`object` == typeof cache[key]) {
-                const _key = self.pseudoList.filter(x => key.indexOf(x) > -1);
-                scss += `${indent}${_key.length > 0 ? `&:${_key[0]}` : `\n.${key.split(self.seperator)[0]}`}{`;
-                scss += self.getStyleSheet(cache[key], indentLevel + 1, true
-                // _key.length > 0 ? true : false
-                );
-                scss += `${indent}}`;
+        const scss = [];
+        const build = (key, value) => {
+            let css = `${self.pseudoList.includes(`@${key}`) ? `&:` : `.`}${key}{`;
+            if (`object` == typeof value) {
+                for (const prop in value) {
+                    if (`object` == typeof value[prop]) {
+                        css += build(prop, value[prop]);
+                    }
+                    else {
+                        css += value[prop];
+                    }
+                }
             }
             else {
-                // console.log(`getSheet`, key, cache[key])
-                if (pseudo) {
-                    scss += `${indent}${cache[key]}`;
+                css += value;
+            }
+            css += `}`;
+            return css;
+        };
+        for (const key in cache) {
+            const base = cache[key];
+            if (key == FIELNAME_KEY) {
+                scss.push(`/**\n* @file ${base}\n*/`);
+                continue;
+            }
+            else if (key.startsWith(LINE_KEY)) {
+                scss.push(base);
+                delete cache[key];
+            }
+            else {
+                const _ = build(key, base);
+                if (!self.ids.includes(_)) {
+                    self.ids.push(_);
+                    scss.push(_);
                 }
-                else {
-                    scss += `\n${indent}.${key}{`;
-                    scss += `${indent}${cache[key]}`;
-                    scss += `${indent}}`;
+            }
+        }
+        return scss.join(`\n`);
+    }
+    _styleSheet(cache) {
+        const self = this;
+        const scss = [];
+        const mainKeys = [];
+        const extractMasterKeys = (key, value) => {
+            const baseKey = self.cleanKey(key);
+            if (`string` === typeof value) {
+                if (!mainKeys.includes(baseKey)) {
+                    scss.push(`.${baseKey}{${value}}`);
+                    mainKeys.push(baseKey);
                 }
             }
-        });
-        return scss;
+            else {
+                for (const prop in value) {
+                    extractMasterKeys(prop, value[prop]);
+                }
+            }
+        };
+        const build = (key, value, level = 0) => {
+            const baseKey = self.cleanKey(key);
+            let css = `${self.pseudoList.includes(`@${baseKey}`) ? `&:${baseKey}` : `${baseKey.includes(`.`) ? `` : `.`}${baseKey}`}{`;
+            if (`object` === typeof value) {
+                const _extend = [];
+                for (const prop in value) {
+                    if (`string` === typeof value[prop]) {
+                        _extend.push(`.${prop}`);
+                    }
+                }
+                if (_extend.length > 0)
+                    css += `@extend ${_extend.join(`, `)};`;
+                for (const prop in value) {
+                    if (`object` === typeof value[prop]) {
+                        css += build(prop, value[prop], level + 1);
+                    }
+                }
+            }
+            css += `}`;
+            return css;
+        };
+        for (const key in cache) {
+            if (key == FIELNAME_KEY) {
+                scss.push(`/**\n* @file ${cache[key]}\n*/`);
+                continue;
+            }
+            extractMasterKeys(key, cache[key]);
+        }
+        for (const key in cache) {
+            if (key.startsWith(LINE_KEY)) {
+                scss.push(cache[key]);
+                delete cache[key];
+            }
+        }
+        for (const key in cache) {
+            if (`object` == typeof cache[key]) {
+                scss.push(build(key, cache[key]));
+            }
+        }
+        return scss.join(`\n`);
     }
-    makeColor() {
+    cleanKey(key) {
+        return key.split(this.seperator)[0].replace(`@`, ``);
+    }
+    deepClean(cache, level = 0) {
+        const self = this;
+        const _ = {};
+        const oid = (k, value) => {
+            const [_a, _z] = k.split(self.seperator);
+            const keys = [_a];
+            if (`object` == typeof value) {
+                for (const o in value) {
+                    keys.push(oid(o, value[o]));
+                }
+            }
+            return keys.join(`-`);
+        };
+        Object.keys(cache).map((_k) => {
+            const __k = self.cleanKey(_k);
+            if (`object` == typeof cache[_k]) {
+                const _d = oid(_k, cache[_k]);
+                let _indices = 0;
+                for (let i = 0; i < _d.length; i++) {
+                    _indices += self.chars.indexOf(_d.charAt(i));
+                }
+                const _id = `z${self.hashids.encode(_indices)}`;
+                if (!_[_id]) {
+                    const cleaned = self.deepClean(cache[_k], level + 1);
+                    if (level == 0 && self.pseudoList.includes(`@${__k}`)) {
+                        self.cx.push(_id);
+                        _[_id] = { [__k]: cleaned };
+                    }
+                    else
+                        _[__k] = cleaned;
+                }
+            }
+            else {
+                _[__k] = cache[_k];
+            }
+        });
+        return _;
     }
     makeUnit(k, v) {
-        // console.log(`unit`, k, v)
         if (k == `rotate`) {
             return `deg`;
         }
+        if (cssTransformKeys.includes(k))
+            return ``;
         if (typeof v == "string" && (!isNumber(v) || this.IGNORE.indexOf(k) > -1))
             return ``;
         return this.unit;
@@ -148,31 +196,22 @@ class CSS {
         if (k in this.PROPS) {
             const key = this.PROPS[k];
             let value;
-            v = v.trim(); //.replace(`\``, ``)
+            v = v.trim();
             let hasImportant = v.charAt(v.length - 1) == `!`;
             v = hasImportant ? v.slice(0, -1) : v;
             let important = hasImportant ? ` !important` : ``;
-            // if ( key.includes(`opacity`)) console.log(`makevalue`, key, k, v)
-            /**
-             * Variable
-             */
             if (v.charAt(0) == `$`) {
                 value = `var(--${v.replace(`$`, ``)})`;
             }
             else if (v.trim() == `transparent`) {
                 value = `rgba(0,0,0,0)`;
             }
-            /**
-             * border
-             */
             else if ([`border`, `borderBottom`, `borderTop`, `borderLeft`, `borderRight`].includes(k)) {
                 const _parts = [];
-                // console.log(`--border`, key, v)
                 if (v.match(this.rgbaRegex)) {
                     _parts.push(v.match(this.rgbaRegex)[0].replace(`[`, `(`).replace(`]`, `)`));
                     v = v.replace(this.rgbaRegex, ``).trim().replace(`,,`, `,`);
                 }
-                // console.log(`-border`, key, v, _parts)
                 v.split(`,`).map((p) => {
                     if (p.includes(`rgb`) || p.includes(`rgba`) || isColor(`#${p}`) || p.startsWith(`$`)) {
                         if (p.includes(`rgb`) || p.includes(`rgba`)) {
@@ -194,13 +233,8 @@ class CSS {
                     }
                 });
                 value = _parts.join(` `);
-                // console.log(`border`, value)             
             }
-            /**
-             * Color
-             */
             else if ([`color`, `bg`, `background`, `background-color`, `backgroundColor`].includes(key)) {
-                // else if ( [`color`].includes( key  ) ){
                 if (v.charAt(0) == `#`) {
                     v = v.substring(1);
                 }
@@ -214,16 +248,9 @@ class CSS {
                 else
                     value = v.trim();
             }
-            /**
-             * FontWeight
-             */
             else if (key == `font-weight`) {
                 value = v;
             }
-            /**
-             * calc
-             * passed as calc[value]
-             */
             else if (v.match(/\[(.*?)\]/g)) {
                 try {
                     const vs = v.match(/\[(.*?)\]/g)[0].slice(1, -1);
@@ -233,17 +260,13 @@ class CSS {
                 catch (e) { }
             }
             else {
-                // ${v.charAt(0) == `$` ? `var(--${v.substring(1)})` : v}
-                // if ( key.includes(`padding`) ) console.log(`->padding`, v)
                 if (v.includes(`,`)) {
-                    // console.log(`vwithcomma`, v)
                     let __v = [];
                     v.split(`,`).map((_) => {
                         if (_.startsWith(`$`)) {
                             __v.push(`var(--${_.substring(1)})`);
                         }
                         else {
-                            // console.log(`comma`, key, v, this.makeUnit(key, v))
                             __v.push(`${_}${this.makeUnit(key, _)}`);
                         }
                     });
@@ -254,14 +277,27 @@ class CSS {
             }
             if (!value)
                 return ``;
-            // if ( key == `background` ) console.log(`makevalue`, key, value)
-            // if ( key.includes(`border`) ) console.log(`--border`, `${key}: ${value}${important};`)
             value = value.includes(`,`) && !this.keysWithoutCommaToSpace.includes(key) ? value.replace(`,`, ` `) : value;
-            // if ( key.includes(`padding`) ) console.log(`->padding`, `${key}: ${value}${important};`)
+            if (key == `content`)
+                value = `"${value}"`;
             return `${key}: ${value}${important};`;
         }
         return ``;
     }
+    calcIndexes(str) {
+        let _indices = [];
+        for (let i = 0; i < str.length; i++) {
+            _indices.push(this.chars.indexOf(str.charAt(i)).toString());
+        }
+        return _indices.join(``);
+    }
+    mmakeID(k, v, _out) {
+        const cs = [];
+        const out = this.calcIndexes(k) + this.calcIndexes(v) + this.calcIndexes(_out);
+        console.log(this.hashids.encode(out));
+        cs.push(out.charAt(0).match(/\d+/g) ? `z` : ``, out);
+        return cs.join(``);
+    }
     makeID(k, v, _out) {
         const self = this;
         const _css = _out.toString().replace(/;|:|\s/g, "");
@@ -277,80 +313,60 @@ class CSS {
         if (v.toString().indexOf("-") > -1) {
             v.toString().split("-").map(c => _cp += c.substring(0, 1));
         }
-        return `${_cp}${self.hashids.encode((self.PROPS[k] ? self.PROPS[k].length : 0) + _indices + (isNaN(parseInt(v)) ? 0 : parseInt(v)))}`.replace(/\s|\$/g, '-');
+        const _id = `${_cp}${self.hashids.encode((self.PROPS[k] ? self.PROPS[k].length : 0) + _indices + (isNaN(parseInt(v)) ? 0 : parseInt(v)))}`.replace(/\s|\$/g, '-');
+        const _kw = _id in self.propCounter ? ++self.propCounter[_id] : self.propCounter[_id] = 1;
+        return _id;
     }
-    makeIDFromObject(key, obj) {
+    lexer(line) {
         const self = this;
-        const out = [key];
-        const fcs = [key.charAt(0)];
-        const vals = [];
-        const build = (o) => {
-            Object.keys(o).map((n) => {
-                if (`object` == typeof o[n]) {
-                    build(o[n]);
-                }
-                else {
-                    fcs.push(n.charAt(0));
-                    vals.push(o[n]);
-                }
-            });
-        };
-        build(obj);
-        let _indices = 0;
-        let _cp = "";
-        for (const ot of vals) {
-            const _css = ot.toString().replace(/;|:|\s/g, "");
-            for (let i = 0; i < _css.length; i++) {
-                _indices += self.chars.indexOf(ot.charAt(i));
-            }
-            if (ot.indexOf("-") > -1) {
-                ot.split("-").map((c) => _cp += c.substring(0, 1));
-            }
-        }
-        return `${_cp}${self.hashids.encode(_indices)}`.replace(/\s/g, '-');
-    }
-    parseRawLine(line) {
-        const self = this;
-        const result = {};
-        try {
-            const matches = line.match(self.pseudoRegExp);
-            if (matches) {
-                // if ( line.includes(`opacity`) ) console.log(`matches`, matches)
-                matches.map((m) => {
-                    const pseudo = self.pseudoRegExp.exec(m); ///&\w+/g.exec(m)
-                    // if ( m.includes(`opacity`) ) console.log(`pseudo`, m, pseudo)
-                    if (pseudo) {
-                        const _kw = pseudo[1] in self.propCounter ? ++self.propCounter[pseudo[1]] : self.propCounter[pseudo[1]] = 1;
-                        const psd = `${pseudo[1]}${this.seperator}${_kw}`;
-                        result[psd] = self.parseRawLine(pseudo[2]);
-                    }
-                    line = line.replace(self.pseudoRegExp, ``);
-                });
+        let word = ``;
+        let levels = [];
+        let isLevel = false;
+        let classes = {};
+        let hasBracket = false;
+        const processWord = () => {
+            word = word.trim();
+            if (!word.includes(`[`))
+                word = word.replace(/\s+/g, ``);
+            if (word == ``)
+                return;
+            const _kw = word in self.propCounter ? ++self.propCounter[word] : self.propCounter[word] = 1;
+            if (isLevel) {
+                levels.push(`${word}${self.seperator}${_kw}`);
+                isLevel = false;
             }
-            // if ( line.includes(`opacity`) ) console.log(`matches`, result)
-            let word = ``;
-            let hasBracket = false;
-            const processWord = () => {
-                word = word.replace(/(`|{|})/g, ``);
-                const _kw = word in self.propCounter ? ++self.propCounter[word] : self.propCounter[word] = 1;
+            else {
+                let _keyWord = `${word}${_kw}`.trim();
                 if (word.includes(`:`)) {
                     const [key, value] = word.split(`:`);
                     const _kk = key in self.propCounter ? ++self.propCounter[key] : self.propCounter[key] = 1;
-                    result[`${key}${_kk}${value}`.trim()] = `${key}:${value}`.trim();
-                    // if (value) {
-                    // } else {
-                    //     result[`${word}${_kk}`] = word // true;
-                    // }
+                    _keyWord = `${key}${_kk}${value}`.trim();
                 }
-                else {
-                    result[`${word}${_kw}`.trim()] = word.trim();
+                classes = setDeep(classes, `${levels.join(`^`)}${levels.length > 0 ? `^` : ``}${word}`, word, `^`);
+            }
+            word = ``;
+        };
+        line
+            .replace(/\`|\}|\{/g, ``)
+            .trim()
+            .replace(/\s+/g, ` `)
+            .split(``)
+            .map((char, i, arr) => {
+            const nextChar = arr[i + 1];
+            if (char == ` ` && word != `` && ![`(`, `)`, `[`, `]`, `:`].includes(nextChar) && !hasBracket) {
+                processWord();
+            }
+            else {
+                if ([`&`].includes(char)) {
+                    isLevel = true;
                 }
-                word = ``;
-            };
-            line.trim().split(``)
-                .map(char => {
-                if (char == ` ` && word != `` && !hasBracket) {
+                else if ([`(`].includes(char) && isLevel) {
+                    processWord();
+                }
+                else if ([`)`].includes(char)) {
                     processWord();
+                    levels.splice(-1, 1);
+                    isLevel = false;
                 }
                 else {
                     word += char;
@@ -359,124 +375,102 @@ class CSS {
                     if (char == `]` && hasBracket)
                         hasBracket = false;
                 }
-            });
-            if (word != ``)
-                processWord();
-            // line = line.charAt(0) == `\`` ? line.substring(1) : line
-            // line = line.charAt(line.length - 1) == `\`` ? line.substring(0,) : line
-            // if ( line.includes(`opacity`) )
-            // console.log(`oppc`, line)
-            // const baseProperties = line.match(self.baseRegex);
-            // if (baseProperties) {
-            //     // console.log(line, baseProperties)
-            //     baseProperties.forEach(prop => {
-            //         const [key, value] = prop.split(':');
-            //         if (value) {
-            //             if ( result[key] ){
-            //                 const _kk = key in self.propCounter ? ++self.propCounter[key] : self.propCounter[key] = 1
-            //                 result[`${key}${_kk}`] = `${key}:${value}`;
-            //             }else
-            //                 result[key] = `${key}:${value}`;
-            //         } else {
-            //             const _kk = prop in self.propCounter ? ++self.propCounter[prop] : self.propCounter[prop] = 1
-            //             result[`${prop}${_kk}`] = prop // true;
-            //         }
-            //     });
-            // }
-            // const extraWords = line.replace(self.baseRegex, ``).match(/(?<!\w|\$|&)[a-zA-Z0-9-]+(?!\w)/g)
-            // if ( extraWords ) {
-            //     extraWords.map(w => result[w] = w   )
-            // }
-        }
-        catch (e) {
-            // console.log(e)
-        }
-        // if( line.includes(`gfile`))
-        //     console.log(result)
-        return result;
+            }
+        });
+        if (word != ``)
+            processWord();
+        return classes;
     }
-    makeCSS(line) {
+    processLine(line) {
         const self = this;
-        // console.log(line)
-        const rest = self.parseRawLine(line);
-        // if ( line.includes(`opacity`) ) console.log(line, rest)
-        // console.log(rest)
-        const value = (_k, pseudo = ``) => {
-            if (_k in self.DIRECT) {
-                const _out = self.DIRECT[_k];
-                const _id = self.makeID(_k, _k + pseudo, _out);
-                if (pseudo == ``)
-                    self.cx.push(_id);
-                return { [_id]: _out };
-            }
-            else if (_k.includes(`:`)) {
-                const [key, _val] = _k.split(`:`);
-                if (key in self.PROPS) {
-                    const _out = self.makeValue(key, _val);
-                    const _id = self.makeID(key, _val + pseudo, _out);
-                    if (pseudo == ``)
-                        self.cx.push(_id);
-                    return { [_id]: _out };
+        if (line.startsWith(FIELNAME_KEY)) {
+            self.cache = { ...self.cache, [FIELNAME_KEY]: line.split(`:`)[1] };
+        }
+        else {
+            const value = (_k, pseudo = ``) => {
+                if (_k.includes(`:`)) {
+                    const [key, _val] = _k.split(`:`);
+                    if (key in self.PROPS) {
+                        const _out = self.makeValue(key, _val);
+                        const _id = self.makeID(key, _val + pseudo, _out);
+                        if (pseudo == ``)
+                            self.cx.push(_id);
+                        return { [_id]: _out };
+                    }
+                    else if (key in self.DIRECT) {
+                        const hasImportant = _val.endsWith(`!`);
+                        const important = hasImportant ? ` !important` : ``;
+                        let val = hasImportant ? _val.slice(0, -1) : _val;
+                        var _out = ``;
+                        if (key == `extend`) {
+                            val = val.split(`,`).reduce((acc, v) => {
+                                acc.push(`${v.startsWith(`.`) ? `` : `.`}${v.trim()}`);
+                                return acc;
+                            }, []).join(`,`);
+                        }
+                        else if (key == `anim`) {
+                            let delay = `0s`;
+                            let curve = `linear`;
+                            let duration = val;
+                            if (val.includes(",")) {
+                                _out = self.DIRECT[key];
+                                const [_duration, ..._rest] = val.split(`,`);
+                                let rest = _rest.join(",").trim();
+                                duration = _duration;
+                                if (rest.includes(`[`) && rest.includes(`]`)) {
+                                    for (const curv in cssAnimationCurves) {
+                                        if (rest.startsWith(curv)) {
+                                            curve = `${rest.replace(curv, cssAnimationCurves[curv]).replace(`[`, `(`).replace(`]`, `)`)}`;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+                            _out = self.DIRECT[key]
+                                .replace(`__VALUE__`, duration)
+                                .replace(`__CURVE__`, curve)
+                                .replace(`__DELAY__`, delay);
+                        }
+                        else {
+                            const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`;
+                            _out = self.DIRECT[key].includes(`__VALUE__`) ?
+                                self.DIRECT[key].replace(/__VALUE__/g, __value).replace(`;`, `${important};`) : self.DIRECT[key];
+                        }
+                        const _id = self.makeID(key, key + pseudo, _out);
+                        if (pseudo == ``)
+                            self.cx.push(_id);
+                        return { [_id]: _out };
+                    }
                 }
-                else if (key in self.DIRECT) {
-                    const hasImportant = _val.endsWith(`!`);
-                    const val = hasImportant ? _val.slice(0, -1) : _val;
-                    const important = hasImportant ? ` !important` : ``;
-                    const _out = self.DIRECT[key].includes(`__VALUE__`) ?
-                        self.DIRECT[key].replace(/__VALUE__/g, `${val}${self.makeUnit(key, val)}${important}`) : self.DIRECT[key];
-                    const _id = self.makeID(key, key + pseudo, _out);
+                else if (_k in self.DIRECT) {
+                    const _out = self.DIRECT[_k];
+                    const _id = self.makeID(_k, _k + pseudo, _out);
                     if (pseudo == ``)
                         self.cx.push(_id);
                     return { [_id]: _out };
                 }
-            }
-            else {
-                self.cx.push(_k.trim());
-            }
-            return {};
-        };
-        const build = (o, pseudo = ``) => {
-            let out = {};
-            Object.keys(o).map((_k) => {
-                if (`object` == typeof o[_k]) {
-                    // console.log(_k, o[_k])
-                    out = { ...out, [_k]: build(o[_k], _k) };
-                    // self.makeIDFromObject(_k, cache[_k])
-                }
-                else {
-                    out = { ...out, ...value(o[_k], pseudo) };
-                }
-            });
-            return out;
-        };
-        // console.log(rest)
-        // console.log(`buildRest`, build(rest))
-        self.cache = { ...self.cache, ...build(rest) };
-        // console.log(self.cache)
-    }
-    cleanPseudo(cache) {
-        const self = this;
-        const _ = {};
-        Object.keys(cache).map((_k) => {
-            // console.log(`cleanPseudo`, _k, cache[_k])
-            if (`object` == typeof cache[_k]) {
-                const _id = self.makeIDFromObject(_k, cache[_k]);
-                if (!_[_id]) {
-                    self.cx.push(_id);
-                    _[_id] = { [_k]: cache[_k] };
+                else if (_k.trim().match(/^[a-zA-Z0-9\-]+$/g)) {
+                    self.cx.push(_k.trim());
                 }
-                // if ( _[_id] ) console.log(`cleanPseudo`, _id, `is duplicate`, _[_id])
-                // console.log(`cleanPseudo`, _id, _k, cache[_k])
-            }
-            else {
-                // console.log(`-cleanPseudo`, _k, cache[_k])
-                _[_k] = cache[_k];
-            }
-        });
-        // console.log(`cleanedPseudo`, _)
-        return _;
+                return {};
+            };
+            const build = (o, pseudo = ``) => {
+                let out = {};
+                Object.keys(o).map((_k) => {
+                    if (`object` == typeof o[_k]) {
+                        out = { ...out, [_k]: build(o[_k], _k) };
+                    }
+                    else {
+                        out = { ...out, ...value(o[_k], pseudo) };
+                    }
+                });
+                return out;
+            };
+            const _built = build(self.lexer(line));
+            self.cache = { ...self.cache, ..._built };
+        }
     }
-    Build(css) {
+    Build(css, cli = false) {
         let self = this;
         self.cx = [];
         self.cache = {};
@@ -490,21 +484,57 @@ class CSS {
         }
         css.map((arr) => {
             arr.map((line) => {
-                self.makeCSS(line);
+                self.processLine(line);
             });
         });
-        // console.log({
-        //     cx: self.cx,
-        //     sheet: self.getStyleSheet(self.cleanPseudo(self.cache))
-        // })
-        // console.log(self.cache)
-        // console.log(self.cleanPseudo(self.cache))
-        // console.log(self.getStyleSheet(self.cleanPseudo(self.cache)))
-        // console.log(self.cache)
-        return {
+        const _cleaned = self.deepClean(self.cache);
+        const _ = {
             cx: self.cx,
-            sheet: self.getStyleSheet(self.cleanPseudo(self.cache))
+            sheet: self.styleSheet(_cleaned)
         };
+        return _;
     }
 }
 export default CSS;
+export const buildWithStyles = (source) => {
+    const _ = {};
+    const _css = new CSS();
+    if (Object.keys(source).length > 0) {
+        const _transform = [];
+        for (const prop in source) {
+            if (prop in cssWithKeys) {
+                if (cssTransformKeys.includes(cssWithKeys[prop])) {
+                    _transform.push(`${cssWithKeys[prop]}(${source[prop]}${_css.makeUnit(prop, source[prop])})`);
+                }
+                else
+                    _[cssWithKeys[prop]] = source[prop];
+            }
+            else {
+                if (cssTransformKeys.includes(prop)) {
+                    _transform.push(`${prop}(${source[prop]}${_css.makeUnit(prop, source[prop])})`);
+                }
+                else
+                    _[prop] = source[prop];
+            }
+        }
+        if (_transform.length > 0) {
+            _.transform = _transform.join(` `);
+        }
+    }
+    return _;
+};
+export const getAnimationCurve = (curve) => {
+    if (!curve)
+        return `linear`;
+    const _curves = [`spring`];
+    if (_curves.includes(curve)) {
+        switch (curve) {
+            case "spring":
+                return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
+                break;
+            default:
+                return `linear`;
+        }
+    }
+    return curve;
+};