alga-css - npm Package Compare versions

Comparing version 1.0.0-diamond-9 to 1.0.0-emerald-0

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-diamond-9",
+  "version": "1.0.0-emerald-0",
   "description": "Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties",
   "main": "./src/index.js",
+  "bin": "./bin/algac",
   "scripts": {
@@ -11,2 +12,3 @@ "test": "jest",
   "files": [
+    "bin",
     "src",
@@ -39,4 +41,5 @@ "alga"
     "chokidar": "^3.5.3",
-    "glob": "^7.2.0"
+    "glob": "^7.2.0",
+    "minimist": "^1.2.6"
   }
 }

README.md

@@ -17,2 +17,4 @@ <p align="center">
 
+Older version only work on Unix/Linux based operating system, if you're using Windows, that mean you need to use the newest version otherwise the default directives won't work (I mean all the CSS components from alga directory not being read), this is because of bug that I have fixed now.
+
 All the main features:
@@ -23,3 +25,3 @@ 1. Created for scoped CSS
 5. Custom CSS helpers (preset, define, color, screen, etc.)
-6. Extract classes from HTML (Petite-Vue, Alpine.js), Vue, Svelte, and Astro
+6. Extract classes from Vue, HTML (Petite-Vue, Alpine.js), Astro, Svelte, and JSX/TSX
 
@@ -30,7 +32,7 @@ ## Installation and Setup
 ```sh
-npm install alga-css@next
+npm install alga-css --save-dev
 
 #or
 
-yarn add alga-css@next
+yarn add alga-css
 ```
@@ -46,3 +48,11 @@
     algacss({
-      extract: ['./src/**/*.vue', './src/**/*.html', './src/**/*.astro', './src/**/*.svelte']
+      extract: [
+        './src/**/*.vue', 
+        './src/**/*.html', 
+        './src/**/*.astro', 
+        './src/**/*.svelte', 
+        './src/**/*.jsx', 
+        './src/**/*.tsx'
+      ],
+      src: './src/styles/*.alga'
     })
@@ -70,2 +80,4 @@ ]
 width-100pct
+height-250px
+padding-1.75rem
 
@@ -76,8 +88,15 @@ /* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
 /* class structure: mode */
-dark:backgroundColor-hex333
-light:backgroundColor-hexfff
+dark:backgroundColor-hex242424
+light:backgroundColor-hexf2f2f2
 
+/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
+toDark:backgroundColor-hex242424
+
+/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
+toLight:backgroundColor-hexf2f2f2
+
 mode:backgroundColor-hexfff /* for [data-mode=dark] .backgroundColor-hexfff {} */
 
 /* class structure: state */
+hover:backgroundColor-hex2f2f2f
 facus:paddingLeft-3px
