alga-css - npm Package Compare versions

Comparing version 1.0.0-beta-43 to 1.0.0-beta-44

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-beta-43",
+  "version": "1.0.0-beta-44",
   "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",
   "main": "./src/index.js",
-  "bin": "./bin/algac",
+  "bin": {
+    "alga-css": "bin/algac"
+  },
   "scripts": {
@@ -8,0 +10,0 @@ "test": "jest",

README.md

@@ -23,3 +23,3 @@ <p align="center">
 
-Even though it's slow in progress, as long as its benefit me (the Maintainer), I will go for it. Currently I have used Alga CSS almost all of my projects and some of my client projects. We're not using Alga CSS for production, I used it on a development project only with other toolings or bundlers.
+Even though it's slow in progress, as long as its benefit me (the Maintainer), I will go for it. Currently I have used Alga CSS almost all of my projects and some of my client projects. We're not using Alga CSS in a production, I used it when develop the app only with other toolings or bundlers.
 
@@ -64,4 +64,3 @@ All the main features:
       src: './src/styles/*.alga',
-      plugins: [],
-      build: true /*If you want to automatically deploy it to Netlify, Vercel, etc. 'false' is the default value for development only or locally build, so it will watch any changes on the files and auto update the helpers directive.*/
+      plugins: []
     })
@@ -125,4 +124,4 @@ ]
     z-index: 3;
-    paddingTop: 20px; /* 0.75rem is the default that being override via props */
-    paddingBottom: 20px;
+    padding-top: 20px; /* 0.75rem is the default that being override via props */
+    padding-bottom: 20px;
   }
@@ -129,0 +128,0 @@ }

src/cores/component.js

@@ -21,3 +21,4 @@ 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 +25,0 @@ const root = postcss.parse(data, { from: rp }) /* (\w+) */

src/cores/declaration.js

@@ -6,2 +6,3 @@ const postcss = require('postcss')
 const camelDash = require('../helpers/camelDash.js')
+const svgHelper = require('../helpers/svgHelper.js')
 const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
@@ -74,3 +75,3 @@
             } else {*/
-              declVal = postcss.decl({ prop: key.trim(), value: val.value.trim().split(' ').map(i => {
+              let checkDeclVal = val.value.trim().split(' ').map(i => {
                 if(i.startsWith('refs(') || i.startsWith('props(') || i.startsWith('scopes(')) {
@@ -149,3 +150,9 @@ const arrowValues = i.split(/\(|\)/g)
                 return i
-              }).join(' ').trim(), source: sourceItemVal })
+              }).join(' ').trim()
+
+              if(checkDeclVal.startsWith('svg(')) {
+                checkDeclVal = svgHelper(checkDeclVal)
+              }
+
+              declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: sourceItemVal })
             //}
@@ -152,0 +159,0 @@ newRule.append(declVal)

src/cores/package.js

@@ -13,3 +13,3 @@ const postcss = require('postcss')
   const component = {}
-  const data = fs.readFileSync(rp, 'utf8')
+  let data = fs.readFileSync(rp, 'utf8')
   
@@ -23,3 +23,7 @@ const splitFilePath = rp.split('/')[Number(rp.split('/').length) - 1]
   
-  const root = postcss.parse(data.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)'), { from: rp })
+  if(!data) return;
+  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)')
+  
+  const root = postcss.parse(data, { from: rp })
   component[componentName]['root'] = root
@@ -26,0 +30,0 @@

src/cores/value.js

@@ -5,2 +5,3 @@ const camelDash = require('../helpers/camelDash.js')
 const camelValue = require('../helpers/camelValue.js')
+const svgHelper = require('../helpers/svgHelper.js')
 const values = require('../configs/values.js')
@@ -36,3 +37,3 @@ const units = require('../configs/units.js')
     newValue = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
-  }
+  }  
   else if(newValue.trim().startsWith('calc(')) {
@@ -116,3 +117,3 @@ newValue = newValue.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
     }
-  } 
+  }
   else if(!specialValues.includes(newValue) && !newValue.includes('(') && !newValue.includes(')') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
@@ -159,3 +160,6 @@ newValue = camelDash(newValue)
   }
+  if(newValue.trim().startsWith('svg(')) {
+    newValue = svgHelper(newValue)
+  }
   return newValue
 }

No alert changes

Improved metrics

Total package byte prevSize

246754

0.92%

Number of package files

76

1.33%

Lines of code

3204

0.75%

Worsened metrics

Number of lines in readme file

227

-0.44%

No dependency changes