alga-css - npm Package Compare versions

Comparing version 1.0.0-beta-41 to 1.0.0-beta-43

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-beta-41",
+  "version": "1.0.0-beta-43",
   "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/configs/preset.js

@@ -19,13 +19,9 @@ module.exports = {
   mt: 'marginTop',
-  me: 'marginRight',
   mr: 'marginRight',
   mb: 'marginBottom',
-  ms: 'marginLeft',
   ml: 'marginLeft',
   p: 'padding',
   pt: 'paddingTop',
-  pe: 'paddingRight',
   pr: 'paddingRight',
   pb: 'paddingBottom',
-  ps: 'paddingLeft',
   pl: 'paddingLeft',
@@ -32,0 +28,0 @@ bd: 'border',

src/cores/atrules.js

@@ -84,3 +84,3 @@ const postcss = require('postcss')
       } else {
-        if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
+        if(['ms', 'me', 'ps', 'pe'].includes(refs[1])) {
           if(!newObj[refs[0]]) {
@@ -94,2 +94,99 @@ if(newScreen[refs[0]].minmax === 'max') {
           
+          const refDirectionMode = {
+            ms: [{ltr: 'marginLeft'}, {rtl: 'marginRight'}],
+            me: [{ltr: 'marginRight'}, {rtl: 'marginLeft'}],
+            ps: [{ltr: 'paddingLeft'}, {rtl: 'paddingRight'}],
+            pe: [{ltr: 'paddingRight'}, {rtl: 'paddingLeft'}]
+          }
+          let newRule = null
+          for(let dirMode of refDirectionMode[refs[1]]) {
+            if(dirMode.ltr) {
+              newRule = postcss.rule({ selector: opts.state['ltr'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+              const refOpt = {
+                ...opts,
+                property: dirMode.ltr
+              }
+              const declVal = postcss.decl({ prop: camelDash(dirMode.ltr), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
+              newRule.append(declVal)
+            } else if(dirMode.rtl) {
+              newRule = postcss.rule({ selector: opts.state['rtl'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+              const refOpt = {
+                ...opts,
+                property: dirMode.rtl
+              }
+              const declVal = postcss.decl({ prop: camelDash(dirMode.rtl), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
+              newRule.append(declVal)
+            }
+          }
+          newObj[refs[0]].append(newRule)
+        } else if(['cols', 'col', 'offset'].includes(refs[1])) {
+          if(!newObj[refs[0]]) {
+            if(newScreen[refs[0]].minmax === 'max') {
+              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})`, source: source })
+            } else {
+              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(min-width: ${newScreen[refs[0]].size})`, source: source })
+            }
+          }
+          
+          if('col' === refs[1]) {
+            const newRule = postcss.rule({ selector: '.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+            let valNum = 'auto';
+            if(isNaN(refs[2]) === false) {
+              valNum = 8.33333333 * Number(refs[2])
+              valNum = String(valNum)+'%'
+            }
+            const newCols = [
+              {prop: 'flex', value: '0 0 auto'},
+              {prop: 'width', value: valNum},
+            ]
+            for(let newCol of newCols) {
+              const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+              newRule.append(declVal)
+            }
+            newObj[refs[0]].append(newRule)
+          } else if('offset' === refs[1]) {
+            for(let offset = 0; offset < 2; offset++){
+              const dirMode = offset >= 1 ?  opts.state['rtl'].state+' ' : ''
+              const newRule = postcss.rule({ selector: dirMode+'.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+              let valNum = 'auto';
+              if(isNaN(refs[2]) === false) {
+                valNum = 8.33333333 * Number(refs[2])
+                valNum = String(valNum)+'%'
+              }
+              const newCols = [
+                {prop: 'flex', value: '0 0 auto'},
+                {prop: (offset >= 1 ? 'marginRight' : 'marginLeft'), value: valNum},
+              ]
+              for(let newCol of newCols) {
+                const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+                newRule.append(declVal)
+              }
+              newObj[refs[0]].append(newRule)
+            }
+          } else {
+            const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')+' > *', source: source })
+            let valNum = 'auto';
+            if(isNaN(refs[2]) === false) {
+              valNum = 100 / Number(refs[2])
+              valNum = String(valNum)+'%'
+            }
+            const newCols = [
+              {prop: 'flex', value: '0 0 auto'},
+              {prop: 'width', value: valNum},
+            ]
+            for(let newCol of newCols) {
+              const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+              newRule.append(declVal)
+            }
+            newObj[refs[0]].append(newRule)
+          }
+        } else if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
+          if(!newObj[refs[0]]) {
+            if(newScreen[refs[0]].minmax === 'max') {
+              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})`, source: source })
+            } else {
+              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(min-width: ${newScreen[refs[0]].size})`, source: source })
+            }
+          }
+          
           const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
@@ -96,0 +193,0 @@ /*const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })

src/cores/component.js

@@ -10,17 +10,18 @@ const postcss = require('postcss')
 const recursive = require('./recursive.js')
+const declaration = require('./declaration.js')
 
-function readPath(rp, opts) {
+function readPath(rp, fileName, componentName, opts) {
   const component = {}
-  const data = fs.readFileSync(rp, 'utf8')
+  let data = fs.readFileSync(rp, 'utf8')
   
-  const splitFilePath = rp.split('/')[Number(rp.split('/').length) - 1]
-  const splitFileName = splitFilePath.split('.')[0]
-  let componentName = splitFileName
-  component[componentName] = {}
-  component[componentName]['modules'] = {}
-  component[componentName]['inits'] = []
+  component[fileName] = {}
+  component[fileName]['modules'] = {}
+  component[fileName]['inits'] = []
   
-  const root = postcss.parse(data.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)'), { from: rp }) /* (\w+) */
-  component[componentName]['root'] = root
+  if(!data) return;
+  data = data.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)')
   
+  const root = postcss.parse(data, { from: rp }) /* (\w+) */
+  component[fileName]['root'] = root
+  
   for(let rnode of root.nodes) {
@@ -32,3 +33,3 @@ // Convert define into property
       const paramFileName = paramFilePaths[Number(paramFilePaths.length) - 2]
-      component[componentName]['modules'] = Object.assign({}, component[componentName]['modules'], readPath(param, opts))
+      component[fileName]['modules'] = Object.assign({}, component[fileName]['modules'], readPath(param, fileName, componentName, opts))
     } else if(rnode.type === 'atrule' && rnode.name === 'define' && 'nodes' in rnode) {
@@ -43,3 +44,3 @@ const param = rnode.params.trim()
       }
-      component[componentName][param] = Object.assign({}, component[componentName][param], defineObj)
+      component[fileName][param] = Object.assign({}, component[fileName][param], defineObj)
     // Get all provides and set a new property under provide name
@@ -50,4 +51,5 @@ } else if(rnode.type === 'atrule' && rnode.name === 'provide' && 'nodes' in rnode) {
         ...opts,
-        refs: component[componentName]['refs'] || {},
-        props: component[componentName]['props'] || {}
+        refs: component[fileName]['refs'] || {},
+        scopes: component[fileName]['scopes'] || {},
+        props: Object.assign({}, component[fileName]['props'], opts.props)
       }
@@ -59,2 +61,6 @@ const defineObj = {}
       }
+      let screenObj = {}
+      let stateObj = {}
+      let prefersObj = {}
+      let printObj = {}
       for(let dnode of rnode.nodes) {
@@ -75,6 +81,9 @@ // Extracting content of provide
           defineObj[param].value = Object.assign({}, defineObj[param].value, splitRefsObj)
-        } else if(dnode.type === 'decl' && dnode.prop.startsWith('props-')) {
+        }/* else if(dnode.type === 'decl' && dnode.prop.startsWith('props-')) {
           let splitProps = dnode.prop.split('-')[1]
+          if('preset' in opts && Object.keys(opts.preset).includes(splitProps)) {
+            splitProps = opts.preset[splitProps]
+          }
           let splitPropsObj = {}
-          splitPropsObj[camelDash(splitProps)] = {
+          splitPropsObj[splitProps] = {
             value: '{'+dnode.value+'}',
@@ -84,14 +93,14 @@ source: dnode.source
           defineObj[param].value = Object.assign({}, defineObj[param].value, splitPropsObj)
-        } else if(dnode.type === 'decl' && dnode.prop.startsWith('screen-')) {
-          let screenObj = {}
+        }*/ else if(dnode.type === 'decl' && dnode.prop.startsWith('screen-')) {
           screenObj[dnode.prop] = Object.assign({}, screenObj[dnode.prop], reference(dnode, refOpt))
           defineObj[param].value = Object.assign({}, defineObj[param].value, screenObj)
         } else if(dnode.type === 'decl' && dnode.prop.startsWith('state-')) {
-          let stateObj = {}
           stateObj[dnode.prop] = Object.assign({}, stateObj[dnode.prop], reference(dnode, refOpt))
           defineObj[param].value = Object.assign({}, defineObj[param].value, stateObj)
         } else if(dnode.type === 'decl' && dnode.prop.startsWith('prefers-')) {
-          let prefersObj = {}
           prefersObj[dnode.prop] = Object.assign({}, prefersObj[dnode.prop], reference(dnode, refOpt))
           defineObj[param].value = Object.assign({}, defineObj[param].value, prefersObj)
+        } else if(dnode.type === 'decl' && dnode.prop === 'print') {
+          printObj[dnode.prop] = Object.assign({}, printObj[dnode.prop], reference(dnode, refOpt))
+          defineObj[param].value = Object.assign({}, defineObj[param].value, printObj)
         } else if(dnode.type === 'decl' && dnode.prop.startsWith('webkit-')) {
@@ -141,8 +150,9 @@ let splitRefs = dnode.prop.split('-')[1]
       }
-      component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], defineObj)
+      component[fileName]['provide'] = Object.assign({}, component[fileName]['provide'], defineObj)
     } else if(rnode.type === 'atrule' && rnode.name === 'alga' && 'nodes' in rnode) {
       const refOpt = {
         ...opts,
-        refs: component[componentName]['refs'] || {},
-        props: component[componentName]['props'] || {}
+        refs: component[fileName]['refs'] || {},
+        scopes: component[fileName]['scopes'] || {},
+        props: Object.assign({}, component[fileName]['props'], opts.props)
       }
@@ -153,3 +163,3 @@
         const arrowParams = param.split(/\(|\)/g)
-        param = component[componentName][arrowParams[0]][arrowParams[1]].value
+        param = component[fileName][arrowParams[0]][arrowParams[1]].value
       }
@@ -166,6 +176,7 @@ let defineObj = {}
           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'])
+            component[fileName]['refs'] = Object.assign({}, component[fileName]['refs'], component[fileName]['modules'][dnode.params.trim()]['refs'])
+            component[fileName]['scopes'] = Object.assign({}, component[fileName]['scopes'], component[fileName]['modules'][dnode.params.trim()]['scopes'])
+            component[fileName]['props'] = Object.assign({}, component[fileName]['props'], component[fileName]['modules'][dnode.params.trim()]['props'], opts.props)
+            component[fileName]['provide'] = Object.assign({}, component[fileName]['provide'], component[fileName]['modules'][dnode.params.trim()]['provide'])
+            defineObj['content'][randId].push(component[fileName]['modules'][dnode.params.trim()][dnode.params.trim()]['body'])
           }
@@ -177,4 +188,9 @@ } else if(dnode.type === 'atrule' && dnode.name === 'keyframes') {
               const arrowDnodeParams = paramDnode.split(/\(|\)/g)
-              paramDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+              paramDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
             }
+            if(paramDnode.startsWith('scopes(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              let scopeParamDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+              paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
+            }
             let keyframeDefineObj = {}
@@ -184,3 +200,4 @@ keyframeDefineObj['@keyframes '+paramDnode] = []
               let keyframeRecursiveDefineObj = recursive(kfnode, {
-                'provide': component[componentName]['provide']
+                ...refOpt,
+                'provide': component[fileName]['provide']
               })
@@ -192,20 +209,121 @@ keyframeDefineObj['@keyframes '+paramDnode].push(keyframeRecursiveDefineObj.body)
           }
-        } else if(dnode.type === 'atrule' && dnode.name === 'if') {
+        } else if(dnode.type === 'atrule' && dnode.name === 'paper') {
           if('nodes' in dnode) {
-            let ifDefineObj = {}
-            ifDefineObj['@if '+dnode.params.trim()] = []
-            for(let ifnode of dnode.nodes) {
-              let ifRecursiveDefineObj = recursive(ifnode, {
+            let paramDnode = dnode.params.trim()
+            if(paramDnode.startsWith('refs(') || paramDnode.startsWith('props(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              paramDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+            }
+            if(paramDnode.startsWith('scopes(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              let scopeParamDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+              paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
+            }
+            let paperDefineObj = {}
+            paperDefineObj['@page '+paramDnode] = []
+            for(let kfnode of dnode.nodes) {
+              let paperRecursiveDefineObj = recursive(kfnode, {
                 ...refOpt,
-                'provide': component[componentName]['provide']
+                'provide': component[fileName]['provide']
               })
-              ifDefineObj['@if '+dnode.params.trim()].push(ifRecursiveDefineObj.body)
+              paperDefineObj['@page '+paramDnode].push(paperRecursiveDefineObj.body)
             }
-            ifDefineObj['@if '+dnode.params.trim()] = ifDefineObj['@if '+dnode.params.trim()].flat()
-            defineObj['content'][randId].push(ifDefineObj)
+            paperDefineObj['@page '+paramDnode] = paperDefineObj['@page '+paramDnode].flat()
+            defineObj['content'][randId].push(paperDefineObj)
           }
+        } else if(dnode.type === 'atrule' && dnode.name === 'if') {
+          if('nodes' in dnode) {
+            const ifParams = dnode?.params?.trim() || ''
+            const ifProps = Object.assign({}, component[fileName]['props'], opts.props)
+            const ifRefs = component[fileName]?.['refs'] || {}
+            
+            if(ifParams.includes(' is ')) {
+              const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
+              if(
+                (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) ||
+                (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
+              ) {
+                
+                for(let ifnode of dnode.nodes) {
+                  let ifRecursiveDefineObj = recursive(ifnode, {
+                    ...refOpt,
+                    'provide': component[fileName]['provide']
+                  })
+                  defineObj['content'][randId].push(ifRecursiveDefineObj.body)
+                }
+                
+              }
+            } else if(ifParams.includes(' has ')) {
+              const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
+              if(
+                (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) ||
+                (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
+              ) {
+                
+                for(let ifnode of dnode.nodes) {
+                  let ifRecursiveDefineObj = recursive(ifnode, {
+                    ...refOpt,
+                    'provide': component[fileName]['provide']
+                  })
+                  defineObj['content'][randId].push(ifRecursiveDefineObj.body)
+                }
+                
+              }
+            }
+            
+          }
+        } else if(dnode.type === 'atrule' && dnode.name === 'for') {
+          if('nodes' in dnode) {
+            const forParams = dnode?.params?.trim() || ''
+            const forProps = Object.assign({}, component[fileName]['props'], opts.props)
+            const forRefs = component[fileName]?.['refs'] || {}
+            
+            if(forParams.includes(' in ')) {
+              const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+              
+                const firstVal = splitKey[0].trim()
+                const lastVal = forProps?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') || forRefs?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') || []
+                for(let forItem of lastVal) {
+                  if(forItem) {
+                    for(let fornode of dnode.nodes) {
+                      let forRecursiveDefineObj = recursive(fornode, {
+                        ...refOpt,
+                        'provide': component[fileName]['provide'],
+                        'each': firstVal,
+                        [firstVal]: forItem
+                      })
+                      defineObj['content'][randId].push(forRecursiveDefineObj.body)
+                    }
+                  }
+                }
+                
+              }
+            } else if(forParams.includes(' of ')) {
+              const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+                
+                const firstVal = splitKey[0].trim()
+                const lastVal =  (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0
+                
+                for(let i = 1; i <= Number(lastVal); i++) {
+                  for(let fornode of dnode.nodes) {
+                    let forRecursiveDefineObj = recursive(fornode, {
+                      ...refOpt,
+                      'provide': component[fileName]['provide'],
+                      'each': firstVal,
+                      [firstVal]: i
+                    })
+                    defineObj['content'][randId].push(forRecursiveDefineObj.body)
+                  }
+                }
+                
+              }
+            }
+            
+          }
         } else {
           let recursiveDefineObj = recursive(dnode, {
             ...refOpt,
-            'provide': component[componentName]['provide']
+            'provide': component[fileName]['provide']
           })
@@ -219,5 +337,5 @@ defineObj['content'][randId].push(recursiveDefineObj.body)
       defineObj['body'] = Object.values(defineObj['content']).flat()
-      component[componentName][param] = Object.assign({}, component[componentName][param], defineObj)
+      component[fileName][param] = Object.assign({}, component[fileName][param], defineObj)
     } else if(rnode.type === 'atrule' && rnode.name === 'use') {
-      component[componentName]['inits'].push(rnode)
+      component[fileName]['inits'].push(rnode)
     } else if(rnode.type === 'atrule' && rnode.name === 'export') {
@@ -227,5 +345,5 @@ const param = rnode.params?.trim() || ''
       for(let dnode of newParams) {
-        if(component[componentName]['modules'][dnode.trim()]) {
-          component[componentName]['modules'][dnode.trim()]['inits'].push(rnode.clone({ params: dnode.trim() }))
-          component[dnode.trim()] = component[componentName]['modules'][dnode.trim()]
+        if(component[fileName]['modules'][dnode.trim()]) {
+          component[fileName]['modules'][dnode.trim()]['inits'].push(rnode.clone({ params: dnode.trim() }))
+          component[dnode.trim()] = component[fileName]['modules'][dnode.trim()]
         }
@@ -235,32 +353,63 @@ }
   }
-  return component
+  
+  let newBodyVar = []
+  if(component[fileName]?.[componentName]?.['body']) {
+    newBodyVar = component[fileName][componentName]['body']
+  }
+  let newNodes = [ 
+    ...declaration(newBodyVar,
+    {
+      refs: component[fileName]['refs'],
+      scopes: component[fileName]['scopes'],
+      props: Object.assign({}, component[fileName]['props'], opts.props),
+      provide: component[fileName]['provide']
+    },
+    {
+      screen: opts.screen,
+      state: opts.state, 
+      prefers: opts.prefers, 
+      color: opts.color
+    })
+  ]
+  
+  const newRoot = component[fileName]['root']
+  newRoot.removeAll()
+  newRoot.append(...newNodes)
+  
+  return newRoot
 }
 
-module.exports = (paths, opts) => {
-  let component = {}
+module.exports = (paths, fileName, componentName, opts) => {
+  let component = null
   
-  const coreFile = path.resolve(__dirname, './../../alga/'+opts.componentName+'.alga')
-  if(fs.existsSync(coreFile)) {
-    component = Object.assign({}, component, readPath(coreFile, opts))
-  }
-  
-  if(typeof paths === 'string') {
-    const files = glob.sync(paths, {})
-    for(let file of files) {
-      if(file.endsWith('alga.css') || file.endsWith('.alga')) {
-        if(file.includes(opts.componentName)) {
-          component = Object.assign({}, component, readPath(file, opts))
-          break;
+  if(fileName) {
+    const coreFile = path.resolve(__dirname, './../../alga/'+fileName+'.alga')
+    if(fs.existsSync(coreFile)) {
+      component = readPath(coreFile, fileName, componentName, opts)
+    }
+    
+    if(typeof paths === 'string') {
+      const files = glob.sync(paths, {})
+      for(let file of files) {
+        if(file.endsWith(fileName+'.alga')) {
+          const splitFilePaths = file.split(/\/|\\/)
+          const splitFileName = splitFilePaths[Number(splitFilePaths.length) - 1]
+          if(splitFileName === fileName+'.alga') {
+            component = readPath(file, fileName, componentName, opts)
+            break;
+          }
         }
       }
-    }
-  } else if(Array.isArray(paths)) {
-    for(let p of Array.from(paths)) {
-      if(typeof p === 'string') {
-        const files = glob.sync(p, {})
-        for(let file of files) {
-          if(file.endsWith('alga.css') || file.endsWith('.alga')) {
-            if(file.includes(opts.componentName)) {
-              component = Object.assign({}, component, readPath(file, opts))
-              break;
+    } else if(Array.isArray(paths)) {
+      for(let p of Array.from(paths)) {
+        if(typeof p === 'string') {
+          const files = glob.sync(p, {})
+          for(let file of files) {
+            if(file.endsWith(fileName+'.alga')) {
+              const splitFilePaths = file.split(/\/|\\/)
+              const splitFileName = splitFilePaths[Number(splitFilePaths.length) - 1]
+              if(splitFileName === fileName+'.alga') {
+                component = readPath(file, fileName, componentName, opts)
+                break;
+              }
             }
@@ -267,0 +416,0 @@ }

src/cores/declaration.js

@@ -5,2 +5,3 @@ const postcss = require('postcss')
 const color = require('../configs/color.js')
+const camelDash = require('../helpers/camelDash.js')
 const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
@@ -10,2 +11,3 @@
   const refs = defs.refs
+  const scopes = defs.scopes
   const props = defs.props
@@ -16,3 +18,9 @@ const provide = defs.provide
   const prefers = Object.assign({}, statusValue(opts.prefers))
+  const print = {
+    value: {},
+    status: false,
+    source: undefined
+  }
   const newColor = opts?.color || color
+  let atFirstRuleArray = []
   let ruleArray = []
@@ -23,46 +31,22 @@ let atRuleArray = []
     const itemKey = Object.keys(item)[0]
-    if(itemKey.startsWith('@if ')) {
+    if(itemKey.startsWith('@keyframes ')) {
       const itemValue = Object.values(item)[0]
-      const ifKey = itemKey.replace('@if ', '')
-      if(ifKey.includes(' is ')) {
-        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()].value === splitKey[1].trim()) ||
-          (typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()].value === splitKey[1].trim())
-        ) {
-          ruleArray.push([
-            ...declaration((itemValue?.value || itemValue), defs, opts)
-          ])
-        }
-      } else if(ifKey.includes(' has ')) {
-        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()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) ||
-          (typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
-        ) {
-          ruleArray.push([
-            ...declaration((itemValue?.value || itemValue), defs, opts)
-          ])
-        }
-      }
-    } else if(itemKey.startsWith('@keyframes ')) {
-      const itemValue = Object.values(item)[0]
       const newAtRule = postcss.atRule({ name: 'keyframes', params: itemKey.replace('@keyframes ', '').trim(), source: Object.values(itemValue[0])[0].source })
       newAtRule.append([...declaration(itemValue, defs, opts)])
       ruleArray.push(newAtRule)
+    } else if(itemKey.startsWith('@page ')) {
+      const itemValue = Object.values(item)[0]
+      let paperValue = itemKey.replace('@page ', '').trim()
+      let paperAtRule = postcss.atRule({ name: 'page', source: Object.values(itemValue[0])[0].source })
+      if(['blank', 'first', 'left', 'right'].includes(paperValue)) {
+        paperValue = ':'+paperValue
+        paperAtRule = postcss.atRule({ name: 'page', params: paperValue, source: Object.values(itemValue[0])[0].source })
+      } else if(['topLeftCorner', 'topLeft', 'topCenter', 'topRight', 'topRightCorner', 'bottomLeftCorner', 'bottomLeft', 'bottomCenter', 'bottomRight', 'bottomRightCorner', 'leftTop', 'leftMiddle', 'leftBottom', 'rightTop', 'rightMiddle', 'rightBottom'].includes(paperValue)) {
+        paperAtRule = postcss.atRule({ name: 'page', params: paperValue, source: Object.values(itemValue[0])[0].source })
+      }
+      paperAtRule.append([...declaration(itemValue, defs, opts)])
+      atFirstRuleArray.push(paperAtRule)
     } else {
       const itemValues = Object.entries(item[itemKey].value)
       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]].value || `${arrowValues[0]}-${arrowValues[1]}`
-          }
-          return i
-        }).filter(i => i !== '').join('')
-      }
       const newRule = postcss.rule({ selector: selectorItemKey, source: item[itemKey].source })
@@ -79,3 +63,3 @@ for(let [key, val] of itemValues) {
             let declVal = undefined
-            if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
+            /*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
               let newDeclVal = val.value.replace('{', '').replace('}', '').trim()
@@ -93,10 +77,21 @@ const splitDeclVal = newDeclVal.split(/\(|\)|\s|,/g).filter(i => i !== '')
               }
-            } else {
+            } else {*/
               declVal = postcss.decl({ prop: key.trim(), value: val.value.trim().split(' ').map(i => {
-                if(i.startsWith('refs(') || i.startsWith('props(')) {
+                if(i.startsWith('refs(') || i.startsWith('props(') || i.startsWith('scopes(')) {
                   const arrowValues = i.split(/\(|\)/g)
-                  i = defs[arrowValues[0]][arrowValues[1]].value || i
+                  if(i.startsWith('scopes(')) {
+                    i = `var(--scope-${arrowValues[1]}, ${defs[arrowValues[0]][arrowValues[1]].value || i})`
+                  } else {
+                    i = defs[arrowValues[0]][arrowValues[1]].value || i
+                  }
                   if(arrowValues[2]) {
                     i = i + arrowValues[2]
                   }
+                } else if(i.startsWith('nrefs(') || i.startsWith('nprops(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
+                  i = '-'+i
                 } else if(i.startsWith('lighten(') || i.startsWith('darken(')) {
@@ -117,6 +112,10 @@ const splitValues = i.split(/\(|\)|\,/g)
                 } else if(i.startsWith('calc(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('refs(') || item.trim().startsWith('props(')) {
+                  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)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
+                      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]) {
@@ -129,6 +128,10 @@ item = item + splitValues[2]
                 } else if(i.startsWith('add(') || i.startsWith('sub(') || i.startsWith('div(') || i.startsWith('times(')) {
-                  i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
-                    if(item.trim().startsWith('refs(') || item.trim().startsWith('props(')) {
+                  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)
-                      item = defs[splitValues[0]][splitValues[1]].value || item
+                      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]) {
@@ -153,3 +156,3 @@ item = item + splitValues[2]
               }).join(' ').trim(), source: sourceItemVal })
-            }
+            //}
             newRule.append(declVal)
@@ -174,3 +177,10 @@ }
             }
+          } else {
+            if(key === 'print') {
+              print['value'][itemKey] = Object.assign({}, print['value'][itemKey], val)
+              print['status'] = true
+              print['source'] = sourceItemVal
+            }
           }
+          
         }
@@ -195,14 +205,2 @@ }
         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]].value || `${arrowValues[0]}-${arrowValues[1]}`
-            }
-            return i
-          }).filter(i => i !== '').join('')
-        }
         const newRule = postcss.rule({ selector: selectorItemKey, source: entryVal.source })
@@ -212,5 +210,5 @@ for(let [key, val] of Object.entries(itemValue)) {
             let declVal = undefined
-            if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
+            /*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
               declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
-            } else {
+            } else {*/
               declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
@@ -223,2 +221,9 @@ if(i.startsWith('props(')) {
                   }
+                } else if(i.startsWith('nprops(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
+                  i = '-'+i
                 } else if(i.startsWith('lighten(') || i.startsWith('darken(')) {
@@ -273,3 +278,3 @@ const splitValues = i.split(/\(|\)|\,/g)
               }).join(' ').trim(), source: val.source })
-            }
+            //}
             newRule.append(declVal)
