alga-css - npm Package Compare versions

Comparing version 1.0.0-iron-1 to 1.0.0-iron-2

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-iron-1",
+  "version": "1.0.0-iron-2",
   "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/component.js

@@ -21,3 +21,3 @@ const postcss = require('postcss')
   
-  const root = postcss.parse(data)
+  const root = postcss.parse(data.replaceAll(/\{(\w+)\.(\w+)\}/g, '$1($2)'))
   for(let rnode of root.nodes) {
@@ -92,3 +92,7 @@ // Convert define into property
     } else if(rnode.type === 'atrule' && rnode.name === 'alga' && 'nodes' in rnode) {
-      const param = rnode.params.trim()
+      let param = rnode.params.trim()
+      if(param.startsWith('refs(') || param.startsWith('props(')) {
+        const arrowParams = param.split(/\(|\)/g)
+        param = component[componentName][arrowParams[0]][arrowParams[1]]
+      }
       let defineObj = {}
@@ -103,3 +107,26 @@ defineObj['header'] = {}
         if(dnode.type === 'atrule' && dnode.name === 'use') {
-          defineObj['content'][randId].push(component[componentName]['modules'][dnode.params.trim()])
+          if('params' in dnode && dnode.params !== '') {
+            component[componentName]['refs'] = Object.assign({}, component[componentName]['refs'], component[componentName]['modules'][dnode.params.trim()]['refs'])
+            component[componentName]['props'] = Object.assign({}, component[componentName]['props'], component[componentName]['modules'][dnode.params.trim()]['props'])
+            component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], component[componentName]['modules'][dnode.params.trim()]['provide'])
+            defineObj['content'][randId].push(component[componentName]['modules'][dnode.params.trim()][dnode.params.trim()]['body'])
+          }
+        } else if(dnode.type === 'atrule' && dnode.name === 'keyframes') {
+          if('nodes' in dnode) {
+            let paramDnode = dnode.params.trim()
+            if(paramDnode.startsWith('refs(') || paramDnode.startsWith('props(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              paramDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]]
+            }
+            let keyframeDefineObj = {}
+            keyframeDefineObj['@keyframes '+paramDnode] = []
+            for(let kfnode of dnode.nodes) {
+              let keyframeRecursiveDefineObj = recursive(kfnode, {
+                'provide': component[componentName]['provide']
+              })
+              keyframeDefineObj['@keyframes '+paramDnode].push(keyframeRecursiveDefineObj.body)
+            }
+            keyframeDefineObj['@keyframes '+paramDnode] = keyframeDefineObj['@keyframes '+paramDnode].flat()
+            defineObj['content'][randId].push(keyframeDefineObj)
+          }
         } else if(dnode.type === 'atrule' && dnode.name === 'if') {
@@ -106,0 +133,0 @@ if('nodes' in dnode) {

src/cores/declaration.js

@@ -5,3 +5,6 @@ const postcss = require('postcss')
 
-const declaration = (body, props, provide, opts) => {
+const declaration = (body, defs, opts) => {
+  const refs = defs.refs
+  const props = defs.props
+  const provide = defs.provide
   const screen = Object.assign({}, flatScreen(opts.screen))
@@ -20,5 +23,8 @@ const state = Object.assign({}, statusValue(opts.state))
         const splitKey = ifKey.trim().split(/\sis\s/g).filter(i => i !== '')
-        if(typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()] === splitKey[1].trim()) {
+        if(
+          (typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()] === splitKey[1].trim()) ||
+          (typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()] === splitKey[1].trim())
+        ) {
           ruleArray.push([
-            ...declaration(itemValue, props, provide, opts)
+            ...declaration(itemValue, defs, opts)
           ])
@@ -28,11 +34,32 @@ }
         const splitKey = ifKey.trim().split(/\shas\s/g).filter(i => i !== '')
-        if(typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()].replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) {
+        if(
+          (typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()].replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) ||
+          (typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()].replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
+        ) {
           ruleArray.push([
-            ...declaration(itemValue, props, provide, opts)
+            ...declaration(itemValue, defs, opts)
           ])
         }
       }
+    } else if(itemKey.startsWith('@keyframes ')) {
+      const newAtRule = postcss.atRule({ name: 'keyframes', params: itemKey.replace('@keyframes ', '').trim() })
+      const itemValue = Object.values(item)[0]
+      newAtRule.append([...declaration(itemValue, defs, opts)])
+      ruleArray.push(newAtRule)
     } else {
       const itemValues = Object.entries(item[itemKey])
-      const newRule = postcss.rule({ selector: itemKey })
+      let selectorItemKey = itemKey
+      if(selectorItemKey.includes('refs(') || selectorItemKey.includes('props(')) {
+        selectorItemKey = itemKey
+                          .replaceAll(/refs\((\w+)\)/g, '<=>refs===$1<=>')
+                          .replaceAll(/props\((\w+)\)/g, '<=>props===$1<=>')
+                          .split('<=>').map(i => {
+          if(i.startsWith('refs===') || i.startsWith('props===')) {
+            const arrowValues = i.split('===')
+            i = defs[arrowValues[0]][arrowValues[1]]
+          }
+          return i
+        }).filter(i => i !== '').join('')
+      }
+      const newRule = postcss.rule({ selector: selectorItemKey })
       for(let [key, val] of itemValues) {
@@ -61,3 +88,9 @@ if(typeof val === 'string') {
             } else {
-              declVal = postcss.decl({ prop: key.trim(), value: val.trim() })
+              declVal = postcss.decl({ prop: key.trim(), value: val.split(' ').map(i => {
+                if(i.startsWith('refs(') || i.startsWith('props(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0]][arrowValues[1]]
+                }
+                return i
+              }).join(' ').trim() })
             }
@@ -96,3 +129,16 @@ newRule.append(declVal)
       for(let [itemKey, itemValue] of Object.entries(entryVal.value)) {
-        const newRule = postcss.rule({ selector: itemKey })
+        let selectorItemKey = itemKey
+        if(selectorItemKey.includes('refs(') || selectorItemKey.includes('props(')) {
+          selectorItemKey = itemKey
+                            .replaceAll(/refs\((\w+)\)/g, '<=>refs===$1<=>')
+                            .replaceAll(/props\((\w+)\)/g, '<=>props===$1<=>')
+                            .split('<=>').map(i => {
+            if(i.startsWith('refs===') || i.startsWith('props===')) {
+              const arrowValues = i.split('===')
+              i = defs[arrowValues[0]][arrowValues[1]]
+            }
+            return i
+          }).filter(i => i !== '').join('')
+        }
+        const newRule = postcss.rule({ selector: selectorItemKey })
         for(let [key, val] of Object.entries(itemValue)) {
@@ -104,3 +150,9 @@ if(typeof val === 'string') {
             } else {
-              declVal = postcss.decl({ prop: key.trim(), value: val.trim() })
+              declVal = postcss.decl({ prop: key.trim(), value: val.split(' ').map(i => {
+                if(i.startsWith('refs(') || i.startsWith('props(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0]][arrowValues[1]]
+                }
+                return i
+              }).join(' ').trim() })
             }
@@ -107,0 +159,0 @@ newRule.append(declVal)

src/index.js

@@ -65,3 +65,9 @@ // Configs
             ...newNodes, 
-            ...declaration(config.components[param][name]['body'], config.components[param]['props'], config.components[param]['provide'], {
+            ...declaration(config.components[param][name]['body'],
+            {
+              refs: config.components[param]['refs'],
+              props: config.components[param]['props'], 
+              provide: config.components[param]['provide']
+            },
+            {
               screen: config.screen,
@@ -102,3 +108,9 @@ state: config.state,
             ...newNodes, 
-            ...declaration(config.components[param][name]['body'], config.components[param]['props'], config.components[param]['provide'], {
+            ...declaration(config.components[param][name]['body'],
+            {
+              refs: config.components[param]['refs'],
+              props: config.components[param]['props'], 
+              provide: config.components[param]['provide']
+            },
+            {
               screen: config.screen,
@@ -105,0 +117,0 @@ state: config.state,

No alert changes

Improved metrics

Total package byte prevSize

94118

increased by6.18%

Number of package files

46

increased by4.55%

Lines of code

1108

increased by8.95%

No dependency changes