alga-css - npm Package Compare versions

Comparing version 1.0.0-beta-44 to 1.0.0-beta-45

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-beta-44",
+  "version": "1.0.0-beta-45",
   "description": "Alga CSS is a component oriented CSS toolkit for quickly reuse CSS components and it can be stored in .alga format file as a custom CSS component and also it has many built-in customizable CSS properties that can be directly inserted to HTML Element class",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

src/cores/component.js

@@ -21,3 +21,3 @@ const postcss = require('postcss')
   if(!data) return;
-  data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, ' $1($2) ')
+  data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, '_$1($2)_')
               .replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)')
@@ -24,0 +24,0 @@

src/cores/declaration.js

@@ -7,2 +7,3 @@ const postcss = require('postcss')
 const svgHelper = require('../helpers/svgHelper.js')
+const calcHelper = require('../helpers/calcHelper.js')
 const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
@@ -75,3 +76,3 @@
             } else {*/
-              let checkDeclVal = val.value.trim().split(' ').map(i => {
+              let checkDeclVal = val.value.trim().replaceAll('_', ' ').split(' ').map(i => {
                 if(i.startsWith('refs(') || i.startsWith('props(') || i.startsWith('scopes(')) {
@@ -108,42 +109,2 @@ const arrowValues = i.split(/\(|\)/g)
                   i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-                } else if(i.startsWith('calc(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('refs(') || item.trim().startsWith('props(') || item.trim().startsWith('scopes(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      if(item.trim().startsWith('scopes(')) {
-                        item = `var(--scope-${splitValues[1]}, ${defs[splitValues[0]][splitValues[1]].value || item})`
-                      } else {
-                        item = defs[splitValues[0]][splitValues[1]].value || item
-                      }
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                } else if(i.startsWith('add(') || i.startsWith('sub(') || i.startsWith('div(') || i.startsWith('times(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('refs(') || item.trim().startsWith('props(') || item.trim().startsWith('scopes(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      if(item.trim().startsWith('scopes(')) {
-                        item = `var(--scope-${splitValues[1]}, ${defs[splitValues[0]][splitValues[1]].value || item})`
-                      } else {
-                        item = defs[splitValues[0]][splitValues[1]].value || item
-                      }
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                  
-                  if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
-                  } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
-                  } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
-                  } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
-                  }
                 }
@@ -155,2 +116,4 @@ return i
                 checkDeclVal = svgHelper(checkDeclVal)
+              } else if(checkDeclVal.startsWith('add(') || checkDeclVal.startsWith('sub(') || checkDeclVal.startsWith('div(') || checkDeclVal.startsWith('times(')) {
+                checkDeclVal = calcHelper(checkDeclVal)
               }
@@ -213,3 +176,3 @@
             } else {*/
-              declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
+              let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
                 if(i.startsWith('props(')) {
@@ -242,37 +205,13 @@ const arrowValues = i.split(/\(|\)/g)
                   i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-                } else if(i.startsWith('calc(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                } else if(i.startsWith('add(') || i.startsWith('sub(') || i.startsWith('div(') || i.startsWith('times(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                  
-                  if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
-                  } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
-                  } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
-                  } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
-                  }
                 }
                 return i
-              }).join(' ').trim(), source: val.source })
+              }).join(' ').trim()
+
+              if(checkDeclVal.startsWith('svg(')) {
+                checkDeclVal = svgHelper(checkDeclVal)
+              } else if(checkDeclVal.startsWith('add(') || checkDeclVal.startsWith('sub(') || checkDeclVal.startsWith('div(') || checkDeclVal.startsWith('times(')) {
+                checkDeclVal = calcHelper(checkDeclVal)
+              }
+
+              declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
             //}
@@ -310,3 +249,3 @@ newRule.append(declVal)
             } else {*/
-              declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
+              let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
                 if(i.startsWith('props(')) {
@@ -339,37 +278,13 @@ const arrowValues = i.split(/\(|\)/g)
                   i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-                } else if(i.startsWith('calc(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                } else if(i.startsWith('add(') || i.startsWith('sub(') || i.startsWith('div(') || i.startsWith('times(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                  
-                  if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
-                  } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
-                  } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
-                  } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
-                  }
                 }
                 return i
-              }).join(' ').trim(), source: val.source })
+              }).join(' ').trim()
+
+              if(checkDeclVal.startsWith('svg(')) {
+                checkDeclVal = svgHelper(checkDeclVal)
+              } else if(checkDeclVal.startsWith('add(') || checkDeclVal.startsWith('sub(') || checkDeclVal.startsWith('div(') || checkDeclVal.startsWith('times(')) {
+                checkDeclVal = calcHelper(checkDeclVal)
+              }
+
+              declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
             //}