@@ -289,14 +294,2 @@ }
         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]].value || `${arrowValues[0]}-${arrowValues[1]}`
-            }
-            return i
-          }).filter(i => i !== '').join('')
-        }
         let newRule = postcss.rule({ selector: selectorItemKey, source: entryVal.source })
@@ -316,5 +309,5 @@ if(entryVal?.selector) {
             let declVal = undefined
-            if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
+            /*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
               declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
-            } else {
+            } else {*/
               declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
@@ -327,2 +320,9 @@ if(i.startsWith('props(')) {
                   }
+                } else if(i.startsWith('nprops(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
+                  i = '-'+i
                 } else if(i.startsWith('lighten(') || i.startsWith('darken(')) {
@@ -377,3 +377,3 @@ const splitValues = i.split(/\(|\)|\,/g)
               }).join(' ').trim(), source: val.source })
-            }
+            //}
             newRule.append(declVal)
@@ -388,5 +388,88 @@ }
   
-  return [...ruleArray.flat(), ...atRuleArray]
+  if(print['status']) {
+    let newAtRule = postcss.atRule({ name: 'media', params: 'print', source: print['source'] })
+    for(let [itemKey, itemValue] of Object.entries(print['value'])) {
+      let selectorItemKey = itemKey
+      let newRule = postcss.rule({ selector: selectorItemKey, source: print['source'] })
+      for(let [key, val] of Object.entries(itemValue)) {
+        if(typeof val.value === 'string') {
+          let declVal = undefined
+            /*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
+              declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
+            } else {*/
+            declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
+                if(i.startsWith('props(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0]][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
+                } else if(i.startsWith('nprops(')) {
+                  const arrowValues = i.split(/\(|\)/g)
+                  i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
+                  i = '-'+i
+                } else if(i.startsWith('lighten(') || i.startsWith('darken(')) {
+                  const splitValues = i.split(/\(|\)|\,/g)
+                  let colorValue = splitValues[1]
+                  let amtValue = splitValues[2]
+                  if(colorValue.includes('hex')) {
+                    colorValue = colorValue.replaceAll('hex', '')
+                  }
+                  if(Object.keys(newColor).includes(colorValue)) {
+                    colorValue = newColor[colorValue]
+                  }
+                  if(splitValues[0] === 'darken') {
+                    amtValue = '-' + amtValue
+                  }
+                  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 })
+          //}
+          newRule.append(declVal)
+        }
+      }
+      newAtRule.append(newRule)
+    }
+    atRuleArray.push(newAtRule)
+  }
+  
+  return [...atFirstRuleArray, ...ruleArray.flat(), ...atRuleArray]
 }
 
 module.exports = declaration