@@ -84,0 +103,0 @@ ```

src/configs/properties.js

@@ -1,1 +0,1 @@
-module.exports = ['accentColor', 'alignContent', 'alignItems', 'alignSelf', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'color', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hangingPunctuation', 'height', 'hyphens', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maskImage', 'maskMode', 'maskOrigin', 'maskPosition', 'maskRepeat', 'maskSize', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'objectFit', 'objectPosition', 'opacity', 'order', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'pointerEvents', 'position', 'quotes', 'resize', 'right', 'rowGap', 'scrollBehavior', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textDecorationThickness', 'textIndent', 'textJustify', 'textOverflow', 'textShadow', 'textTransform', 'top', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'userSelect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'zIndex', 'placeContent', 'placeSelf', 'placeItems', 'inset', 'appearance', 'colorScheme', 'fontSynthesis', 'fontSmoothing', 'osxFontSmoothing', 'textSizeAdjust', 'textRendering']
+module.exports = ['accentColor', 'alignContent', 'alignItems', 'alignSelf', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'color', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hangingPunctuation', 'height', 'hyphens', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maskImage', 'maskMode', 'maskOrigin', 'maskPosition', 'maskRepeat', 'maskSize', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'objectFit', 'objectPosition', 'opacity', 'order', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'pointerEvents', 'position', 'quotes', 'resize', 'right', 'rowGap', 'scrollBehavior', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textDecorationThickness', 'textIndent', 'textJustify', 'textOverflow', 'textShadow', 'textTransform', 'top', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'userSelect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'zIndex', 'placeContent', 'placeSelf', 'placeItems', 'inset', 'appearance', 'colorScheme', 'fontSynthesis', 'fontSmoothing', 'osxFontSmoothing', 'textSizeAdjust', 'textRendering', 'willChange']

src/configs/screen.js

@@ -17,2 +17,7 @@ module.exports = {
   },
+  mb: {
+    alias: ['mobile'],
+    size: '768px',
+    minmax: 'max'
+  },
   md: {
@@ -19,0 +24,0 @@ alias: ['medium', 'm'],

src/cores/component.js

@@ -61,2 +61,5 @@ const postcss = require('postcss')
           let splitRefs = dnode.prop.split('-')[1]
+          if('preset' in opts && Object.keys(opts.preset).includes(splitRefs)) {
+            splitRefs = opts.preset[splitRefs]
+          }
           let splitRefsObj = {}
@@ -212,2 +215,3 @@ splitRefsObj[camelDash(splitRefs)] = {
         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()]
@@ -214,0 +218,0 @@ }

src/cores/declaration.js

@@ -93,2 +93,5 @@ const postcss = require('postcss')
                   i = defs[arrowValues[0]][arrowValues[1]].value || i
+                  if(arrowValues[2]) {
+                    i = i + arrowValues[2]
+                  }
                 } else if(i.startsWith('lighten(') || i.startsWith('darken(')) {
@@ -113,2 +116,5 @@ const splitValues = i.split(/\(|\)|\,/g)
                       item = defs[splitValues[0]][splitValues[1]].value || item
+                      if(splitValues[2]) {
+                        item = item + splitValues[2]
+                      }
                     }
@@ -122,2 +128,5 @@ return item
                       item = defs[splitValues[0]][splitValues[1]].value || item
+                      if(splitValues[2]) {
+                        item = item + splitValues[2]
+                      }
                     }
@@ -128,9 +137,9 @@ return item
                   if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, '+')
+                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
                   } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, '-')
+                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
                   } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, '/')
+                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
                   } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, '*')
+                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
                   }
@@ -164,3 +173,3 @@ }
       
-      if(newRule.nodes.length >= 1) {
+      if((newRule?.nodes?.length || 0) >= 1) {
         ruleArray.push(newRule)
@@ -201,5 +210,8 @@ }
               declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
-                if(i.startsWith('refs(') || i.startsWith('props(')) {
+                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('lighten(') || i.startsWith('darken(')) {
@@ -220,6 +232,9 @@ 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(')', ')_').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]
+                      }
                     }
@@ -229,6 +244,9 @@ return item
                 } 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(')', ')_').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]
+                      }
                     }
@@ -239,9 +257,9 @@ return item
                   if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, '+')
+                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
                   } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, '-')
+                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
                   } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, '/')
+                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
                   } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, '*')
+                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
                   }
@@ -280,3 +298,10 @@ }
         if(entryVal?.selector) {
-          newRule = postcss.rule({ selector: entryVal.selector +' '+ selectorItemKey, source: entryVal.source })
+          if(selectorItemKey.trim() === 'html') {
+            newRule = postcss.rule({ selector: selectorItemKey+''+entryVal.selector, source: entryVal.source })
+          } else {
+            const splittedSelectors = selectorItemKey.split(', ').map(item => {
+              return 'html'+entryVal.selector +' '+ item
+            }).join(', ')
+            newRule = postcss.rule({ selector: splittedSelectors, source: entryVal.source })
+          }
         }
@@ -290,5 +315,8 @@ for(let [key, val] of Object.entries(itemValue)) {
               declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
-                if(i.startsWith('refs(') || i.startsWith('props(')) {
+                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('lighten(') || i.startsWith('darken(')) {
@@ -309,6 +337,9 @@ 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(')', ')_').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]
+                      }
                     }
@@ -318,6 +349,9 @@ return item
                 } 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(')', ')_').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]
+                      }
                     }
@@ -328,9 +362,9 @@ return item
                   if(i.startsWith('add(')) {
-                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, '+')
+                    i = i.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
                   } else if(i.startsWith('sub(')) {
-                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, '-')
+                    i = i.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
                   } else if(i.startsWith('div(')) {
-                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, '/')
+                    i = i.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
                   } else if(i.startsWith('times(')) {
-                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, '*')
+                    i = i.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
                   }
@@ -337,0 +371,0 @@ }

src/cores/extraction.js

@@ -18,9 +18,16 @@ const glob = require('glob')
   } else if(rp.endsWith('.svelte')) {
-    regexp = /class:([\w]+|[\s\w]+|[\s\w\-_.:\d\(\)]+)\s/g
-    replaceData = data.replace(/=|\>/ig, ' ')
-    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
-  } else { //.html, .astro, .edge, .blade.php, .twig
-    regexp = /(v-bind:class|x-bind:class|:class|class)="([\w]+|[\s\w]+|[\s\w\-_\.:\d\(\)]+)"/g
+    regexp = /(?<=class:).*?(?=\>|\s|=)|(?<=class=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
+  } else if(rp.endsWith('.jsx') || rp.endsWith('.tsx')) {
+    regexp = /(?<=className="|class=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
+  } else { //.html, .astro, .edge, .blade.php, .twig, .js, or .ts
+    /*regexp = /(v-bind:class|x-bind:class|:class|class|className)="([\w]+|[\s\w]+|[\s\w\-_\.:\d\(\)]+)"/g
     replaceData = data.replace(/\[|\]|',|,\s|'|\(|\)|\<|\>|\{|\}/ig, ' ').replace(/:\s/ig, '')
-    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
+    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)*/
+    regexp = /(?<=v-bind:class="|x-bind:class="|:class="|class="|className=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
   }
@@ -27,0 +34,0 @@ if(classes) {

src/cores/package.js

 const postcss = require('postcss')
 const glob = require('glob')
 const fs = require('fs')
+const path = require('path')
 const screen = require('../configs/screen.js')
 const camelDash = require('../helpers/camelDash.js')
+const randomChar = require('../helpers/randomChar.js')
 const reference = require('./reference.js')
@@ -38,3 +40,3 @@ const recursive = require('./recursive.js')
       }
-      component[componentName]['modules'] = Object.assign({}, component[componentName]['modules'], readPath(newPrmUrl, opts))
+      component[componentName]['modules'] = Object.assign({}, component[componentName]['modules'], readPath(path.resolve(newPrmUrl), opts))
     } else if(rnode.type === 'atrule' && rnode.name === 'define' && 'nodes' in rnode) {
@@ -69,2 +71,5 @@ const param = rnode.params.trim()
           let splitRefs = dnode.prop.split('-')[1]
+          if('preset' in opts && Object.keys(opts.preset).includes(splitRefs)) {
+            splitRefs = opts.preset[splitRefs]
+          }
           let splitRefsObj = {}
@@ -220,2 +225,3 @@ splitRefsObj[camelDash(splitRefs)] = {
         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()]
@@ -222,0 +228,0 @@ }

src/cores/recursive.js

@@ -20,2 +20,5 @@ const screen = require('../configs/screen.js')
         let splitRefs = node.prop.split('-')[1]
+        if('preset' in opt && Object.keys(opt.preset).includes(splitRefs)) {
+          splitRefs = opt.preset[splitRefs]
+        }
         let splitRefsObj = {}
@@ -22,0 +25,0 @@ splitRefsObj[camelDash(splitRefs)] = {

src/cores/value.js

@@ -39,2 +39,5 @@ const camelDash = require('../helpers/camelDash.js')
         item = opt[splitValues[0]][splitValues[1]].value || item
+        if(splitValues[2]) {
+          item = item + splitValues[2]
+        }
       }
@@ -49,2 +52,5 @@ return item
         item = opt[splitValues[0]][splitValues[1]].value || item
+        if(splitValues[2]) {
+          item = item + splitValues[2]
+        }
       }
@@ -55,9 +61,9 @@ return item
     if(newValue.trim().startsWith('add(')) {
-      newValue = newValue.replace('add', 'calc').replace(/\,|\s\,/g, '+')
+      newValue = newValue.replace('add', 'calc').replace(/\,|\s\,/g, ' + ')
     } else if(newValue.trim().startsWith('sub(')) {
-      newValue = newValue.replace('sub', 'calc').replace(/\,|\s\,/g, '-')
+      newValue = newValue.replace('sub', 'calc').replace(/\,|\s\,/g, ' - ')
     } else if(newValue.trim().startsWith('div(')) {
-      newValue = newValue.replace('div', 'calc').replace(/\,|\s\,/g, '/')
+      newValue = newValue.replace('div', 'calc').replace(/\,|\s\,/g, ' / ')
     } else if(newValue.trim().startsWith('times(')) {
-      newValue = newValue.replace('times', 'calc').replace(/\,|\s\,/g, '*')
+      newValue = newValue.replace('times', 'calc').replace(/\,|\s\,/g, ' * ')
     }
@@ -68,3 +74,6 @@ }
     newValue = opt[splitValues[0]][splitValues[1]].value || newValue
-  } else if(!specialValues.includes(newValue) && !newValue.includes('props')) {
+    if(splitValues[2]) {
+      newValue = newValue + splitValues[2]
+    }
+  } else if(!specialValues.includes(newValue) && !newValue.includes('props') && !newValue.includes('refs') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
     newValue = camelDash(newValue)
@@ -71,0 +80,0 @@ }

src/index.js

@@ -14,2 +14,3 @@ const chokidar = require('chokidar')
 const extraction = require('./cores/extraction.js')
+const render = require('./cores/render.js')
 const packages = require('./cores/package.js')
@@ -35,3 +36,11 @@
   
-  const watcher = chokidar.watch(options?.extract, {
+  let watchFiles = []
+  if(options?.extract) {
+    watchFiles = watchFiles.concat(options?.extract || [])
+  }
+  if(options?.src) {
+    watchFiles = watchFiles.concat(options?.src || [])
+  }
+  
+  const watcher = chokidar.watch(watchFiles, {
     ignored: /(^|[\/\\])\../, // ignore dotfiles
@@ -68,3 +77,3 @@ persistent: true
     for(let keyComponent of Object.keys(newComponent)) {
-      if(newComponent[keyComponent]['inits']) {
+      if(!keyComponent.includes('package') && newComponent[keyComponent]['inits']) {
         for(let init of newComponent[keyComponent]['inits']) {
@@ -106,15 +115,25 @@ if(!config.inits.map(i => i.params).includes(init.params)) {
             for(let node of rule.nodes) {
-              if(node.type === 'rule' && rule.nodes.length >= 1) {
+              if(node.type === 'rule' && (rule?.nodes?.length || 0) >= 1) {
                 const ruleNodeName = node.selector.replace(/\#|\./, '').trim()
                 for(let ruleNode of node.nodes) {
-                  config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
+                  if(ruleNodeName === 'props') {
+                    if(ruleNode.prop in config.components[param][ruleNodeName]) {
+                      config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
+                    }
+                  }
                 }
               } else {
-                config.components[param]['props'][node.prop].value = node.value
+                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(config.components[param][name]['body'],
+            ...declaration(newBodyVar,
             {
@@ -141,2 +160,12 @@ refs: config.components[param]['refs'],
       
+      root.walkAtRules('ref', rule => {
+        let params = rule.params.trim().split(' ')
+        if(params.length >= 1) {
+          let newRender = render(params, rule.source, {...opts})
+          rule.replaceWith(newRender)
+        } else {
+          rule.remove()
+        }
+      })
+      
       let newPackNodes = []
@@ -157,8 +186,25 @@ const filterPackNodes = []
             for(let node of rule.nodes) {
-              config.components[param]['props'][node.prop] = node.value
+              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(config.components[param][name]['body'],
+            ...declaration(newBodyVar,
             {
@@ -165,0 +211,0 @@ refs: config.components[param]['refs'],

No alert changes

Improved metrics

Total package byte prevSize

178957

increased by20.61%

Number of package files

56

increased by7.69%

Lines of code

2055

increased by6.42%

Number of lines in readme file

141

increased by15.57%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedminimist@^1.2.6

• + Addedminimist@1.2.8(transitive)