Update index.js

CSSThreads · Jul 2, 2022 · 0115419 · 0115419
1 parent 3e72823
commit 0115419
Showing 1 changed file with 100 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -117,6 +117,8 @@ window.addEventListener('load', () => {
 // classes observation functions
 function lightObserve(classes) {
     new MutationObserver((mutations) => {
+        let styleLightWind = document.head.querySelector("style[data=\"lightwindcss\"]")
+
         for (let i in mutations) {
             // in case of the element creation
             mutations[i].addedNodes.forEach(el => {
@@ -136,10 +138,107 @@ function lightObserve(classes) {
             mutations[i].target.classList.forEach(el => {
                 if (classes.indexOf(el) === -1) {
                     classes.push(el)
+
+                    // ========================================================================================================
+                    // ========================================================================================================
+
+                    let classParams = el.split(':');
+
+                    let styleStr = ``;
+                    let breakPointOpen = false;
+
+                    // getting the breakpoint
+
+                    for (let k in lightWindCssConfig.breakpoints.screens) {
+                        if (lightWindCssConfig.breakpoints.screens[k].name == classParams[0]) {
+                            if (lightWindCssConfig.breakpoints.screens[k].min == null) {
+                                styleStr += `@media screen and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) { `;
+                                breakPointOpen = true;
+                            }
+                            else if (lightWindCssConfig.breakpoints.screens[k].max == null) {
+                                styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) { `;
+                                breakPointOpen = true;
+                            }
+                            else {
+                                styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) {`;
+                                breakPointOpen = true;
+                            }
+                            break;
+                        }
+                    }
+
+                    styleStr += `.${el.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]')}`
+
+                    for (let j = 0; j < classParams.length - 1; j++) {
+                        // selectors
+                        if (breakPointOpen && j == 0)
+                            j++;
+
+                        for (let k = 0; k < lightWindCssConfig.selectors[':'].length; k++) {
+                            if (lightWindCssConfig.selectors[':'][k].name == classParams[j] || lightWindCssConfig.selectors[':'][k].alias.indexOf(classParams[j]) != -1) {
+                                styleStr += `:${lightWindCssConfig.selectors[':'][k].selector}`
+                            }
+                        }
+                        for (let k = 0; k < lightWindCssConfig.selectors['::'].length; k++) {
+                            if (lightWindCssConfig.selectors['::'][k].name == classParams[j] || lightWindCssConfig.selectors['::'][k].alias.indexOf(classParams[j]) != -1) {
+                                styleStr += `::${lightWindCssConfig.selectors['::'][k].selector}`
+                            }
+                        }
+                    }
+
+                    styleStr += "{"
+
+                    /* ==========================================================================================
+                    Proprieties defining statred
+                    ========================================================================================== */ 
+
+                    let isFound = false;
+                    for (let k = 0; k < lightWindCssConfig.proprieties.global.length; k++) {
+                        if (isFound)
+                            break;
+                        if (lightWindCssConfig.proprieties.global[k]["value-only"]) {
+                            if (lightWindCssConfig.proprieties.global[k].values.indexOf(classParams[classParams.length - 1].split('-')[0]) != -1) {
+                                styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${classParams[classParams.length - 1].split('-')[0]}`
+                                isFound = true;
+                            }
+                        }
+                        else {
+                            // with value to resolve
+                            if (classParams[classParams.length - 1].split('-')[0] == lightWindCssConfig.proprieties.global[k].propriety || lightWindCssConfig.proprieties.global[k].alias.indexOf(classParams[classParams.length - 1].split('-')[0]) != -1) {
+                                let value = classParams[classParams.length - 1].split('-')[1]
+                                for (let l = 2; l < classParams[classParams.length - 1].split('-').length; l++) {
+                                    value += classParams[classParams.length - 1].split('-')[l]
+                                }
+                                value = value.substr(1, value.length - 2)
+                                styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${value}`
+                                isFound = true;
+                            }
+                        }
+                    }
+
+                    if (!isFound) {
+                        let value = classParams[classParams.length - 1].split('-')[1]
+                        for (let l = 2; l < classParams[classParams.length - 1].split('-').length; l++) {
+                            value += classParams[classParams.length - 1].split('-')[l]
+                        }
+                        value = value.substr(1, value.length - 2)
+
+                        styleStr += `${classParams[classParams.length - 1].split('-')[0]}: ${value}`;
+                    }
+
+                    /* ==========================================================================================
+                    Proprieties defining ended
+                    ========================================================================================== */ 
+
+                    styleStr += ";}"
+
+                    if (breakPointOpen)
+                        styleStr += '}'
+
+                    styleLightWind.innerText += styleStr
                 }
             })
         }
-        console.log(classes)
     }).observe(document.querySelector('body'), { attributes: true, subtree: true, childList: true });
 }
 function getAllClasses() {