src/cores/extraction.js

@@ -61,3 +61,5 @@ const glob = require('glob')
   let newStateExtract = {}
-  for(let ref of Array.from(new Set(extract))) {
+  const refs = Array.from(new Set(extract))
+
+  for(let ref of refs) {
     if(!options.extract.raws.includes(ref)) {
@@ -70,5 +72,5 @@ newExtract.push(...rules(ref, source, options))
   return {
-    raws: Array.from(new Set([...options.extract.raws, ...extract])),
+    raws: Array.from(new Set([...options.extract.raws, ...refs])),
     rules: [...options.extract.rules, ...newExtract, ...Object.values(newStateExtract)]
   }
 }

src/cores/package.js

@@ -57,2 +57,3 @@ const postcss = require('postcss')
         refs: component[componentName]['refs'] || {},
+        scopes: component[componentName]['scopes'] || {},
         props: component[componentName]['props'] || {}
@@ -149,2 +150,3 @@ }
         refs: component[componentName]['refs'] || {},
+        scopes: component[componentName]['scopes'] || {},
         props: component[componentName]['props'] || {}
@@ -169,2 +171,3 @@ }
             component[componentName]['refs'] = Object.assign({}, component[componentName]['refs'], component[componentName]['modules'][dnode.params.trim()]['refs'])
