alga-css - npm Package Compare versions

Comparing version 1.0.0-bronze-3 to 1.0.0-bronze-4

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-bronze-3",
+  "version": "1.0.0-bronze-4",
   "description": "Alga CSS is a scope-first CSS toolkit for quickly mix or compose CSS references and share CSS properties between components",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/cores/atrules.js

@@ -28,3 +28,3 @@ const postcss = require('postcss')
       if(Object.keys(newState).includes(refs[1])) {
-        if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor)].includes(refs[2])) {
+        if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[2])) {
           if(!newObj[refs[0]]) {
@@ -58,4 +58,8 @@ if(newScreen[refs[0]].minmax === 'max') {
             const newShorts = shorts[refs[2]]
+            const refOpt = {
+              ...opts,
+              property: newShorts
+            }
             for(let newShort of newShorts) {
-              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], opts) })
+              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], refOpt) })
               newRule.append(declVal)
@@ -68,4 +72,9 @@ }
             }
-          
-            const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], opts) })
+            
+            const refOpt = {
+              ...opts,
+              property: refs[2]
+            }
+            
+            const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], refOpt) })
             newRule.append(declVal)
@@ -77,3 +86,3 @@ }
       } else {
-        if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor)].includes(refs[1])) {
+        if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
           if(!newObj[refs[0]]) {
@@ -107,4 +116,8 @@ if(newScreen[refs[0]].minmax === 'max') {
             const newShorts = shorts[refs[1]]
+            const refOpt = {
+              ...opts,
+              property: newShorts
+            }
             for(let newShort of newShorts) {
-              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], opts) })
+              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) })
               newRule.append(declVal)
@@ -117,4 +130,9 @@ }
             }
-          
-            const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], opts) })
+            
+            const refOpt = {
+              ...opts,
+              property: refs[1]
+            }
+            
+            const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) })
             newRule.append(declVal)
@@ -127,3 +145,3 @@ }
     } else if(Object.keys(opts.prefers).includes(refs[0])) {
-      if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor)].includes(refs[1])) {
+      if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
         if(!newObj[refs[0]]) {
@@ -156,4 +174,8 @@ newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(${opts.prefers[refs[0]].media}: ${opts.prefers[refs[0]].prefers})` })
           const newShorts = shorts[refs[1]]
+          const refOpt = {
+            ...opts,
+            property: newShorts
+          }
           for(let newShort of newShorts) {
-            const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], opts) })
+            const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) })
             newRule.append(declVal)
@@ -166,4 +188,9 @@ }
           }
-        
-          const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], opts) })
+          
+          const refOpt = {
+            ...opts,
+            property: refs[1]
+          }
+          
+          const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) })
           newRule.append(declVal)
@@ -170,0 +197,0 @@ }

src/cores/rules.js

@@ -18,3 +18,3 @@ const postcss = require('postcss')
   
-  if(ref.includes(':') && [...properties, ...Object.keys(newPreset), ...Object.keys(newColor)].includes(refs[1])) { // for state colon like hover or active
+  if(ref.includes(':') && [...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) { // for state colon like hover or active
     /*if('preset' in opts && Object.keys(opts.preset).includes(refs[1])) {
@@ -45,4 +45,8 @@ refs[1] = opts.preset[refs[1]]
         const newShorts = shorts[refs[1]]
+        const refOpt = {
+          ...opts,
+          property: newShorts
+        }
         for(let newShort of newShorts) {
-          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], opts) })
+          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) })
           newRule.append(declVal)
@@ -55,4 +59,9 @@ }
         }
-      
-        const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], opts) })
+        
+        const refOpt = {
+          ...opts,
+          property: refs[1]
+        }
+        
+        const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) })
         newRule.append(declVal)
@@ -64,3 +73,3 @@ }
   } else { // for class that not have colon
-    if([...properties, ...Object.keys(newPreset)].includes(refs[0])) {
+    if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[0])) {
       const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)') })
@@ -84,4 +93,8 @@ if(Object.keys(newColor).includes(refs[0])) {
         const newShorts = shorts[refs[0]]
+        const refOpt = {
+          ...opts,
+          property: newShorts
+        }
         for(let newShort of newShorts) {
-          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], opts) })
+          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], refOpt) })
           newRule.append(declVal)
@@ -94,4 +107,9 @@ }
         }
-      
-        const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], opts) })
+        
+        const refOpt = {
+          ...opts,
+          property: refs[0]
+        }
+        
+        const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], refOpt) })
         newRule.append(declVal)
@@ -98,0 +116,0 @@ }

src/cores/value.js

@@ -16,4 +16,4 @@ const camelDash = require('../helpers/camelDash.js')
   }
-  if(Object.keys(newColor).includes(newValue)) {
-    newValue = newColor[newValue]
+  else if(Object.keys(newColor).includes(newValue.trim())) {
+    newValue = newColor[newValue.trim()]
   }
@@ -35,3 +35,3 @@ if(newValue.startsWith('lighten(') || newValue.startsWith('darken(')) {
   }
-  if(newValue.startsWith('calc(')) {
+  else if(newValue.startsWith('calc(')) {
     newValue = newValue.split('_').map(item => {
@@ -45,3 +45,3 @@ if(item.startsWith('refs(') || item.startsWith('props(')) {
   }
-  if(newValue.startsWith('refs(') || newValue.startsWith('props(')) {
+  else if(newValue.startsWith('refs(') || newValue.startsWith('props(')) {
     const splitValues = newValue.split(/\(|\)/g)
@@ -72,2 +72,11 @@ newValue = opt[splitValues[0]][splitValues[1]] || newValue
   }
+  else if(isNaN(newValue) === false && opt?.property) {
+    if(['width', 'maxWidth', 'minWidth', 'height', 'maxHeight', 'minHeight', 'top', 'right', 'bottom', 'left'].includes(opt.property)) {
+      newValue = newValue + '%'
+    } else if(['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontSize'].includes(opt.property)) {
+      newValue = (Number(newValue) * 0.25) + 'rem'
+    } else if(['borderWidth'].includes(opt.property)) {
+      newValue = newValue + 'px'
+    }
+  }
   if(newValue.includes('pct')) {
@@ -74,0 +83,0 @@ newValue = newValue.replaceAll('pct', '%')

No alert changes

Improved metrics

Total package byte prevSize

116043

increased by1.52%

Lines of code

1463

increased by3.47%

No dependency changes