@@ -396,3 +311,3 @@ newRule.append(declVal)
             } else {*/
-            declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
+              let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
                 if(i.startsWith('props(')) {
@@ -425,37 +340,13 @@ const arrowValues = i.split(/\(|\)/g)
                   i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-                } else if(i.startsWith('calc(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                } else if(i.startsWith('add(') || i.startsWith('sub(') || i.startsWith('div(') || i.startsWith('times(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('props(')) {
-                      const splitValues = item.trim().split(/\(|\)/g)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
-                      if(splitValues[2]) {
-                        item = item + splitValues[2]
-                      }
-                    }
-                    return item
-                  }).join('')
-                  
-                  if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
-                  } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
-                  } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
-                  } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
-                  }
+                }
+                return i
+              }).join(' ').trim()
+
+              if(checkDeclVal.startsWith('svg(')) {
+                checkDeclVal = svgHelper(checkDeclVal)
+              } else if(checkDeclVal.startsWith('add(') || checkDeclVal.startsWith('sub(') || checkDeclVal.startsWith('div(') || checkDeclVal.startsWith('times(')) {
+                checkDeclVal = calcHelper(checkDeclVal)
               }
-              return i
-            }).join(' ').trim(), source: val.source })
+
+              declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
           //}
@@ -462,0 +353,0 @@ newRule.append(declVal)

src/cores/package.js

@@ -23,3 +23,3 @@ const postcss = require('postcss')
   if(!data) return;
-  data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, ' $1($2) ')
+  data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, '_$1($2)_')
           .replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)')
@@ -26,0 +26,0 @@

src/cores/value.js

@@ -6,2 +6,3 @@ const camelDash = require('../helpers/camelDash.js')
 const svgHelper = require('../helpers/svgHelper.js')
+const calcHelper = require('../helpers/calcHelper.js')
 const values = require('../configs/values.js')
@@ -37,55 +38,3 @@ const units = require('../configs/units.js')
     newValue = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-  }  
-  else if(newValue.trim().startsWith('calc(')) {
-    newValue = newValue.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
-      if(item.trim().startsWith('refs(')) {
-        const splitValues = item.trim().split(/\(|\)/g)
-        item = opt[splitValues[0]][splitValues[1]].value || item
-        if(splitValues[2]) {
-          item = item + splitValues[2]
-        }
-      } else if(item.trim().startsWith('scopes(')) {
-        const splitValues = item.trim().split(/\(|\)/g)
-        let scopeItem = defs[splitValues[0]][splitValues[1]].value || null
-        if(scopeItem) {
-          item = `var(--scope-${splitValues[1]}, ${scopeItem})`
-        }
-        if(splitValues[2]) {
-          item = item + splitValues[2]
-        }
-      }
-      return item
-    }).join('')
   }
-  else if(newValue.trim().startsWith('add(') || newValue.trim().startsWith('sub(') || newValue.trim().startsWith('div(') || newValue.trim().startsWith('times(')) {
-    newValue = newValue.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
-      if(item.trim().startsWith('refs(')) {
-        const splitValues = item.trim().split(/\(|\)/g)
-        item = opt[splitValues[0]][splitValues[1]].value || item
-        if(splitValues[2]) {
-          item = item + splitValues[2]
-        }
-      } else if(item.trim().startsWith('scopes(')) {
-        const splitValues = item.trim().split(/\(|\)/g)
-        let scopeItem = defs[splitValues[0]][splitValues[1]].value || null
-        if(scopeItem) {
-          item = `var(--scope-${splitValues[1]}, ${scopeItem})`
-        }
-        if(splitValues[2]) {
-          item = item + splitValues[2]
-        }
-      }
-      return item
-    }).join('')
-    
-    if(newValue.trim().startsWith('add(')) {
-      newValue = newValue.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
-    } else if(newValue.trim().startsWith('sub(')) {
-      newValue = newValue.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
-    } else if(newValue.trim().startsWith('div(')) {
-      newValue = newValue.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
-    } else if(newValue.trim().startsWith('times(')) {
-      newValue = newValue.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
-    }
-  }
   else if(newValue.trim().startsWith('refs(') || newValue.trim().startsWith('props(') || newValue.trim().startsWith('scopes(')) {
@@ -101,3 +50,3 @@ const splitValues = newValue.trim().split(/\(|\)/g)
     }
-  } 
+  }
   else if(newValue.trim().startsWith('cap(') || newValue.trim().startsWith('camel(') || newValue.trim().startsWith('lower(') || newValue.trim().startsWith('upper(') || newValue.trim().startsWith('each(')) {
@@ -162,4 +111,6 @@ const splitValues = newValue.trim().split(/\(|\)/g)
     newValue = svgHelper(newValue)
+  } else if(newValue.trim().startsWith('add(') || newValue.trim().startsWith('sub(') || newValue.trim().startsWith('div(') || newValue.trim().startsWith('times(')) {
+    newValue = calcHelper(newValue)
   }
   return newValue
 }

No alert changes

Improved metrics

Number of package files

77

increased by1.32%

Worsened metrics

Total package byte prevSize

239008

decreased by-3.14%

Lines of code

3060

decreased by-4.49%

No dependency changes