+            component[componentName]['scopes'] = Object.assign({}, component[componentName]['scopes'], component[componentName]['modules'][dnode.params.trim()]['scopes'])
             component[componentName]['props'] = Object.assign({}, component[componentName]['props'], component[componentName]['modules'][dnode.params.trim()]['props'])
@@ -181,2 +184,7 @@ component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], component[componentName]['modules'][dnode.params.trim()]['provide'])
             }
+            if(paramDnode.startsWith('scopes(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              let scopeParamDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+              paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
+            }
             let keyframeDefineObj = {}
@@ -193,16 +201,117 @@ keyframeDefineObj['@keyframes '+paramDnode] = []
           }
-        } else if(dnode.type === 'atrule' && dnode.name === 'if') {
+        } else if(dnode.type === 'atrule' && dnode.name === 'paper') {
           if('nodes' in dnode) {
-            let ifDefineObj = {}
-            ifDefineObj['@if '+dnode.params.trim()] = []
-            for(let ifnode of dnode.nodes) {
-              let ifRecursiveDefineObj = recursive(ifnode, {
+            let paramDnode = dnode.params.trim()
+            if(paramDnode.startsWith('refs(') || paramDnode.startsWith('props(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              paramDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+            }
+            if(paramDnode.startsWith('scopes(')) {
+              const arrowDnodeParams = paramDnode.split(/\(|\)/g)
+              let scopeParamDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
+              paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
+            }
+            let paperDefineObj = {}
+            paperDefineObj['@page '+paramDnode] = []
+            for(let kfnode of dnode.nodes) {
+              let paperRecursiveDefineObj = recursive(kfnode, {
                 ...refOpt,
                 'provide': component[componentName]['provide']
               })
-              ifDefineObj['@if '+dnode.params.trim()].push(ifRecursiveDefineObj.body)
+              paperDefineObj['@page '+paramDnode].push(paperRecursiveDefineObj.body)
             }
-            ifDefineObj['@if '+dnode.params.trim()] = ifDefineObj['@if '+dnode.params.trim()].flat()
-            defineObj['content'][randId].push(ifDefineObj)
+            paperDefineObj['@page '+paramDnode] = paperDefineObj['@page '+paramDnode].flat()
+            defineObj['content'][randId].push(paperDefineObj)
           }
+        } else if(dnode.type === 'atrule' && dnode.name === 'if') {
+          if('nodes' in dnode) {
+            const ifParams = dnode?.params?.trim() || ''
+            const ifProps = Object.assign({}, component[componentName]['props'], opts.props)
+            const ifRefs = component[componentName]?.['refs'] || {}
+            
+            if(ifParams.includes(' is ')) {
+              const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
+              if(
+                (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) ||
+                (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
+              ) {
+                
+                for(let ifnode of dnode.nodes) {
+                  let ifRecursiveDefineObj = recursive(ifnode, {
+                    ...refOpt,
+                    'provide': component[componentName]['provide']
+                  })
+                  defineObj['content'][randId].push(ifRecursiveDefineObj.body)
+                }
+                
+              }
+            } else if(ifParams.includes(' has ')) {
+              const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
+              if(
+                (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) ||
+                (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
+              ) {
+                
+                for(let ifnode of dnode.nodes) {
+                  let ifRecursiveDefineObj = recursive(ifnode, {
+                    ...refOpt,
+                    'provide': component[componentName]['provide']
+                  })
+                  defineObj['content'][randId].push(ifRecursiveDefineObj.body)
+                }
+                
+              }
+            }
+            
+          }
+        } else if(dnode.type === 'atrule' && dnode.name === 'for') {
+          if('nodes' in dnode) {
+            const forParams = dnode?.params?.trim() || ''
+            const forProps = Object.assign({}, component[componentName]['props'], opts.props)
+            const forRefs = component[componentName]?.['refs'] || {}
+            
+            if(forParams.includes(' in ')) {
+              const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+              
+                const firstVal = splitKey[0].trim()
+                const lastVal = forProps?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') || forRefs?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') || []
+                for(let forItem of lastVal) {
+                  if(forItem) {
+                    for(let fornode of dnode.nodes) {
+                      let forRecursiveDefineObj = recursive(fornode, {
+                        ...refOpt,
+                        'provide': component[componentName]['provide'],
+                        'each': firstVal,
+                        [firstVal]: forItem
+                      })
+                      defineObj['content'][randId].push(forRecursiveDefineObj.body)
+                    }
+                  }
+                }
+                
+              }
+            } else if(forParams.includes(' of ')) {
+              const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+                
+                const firstVal = splitKey[0].trim()
+                const lastVal =  (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0
+                
+                for(let i = 1; i <= Number(lastVal); i++) {
+                  for(let fornode of dnode.nodes) {
+                    let forRecursiveDefineObj = recursive(fornode, {
+                      ...refOpt,
+                      'provide': component[componentName]['provide'],
+                      'each': firstVal,
+                      [firstVal]: i
+                    })
+                    defineObj['content'][randId].push(forRecursiveDefineObj.body)
+                  }
+                }
+                
+              }
+            }
+            
+          }
         } else {
@@ -209,0 +318,0 @@ let recursiveDefineObj = recursive(dnode, {

src/cores/recursive.js

@@ -7,3 +7,3 @@ const screen = require('../configs/screen.js')
 function recursiveFunc(root, prm, opt = {}) {
-  let param = (root.type === 'rule') ? selector(root, prm) : ''
+  let param = (root.type === 'rule') ? selector(root, prm, opt) : ''
   const recursiveArr = []
@@ -16,2 +16,6 @@ const recursiveObj = {}
   if('nodes' in root && Array.isArray(root.nodes) && root.nodes.length >= 1) {
+    let screenObj = {}
+    let stateObj = {}
+    let prefersObj = {}
+    let printObj = {}
     for(let node of root.nodes) {
@@ -22,2 +26,4 @@ if(node.type === 'decl' && node.prop === 'ref') {
         let splitRefs = node.prop.split('-')[1]
+        let replacedEachValue = node.value.replaceAll(/(?=each\(|cap\(|lower\(|upper\(|camel\().*?(\))/gs, opt[opt.each])
+        replacedEachValue = replacedEachValue.replaceAll('hex', '#').replaceAll('pct', '%')
         if('preset' in opt && Object.keys(opt.preset).includes(splitRefs)) {
@@ -28,8 +34,11 @@ splitRefs = opt.preset[splitRefs]
         splitRefsObj[camelDash(splitRefs)] = {
-          value: node.value,
+          value: replacedEachValue,
           source: node.source
         }
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, splitRefsObj)
-      } else if(node.type === 'decl' && node.prop.startsWith('props-')) {
+      }/* else if(node.type === 'decl' && node.prop.startsWith('props-')) {
         let splitProps = node.prop.split('-')[1]
+        if('preset' in opt && Object.keys(opt.preset).includes(splitProps)) {
+          splitProps = opt.preset[splitProps]
+        }
         let splitPropsObj = {}
@@ -41,3 +50,3 @@ splitPropsObj[camelDash(splitProps)] = {
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, splitPropsObj)
-      } else if(node.type === 'decl' && node.prop === 'inject') {
+      }*/ else if(node.type === 'decl' && node.prop === 'inject') {
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, opt.provide[node.value].value)
@@ -52,13 +61,13 @@ } else if(node.type === 'decl' && node.prop === 'inject-props') {
       } else if(node.type === 'decl' && node.prop.startsWith('screen-')) {
-        let screenObj = {}
         screenObj[node.prop] = Object.assign({}, screenObj[node.prop], reference(node, opt))
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, screenObj)
       } else if(node.type === 'decl' && node.prop.startsWith('state-')) {
-        let stateObj = {}
         stateObj[node.prop] = Object.assign({}, stateObj[node.prop], reference(node, opt))
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, stateObj)
       } else if(node.type === 'decl' && node.prop.startsWith('prefers-')) {
-        let prefersObj = {}
         prefersObj[node.prop] = Object.assign({}, prefersObj[node.prop], reference(node, opt))
         recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, prefersObj)
+      } else if(node.type === 'decl' && node.prop === 'print') {
+        printObj[node.prop] = Object.assign({}, printObj[node.prop], reference(node, opt))
+        recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, printObj)
       } else if(node.type === 'decl' && node.prop.startsWith('webkit-')) {
@@ -85,24 +94,87 @@ let splitRefs = node.prop.split('-')[1]
       } else if(node.type === 'atrule' && node.name === 'if' && 'nodes' in node) {
-        const paramConditional = node.params.split(/is|has/)
-        const valueConditional = paramConditional[0]?.trim() || ''
-        const propsConditional = paramConditional[1]?.trim() || ''
-        let conditionalObj = {
-          value: {},
-          source: node.source
+        const ifParams = node?.params?.trim() || ''
+        const ifProps = opt.props
+        const ifRefs = opt.refs
+        
+        if(ifParams.includes(' is ')) {
+          const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
+          if(
+            (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) ||
+            (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
+          ) {
+                
+            for(let ifnode of node.nodes) {
+              if(ifnode.type === 'rule') {
+                for(let par of selector(ifnode, param, opt).split(',')) {
+                  recursiveArr.push(recursiveFunc(ifnode, par.trim(), opt))
+                }
+              }
+            }
+                
+          }
+        } else if(ifParams.includes(' has ')) {
+          const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
+          if(
+            (ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) ||
+                (ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
+          ) {
+                
+            for(let ifnode of node.nodes) {
+              if(ifnode.type === 'rule') {
+                for(let par of selector(ifnode, param, opt).split(',')) {
+                  recursiveArr.push(recursiveFunc(ifnode, par.trim(), opt))
+                }
+              }
+            }
+                
+          }
         }
-        for(let condVal of node.nodes) {
-          if(condVal.type === 'decl' && condVal.prop === 'ref') {
-            conditionalObj.value['if-'+propsConditional+'-'+valueConditional] = Object.assign({}, conditionalObj.value['if-'+propsConditional+'-'+valueConditional], reference(condVal, opt))
-          } else if(condVal.type === 'decl' && condVal.prop.startsWith('ref-')) {
-            let splitRefs = condVal.prop.split('-')[1]
-            let splitRefsObj = {}
-            splitRefsObj[camelDash(splitRefs)] = {
-              value: condVal.value,
-              source: condVal.source
+        
+      } else if(node.type === 'atrule' && node.name === 'for') {
+          if('nodes' in node) {
+            const forParams = node?.params?.trim() || ''
+            const forProps = opt.props
+            const forRefs = opt.refs
+            
+            if(forParams.includes(' in ')) {
+              const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+              
+                const firstVal = splitKey[0].trim()
+                const lastVal = forProps?.[splitKey[1].trim()]?.value.replaceAll(' ', '').split(',').filter(i => i !== '') || forRefs?.[splitKey[1].trim()]?.value.replaceAll(' ', '').split(',').filter(i => i !== '') || []
+                for(let forItem of lastVal) {
+                  if(forItem) {
+                    for(let fornode of node.nodes) {
+                      if(fornode.type === 'rule') {
+                        for(let par of selector(fornode, param, {...opt, 'each': firstVal, [firstVal]: forItem}).split(',')) {
+                          recursiveArr.push(recursiveFunc(fornode, par.trim(), {...opt, [firstVal]: forItem}))
+                        }
+                      }
+                    }
+                  }
+                }
+                
+              }
+            } else if(forParams.includes(' of ')) {
+              const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
+              if(Number(splitKey.length) === 2) {
+                
+                const firstVal = splitKey[0].trim()
+                const lastVal =  (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0
+                
+                for(let i = 1; i <= lastVal; i++) {
+                  for(let fornode of node.nodes) {
+                    if(fornode.type === 'rule') {
+                      for(let par of selector(fornode, param, {...opt, 'each': firstVal, [firstVal]: i}).split(',')) {
+                        recursiveArr.push(recursiveFunc(fornode, par.trim(), {...opt, [firstVal]: i}))
+                      }
+                    }
+                  }
+                }
+                
+              }
             }
-            conditionalObj.value['if-'+propsConditional+'-'+valueConditional] = Object.assign({}, conditionalObj.value['if-'+propsConditional+'-'+valueConditional], splitRefsObj)
+            
           }
-        }
-        recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, conditionalObj)
-      } else if(node.type === 'rule') {
+        } else if(node.type === 'rule') {
         for(let par of param.split(',')) {
@@ -109,0 +181,0 @@ recursiveArr.push(recursiveFunc(node, par.trim(), opt))

src/cores/reference.js

@@ -10,7 +10,20 @@ const preset = require('../configs/preset.js')
   
-  const refs = ref.value.split(' ').filter(i => i !== '')
+  const refs = ref.value.split(' ').filter(i => i !== '').map(item => {
+    if(item.startsWith('mx-')) {
+      item = [item.replace('mx-', 'mr-'), item.replace('mx-', 'ml-')]
+    } else if(item.startsWith('my-')) {
+      item = [item.replace('my-', 'mt-'), item.replace('my-', 'mb-')]
+    } else if(item.startsWith('px-')) {
+      item = [item.replace('px-', 'pr-'), item.replace('px-', 'pl-')]
+    } else if(item.startsWith('py-')) {
+      item = [item.replace('py-', 'pt-'), item.replace('py-', 'pb-')]
+    }
+    return item
+  }).flat()
+  
   for(let rf of refs) {
-    const props = rf.trim().split('-').filter(i => i !== '')
+    rf = rf.replaceAll(/(?=each\(|cap\(|lower\(|upper\(|camel\().*?(\))/gs, opt[opt.each])
+    const props = rf.replace('--', '-n').replaceAll('_-', '_n').trim().split('-').filter(i => i !== '')
     
-    if(!rf.includes(':')) { // && Number(props.length) === 2
+    if(!rf.includes(':') && props.length >= 2) { // && Number(props.length) === 2
       if([...properties, ...Object.keys(newPreset)].includes(props[0])) {
@@ -23,8 +36,13 @@ // Switch from preset to real property like m to margin
           ...opt,
-          property: props[0]
+          property: props[0],
+          value: props[1]
         }
         
+        const valueWithoutUnderscore = props[1].split('_').map(item => {
+          return value(item, refOpt)
+        }).join(' ')
+        
         const refObj = {}
         refObj[camelDash(props[0])] = {
-          value: value(props[1], refOpt),
+          value: valueWithoutUnderscore,
           source: ref.source
@@ -31,0 +49,0 @@ }

src/cores/rules.js

@@ -19,3 +19,9 @@ const postcss = require('postcss')
   
-  if(ref.includes(':') && [...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) { // for state colon like hover or active
+  if(ref.includes(':') && refs[0] === 'scope') {
+    const newReplacedSelector = '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')
+    const newRule = postcss.rule({ selector: newReplacedSelector, source: source })
+    const declVal = postcss.decl({ prop: '--scope-'+refs[1], value: refs[2], source: source })
+    newRule.append(declVal)
+    arr.push(newRule)
+  } else 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])) {
@@ -75,4 +81,85 @@ refs[1] = opts.preset[refs[1]]
     }
-  } else { // for class that not have colon
-    if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[0])) {
+  } else { // for a class that not have a colon in it
+    if(['ms', 'me', 'ps', 'pe'].includes(refs[0])) {
+      const refDirectionMode = {
+        ms: [{ltr: 'marginLeft'}, {rtl: 'marginRight'}],
+        me: [{ltr: 'marginRight'}, {rtl: 'marginLeft'}],
+        ps: [{ltr: 'paddingLeft'}, {rtl: 'paddingRight'}],
+        pe: [{ltr: 'paddingRight'}, {rtl: 'paddingLeft'}]
+      }
+      let newRule = null
+      for(let dirMode of refDirectionMode[refs[0]]) {
+        if(dirMode.ltr) {
+          newRule = postcss.rule({ selector: opts.state['ltr'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+          const refOpt = {
+            ...opts,
+            property: dirMode.ltr
+          }
+          const declVal = postcss.decl({ prop: camelDash(dirMode.ltr), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
+          newRule.append(declVal)
+        } else if(dirMode.rtl) {
+          newRule = postcss.rule({ selector: opts.state['rtl'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+          const refOpt = {
+            ...opts,
+            property: dirMode.rtl
+          }
+          const declVal = postcss.decl({ prop: camelDash(dirMode.rtl), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
+          newRule.append(declVal)
+        }
+      }
+      arr.push(newRule)
+    } else if(['cols', 'col', 'offset'].includes(refs[0])) {
+      if('col' === refs[0]) {
+        const newRule = postcss.rule({ selector: '.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+        let valNum = 'auto';
+        if(isNaN(refs[1]) === false) {
+          valNum = 8.33333333 * Number(refs[1])
+          valNum = String(valNum)+'%'
+        }
+        const newCols = [
+          {prop: 'flex', value: '0 0 auto'},
+          {prop: 'width', value: valNum},
+        ]
+        for(let newCol of newCols) {
+          const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+          newRule.append(declVal)
+        }
+        arr.push(newRule)
+      } else if('offset' === refs[0]) {
+        for(let offset = 0; offset < 2; offset++){
+          const dirMode = offset >= 1 ?  opts.state['rtl'].state+' ' : ''
+          const newRule = postcss.rule({ selector: dirMode+'.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
+          let valNum = 'auto';
+          if(isNaN(refs[1]) === false) {
+            valNum = 8.33333333 * Number(refs[1])
+            valNum = String(valNum)+'%'
+          }
+          const newCols = [
+            {prop: 'flex', value: '0 0 auto'},
+            {prop: (offset >= 1 ? 'marginRight' : 'marginLeft'), value: valNum},
+          ]
+          for(let newCol of newCols) {
+            const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+            newRule.append(declVal)
+          }
+          arr.push(newRule)
+        }
+      } else {
+        const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')+' > *', source: source })
+        let valNum = 'auto';
+        if(isNaN(refs[1]) === false) {
+          valNum = 100 / Number(refs[1])
+          valNum = String(valNum)+'%'
+        }
+        const newCols = [
+          {prop: 'flex', value: '0 0 auto'},
+          {prop: 'width', value: valNum},
+        ]
+        for(let newCol of newCols) {
+          const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
+          newRule.append(declVal)
+        }
+        arr.push(newRule)
+      }
+    } else 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(')', '\\)'), source: source })
@@ -79,0 +166,0 @@ if(Object.keys(newColor).includes(refs[0])) {

src/cores/selector.js

@@ -1,5 +0,9 @@
-module.exports = (root, param) => {
+const capValue = require('../helpers/capValue.js')
+const camelValue = require('../helpers/camelValue.js')
+
+module.exports = (root, param, opt) => {
   newSelectors = []
   for(let selector of root.selectors) {
     let newSelector = selector.trim()
+    
     if(newSelector.includes('&')) {
@@ -10,2 +14,38 @@ newSelector = newSelector.replaceAll('&', param.trim())
     }
+    
+    if(newSelector.includes('refs(') || newSelector.includes('props(')) {
+      newSelector = newSelector
+        .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 = opt[arrowValues[0]][arrowValues[1]].value || `${arrowValues[0]}-${arrowValues[1]}`
+          }
+          return i
+      }).filter(i => i !== '').join('')
+    }
+    
+    if(newSelector.includes('cap(') || newSelector.includes('camel(') || newSelector.includes('lower(') || newSelector.includes('each(')) {
+      newSelector = newSelector
+        .replaceAll(/cap\((\w+)\)/g, '<=>cap===$1<=>')
+        .replaceAll(/camel\((\w+)\)/g, '<=>camel===$1<=>')
+        .replaceAll(/lower\((\w+)\)/g, '<=>lower===$1<=>')
+        .replaceAll(/each\((\w+)\)/g, '<=>each===$1<=>')
+        .split('<=>').map(i => {
+          if(i.startsWith('cap===') || i.startsWith('camel===') || i.startsWith('lower===') || i.startsWith('each===')) {
+            const arrowValues = i.split('===')
+            i = opt[arrowValues[1].trim()] || ''
+            if(arrowValues[0].trim() === 'cap' && i !== '') {
+              i = capValue(i)
+            } else if(arrowValues[0].trim() === 'camel' && i !== '') {
+              i = camelValue(i)
+            } else if(arrowValues[0].trim() === 'lower' && i !== '') {
+              i = i.toLowerCase()
+            }
+          }
+          return i
+      }).filter(i => i !== '').join('')
+    }
+    
     newSelectors.push(newSelector.trim())
@@ -12,0 +52,0 @@ }

src/cores/value.js

 const camelDash = require('../helpers/camelDash.js')
 const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
+const capValue = require('../helpers/capValue.js')
+const camelValue = require('../helpers/camelValue.js')
 const values = require('../configs/values.js')
@@ -35,3 +37,3 @@ const units = require('../configs/units.js')
   else if(newValue.trim().startsWith('calc(')) {
-    newValue = newValue.replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
+    newValue = newValue.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
       if(item.trim().startsWith('refs(')) {
@@ -43,2 +45,11 @@ const splitValues = item.trim().split(/\(|\)/g)
         }
+      } 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]
+        }
       }
@@ -49,3 +60,3 @@ return item
   else if(newValue.trim().startsWith('add(') || newValue.trim().startsWith('sub(') || newValue.trim().startsWith('div(') || newValue.trim().startsWith('times(')) {
-    newValue = newValue.replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
+    newValue = newValue.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll('scopes(', '_scopes(').replaceAll(')', ')_').split('_').map(item => {
       if(item.trim().startsWith('refs(')) {
@@ -57,2 +68,11 @@ const splitValues = item.trim().split(/\(|\)/g)
         }
+      } 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]
+        }
       }
@@ -72,9 +92,30 @@ return item
   }
-  else if(newValue.trim().startsWith('refs(')) {
+  else if(newValue.trim().startsWith('refs(') || newValue.trim().startsWith('props(') || newValue.trim().startsWith('scopes(')) {
     const splitValues = newValue.trim().split(/\(|\)/g)
-    newValue = opt[splitValues[0]][splitValues[1]].value || newValue
+    if(newValue.trim().startsWith('scopes(')) {
+      newValue = `var(--scope-${splitValues[1]}, ${opt[splitValues[0]][splitValues[1]].value || newValue})`
+    } else {
+      newValue = opt[splitValues[0]][splitValues[1]].value || newValue
+    }
     if(splitValues[2]) {
       newValue = newValue + splitValues[2]
     }
-  } else if(!specialValues.includes(newValue) && !newValue.includes('(') && !newValue.includes(')') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
+  } 
+  else if(newValue.trim().startsWith('cap(') || newValue.trim().startsWith('camel(') || newValue.trim().startsWith('lower(') || newValue.trim().startsWith('upper(') || newValue.trim().startsWith('each(')) {
+    const splitValues = newValue.trim().split(/\(|\)/g)
+    newValue = opt[splitValues[1].trim()] || newValue
+    if(splitValues[0].trim() === 'cap') {
+      newValue = capValue(newValue)
+    } else if(splitValues[0].trim() === 'camel') {
+      newValue = camelValue(newValue)
+    } else if(splitValues[0].trim() === 'lower') {
+      newValue = newValue.toLowerCase()
+    } else if(splitValues[0].trim() === 'upper') {
+      newValue = newValue.toUpperCase()
+    }
+    if(splitValues[2]) {
+      newValue = newValue + splitValues[2]
+    }
+  } 
+  else if(!specialValues.includes(newValue) && !newValue.includes('(') && !newValue.includes(')') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
     newValue = camelDash(newValue)
@@ -84,3 +125,3 @@ }
     if(['width', 'maxWidth', 'minWidth', 'height', 'maxHeight', 'minHeight', 'top', 'right', 'bottom', 'left'].includes(opt.property)) {
-      if(Number(newValue) !== 0) {
+      if(Number(newValue) !== 0 && isNaN(opt?.value) === false) {
         newValue = newValue + '%'
@@ -87,0 +128,0 @@ }

src/index.js

@@ -11,4 +11,3 @@ const chokidar = require('chokidar')
 // Cores
-const component = require('./cores/component.js')
-const componentTwo = require('./cores/component21.js')
+const componentTwo = require('./cores/component.js')
 const declaration = require('./cores/declaration.js')
@@ -281,4 +280,2 @@ const extraction = require('./cores/extraction.js')
           
-          /* Component v2 */
-          
           if(name.includes('helpers') || param.includes('helpers')) {
@@ -346,64 +343,2 @@ if(root.source?.input?.from) {
           }
-          
-          /* Component v1 */
-          
-          /*if(!name.includes('helpers') && !config.components[name]) {
-            config.components = Object.assign({}, config.components, component(options?.src, {...opts, componentName: name}))
-          }
-          if(name.includes('helpers') || param.includes('helpers')) {
-            if(root.source?.input?.from) {
-              config.helpers.push(root.source.input.from)
-            }
-            config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})
-            
-            if(config.extract.rules.length >= 1) {
-              root.append(...config.extract.rules)
-            }
-            rule.remove()
-          } else if(config.components[name]) {
-            let newNodes = []
-            if(rule?.nodes) {
-              for(let node of rule.nodes) {
-                if(node.type === 'rule' && (rule?.nodes?.length || 0) >= 1) {
-                  const ruleNodeName = node.selector.replace(/\#|\./, '').trim()
-                  for(let ruleNode of node.nodes) {
-                    if(ruleNodeName === 'props') {
-                      if(ruleNode.prop in config.components[param][ruleNodeName]) {
-                        config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
-                      }
-                    }
-                  }
-                } else {
-                  if(node.type === 'decl' && String(node?.prop) in config.components[param]['props']) {
-                    config.components[param]['props'][node.prop].value = node.value
-                  }
-                }
-              }
-            }
-            let newBodyVar = []
-            if(config.components[param]?.[name]?.['body']) {
-              newBodyVar = config.components[param][name]['body']
-            }
-            newNodes = [
-              ...newNodes, 
-              ...declaration(newBodyVar,
-              {
-                refs: config.components[param]['refs'],
-                props: config.components[param]['props'], 
-                provide: config.components[param]['provide']
-              },
-              {
-                screen: config.screen,
-                state: config.state, 
-                prefers: config.prefers, 
-                color: config.color
-              })
-            ]
-            const newRoot = config.components[param]['root']
-            newRoot.removeAll()
-            newRoot.append(...newNodes)
-            rule.replaceWith(newRoot)
-          } else {
-            rule.remove()
-          }*/
         }
@@ -410,0 +345,0 @@ })

No alert changes

Improved metrics

Number of low supply chain risk alerts

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

244498

decreased by-9.71%

Number of package files

75

decreased by-6.25%

Lines of code

3180

decreased by-16.05%

No dependency changes