alga-css - npm Package Compare versions

Comparing version 1.0.0-development4 to 1.0.0-development5

js/extract.js

@@ -6,6 +6,6 @@ const postcss = require('postcss')
 function readPath(rp) {
-  const regexp = /class=\"([\w]+|[\s\w]+|[\s\w\-\_\.\:\d\(\)]+)\"/g
+  const regexp = /(v-bind:class|x-bind:class|:class|class)=\"([\w]+|[\s\w]+|[\s\w\-\_\.\:\d\(\)]+)\"/g
   const content = {}
   const data = fs.readFileSync(rp, 'utf8')
-  const classes = [...data.matchAll(regexp)].flat().filter(i => i.indexOf('class=') === -1)
+  const classes = [...data.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
   const uniqClasses = Array.from(new Set(classes.map(i => i.split(' ')).flat()))
@@ -12,0 +12,0 @@ console.log(uniqClasses)

js/props/double.js

@@ -22,5 +22,5 @@ module.exports = {
   },
-  tabular: {
+  tb: {
     key: 'display',
-    val: {base: 'table', caption: 'table-caption', cell: 'table-cell', col: 'table-column', colgroup: 'table-column-group', row: 'table-row', rowgroup: 'table-row-group', header: 'table-header-group', footer: 'table-footer-group'}
+    val: {base: 'table', caption: 'table-caption', cell: 'table-cell', scope: 'table-cell', col: 'table-column', cols: 'table-column-group', row: 'table-row', rows: 'table-row-group', body: 'table-row-group', head: 'table-header-group', foot: 'table-footer-group'}
   },
@@ -39,3 +39,3 @@ flow: {
   },
-  event: { 
+  events: { 
     key: 'pointer-events',
@@ -51,3 +51,7 @@ val: {auto: 'auto', none: 'none'}
     val: {base: 'default', none: 'none', auto: 'auto', pointer: 'pointer', wait: 'wait', text: 'text', move: 'move', disabled: 'not-allowed', grab: 'grab', cross: 'crosshair', cell: 'cell', grabbing: 'grabbing', copy: 'copy', alias: 'alias', move: 'move', progress: 'progress', vertical: 'vertical-text', context: 'context-menu', col: 'col-resize', row: 'row-resize', n: 'n-resize', e: 'e-resize', s: 's-resize', w: 'row-resize', ne: 'ne-resize', nw: 'nw-resize', se: 'se-resize', sw: 'sw-resize', ew: 'ew-resize', ns: 'ns-resize', nesw: 'nesw-resize', nwse: 'nwse-resize', 'in': 'zoom-in', 'out': 'zoom-out'}
+  },
+  caption: { 
+    key: 'caption-side',
+    val: {top: 'top', bottom: 'bottom'}
   }
 }

js/props/single.js

@@ -20,6 +20,2 @@ module.exports = {
   prewrap: { key: 'white-space', val: 'pre-wrap' },
-  wrap: { key: 'overflow-wrap', val: 'break-word' },
-  anywhere: { key: 'overflow-wrap', val: 'anywhere' },
-  breakall: { key: 'word-break', val: 'break-all' },
-  'break': { key: 'word-break', val: 'break-word' },
 }

js/props/styling.js

@@ -9,21 +9,30 @@ module.exports = {
       scroll: {key: 'background-attachment', val: 'scroll'},
-      clip: {key: 'background-clip', val: {
-        border: 'border-box',
-        padding: 'padding-box',
-        content: 'content-box',
-        text: 'text'
-      }},
-      origin: {key: 'background-origin', val: {
-        border: 'border-box',
-        padding: 'padding-box',
-        content: 'content-box'
-      }},
+      clip: {
+        key: 'background-clip', 
+        val: {
+          border: 'border-box',
+          padding: 'padding-box',
+          content: 'content-box',
+          text: 'text'
+        }
+      },
+      origin: {
+        key: 'background-origin', 
+        val: {
+          border: 'border-box',
+          padding: 'padding-box',
+          content: 'content-box'
+        }
+      },
       norepeat: {key: 'background-repeat', val: 'no-repeat'},
-      repeat: {key: 'background-repeat', val: {
-        base: 'repeat',
-        x: 'repeat-x',
-        y: 'repeat-y',
-        'round': 'round',
-        space: 'space'
-      }},
+      repeat: {
+        key: 'background-repeat', 
+        val: {
+          base: 'repeat',
+          x: 'repeat-x',
+          y: 'repeat-y',
+          'round': 'round',
+          space: 'space'
+        }
+      },
       auto: {key: 'background-size', val: 'auto'},
@@ -33,20 +42,23 @@ cover: {key: 'background-size', val: 'cover'},
       none: {key: 'background-image', val: 'none'},
-      blend: {key: 'background-blend-mode', val: {
-        normal: 'normal',
-        multiply: 'multiply',
-        screen: 'screen',
-        overlay: 'overlay',
-        darken: 'darken',
-        lighten: 'lighten',
-        dodge: 'color-dodge',
-        burn: 'color-burn',
-        hard: 'hard-light',
-        soft: 'soft-light',
-        difference: 'difference',
-        exclusion: 'exclusion',
-        hue: 'hue',
-        saturation: 'saturation',
-        color: 'color',
-        luminosity: 'luminosity'
-      }}
+      blend: {
+        key: 'background-blend-mode', 
+        val: {
+          normal: 'normal',
+          multiply: 'multiply',
+          screen: 'screen',
+          overlay: 'overlay',
+          darken: 'darken',
+          lighten: 'lighten',
+          dodge: 'color-dodge',
+          burn: 'color-burn',
+          hard: 'hard-light',
+          soft: 'soft-light',
+          difference: 'difference',
+          exclusion: 'exclusion',
+          hue: 'hue',
+          saturation: 'saturation',
+          color: 'color',
+          luminosity: 'luminosity'
+        }
+      }
     }
@@ -58,15 +70,15 @@ },
     attrs: {
-      none: {key: 'border-style', 'none'},
-      hidden: {key: 'border-style', 'hidden'},
-      dotted: {key: 'border-style', 'dotted'},
-      dashed: {key: 'border-style', 'dashed'},
-      solid: {key: 'border-style', 'solid'},
-      double: {key: 'border-style', 'double'},
-      groove: {key: 'border-style', 'groove'},
-      ridge: {key: 'border-style', 'ridge'},
-      inset: {key: 'border-style', 'inset'},
-      outset: {key: 'border-style', 'outset'},
-      thin: {key: 'border-width', 'thin'},
-      medium: {key: 'border-width', 'medium'},
-      thick: {key: 'border-width', 'thick'}
+      none: {key: 'border-style', val: 'none'},
+      hidden: {key: 'border-style', val: 'hidden'},
+      dotted: {key: 'border-style', val: 'dotted'},
+      dashed: {key: 'border-style', val: 'dashed'},
+      solid: {key: 'border-style', val: 'solid'},
+      double: {key: 'border-style', val: 'double'},
+      groove: {key: 'border-style', val: 'groove'},
+      ridge: {key: 'border-style', val: 'ridge'},
+      inset: {key: 'border-style', val: 'inset'},
+      outset: {key: 'border-style', val: 'outset'},
+      thin: {key: 'border-width', val: 'thin'},
+      medium: {key: 'border-width', val: 'medium'},
+      thick: {key: 'border-width', val: 'thick'}
     }
@@ -76,55 +88,73 @@ },
     color: 'color',
-    width: {key: 'font-size', val: {
-      '2xs': 'xx-small',
-      xs: 'x-small',
-      sm: 'small',
-      md: 'medium',
-      lg: 'large',
-      xl: 'x-large',
-      '2xl': 'xx-large',
-      '3xl': 'xxx-large',
-      smaller: 'smaller',
-      larger: 'larger'
+    width: {
+      key: 'font-size', 
+      val: {
+        '2xs': 'xx-small',
+        xs: 'x-small',
+        sm: 'small',
+        md: 'medium',
+        lg: 'large',
+        xl: 'x-large',
+        '2xl': 'xx-large',
+        '3xl': 'xxx-large',
+        smaller: 'smaller',
+        larger: 'larger'
+      }
     },
-    position: { key: 'text-align', val: {
-      start: 'start',
-      end: 'end',
-      left: 'left',
-      right: 'right',
-      center: 'center',
-      justify: 'justify',
-      all: 'justify-all',
-      'match': 'match-parent'
-    }},
-    weight: { key: 'font-weight', val: {
-      thin: 100,
-      extralight: 200,
-      light: 300,
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-      extrabold: 800,
-      heavy: 900,
-      extraheavy: 950
-    }},
-    style: { key: 'font-style', val: {
-      normal: 'normal',
-      italic: 'italic',
-      oblique: 'oblique'
-    }},
-    transform: { key: 'text-transform', val: {
-      notransform: 'none',
-      capitalize: 'capitalize',
-      uppercase: 'uppercase',
-      lowercase: 'lowercase',
-      fullwidth: 'full-width',
-      fullsize: 'full-size-kana'
-    }},
-    decoration: { key: 'text-decoration', val: {
-      nodecoration: 'none',
-      underline: 'underline',
-      overline: 'overline',
-      strikethrough: 'line-through'
-    }},
+    position: {
+      key: 'text-align', 
+      val: {
+        start: 'start',
+        end: 'end',
+        left: 'left',
+        right: 'right',
+        center: 'center',
+        justify: 'justify',
+        all: 'justify-all',
+        'match': 'match-parent'
+      }
+    },
+    weight: {
+      key: 'font-weight', 
+      val: {
+        thin: 100,
+        extralight: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        heavy: 900,
+        extraheavy: 950
+      }
+    },
+    style: {
+      key: 'font-style', 
+      val: {
+        normal: 'normal',
+        italic: 'italic',
+        oblique: 'oblique'
+      }
+    },
+    transform: {
+      key: 'text-transform', 
+      val: {
+        notransform: 'none',
+        capitalize: 'capitalize',
+        uppercase: 'uppercase',
+        lowercase: 'lowercase',
+        fullwidth: 'full-width',
+        fullsize: 'full-size-kana'
+      }
+    },
+    decoration: {
+      key: 'text-decoration', 
+      val: {
+        nodecoration: 'none',
+        underline: 'underline',
+        overline: 'overline',
+        strikethrough: 'line-through'
+      }
+    },
     'decoration-style': ['solid', 'double', 'dotted', 'dashed', 'wavy'],
@@ -139,17 +169,17 @@ 'thickness': 'text-decoration-thickness',
     attrs: {
-      none: {key: 'outline-style', 'none'},
-      hidden: {key: 'outline-style', 'hidden'},
-      dotted: {key: 'outline-style', 'dotted'},
-      dashed: {key: 'outline-style', 'dashed'},
-      solid: {key: 'outline-style', 'solid'},
-      double: {key: 'outline-style', 'double'},
-      groove: {key: 'outline-style', 'groove'},
-      ridge: {key: 'outline-style', 'ridge'},
-      inset: {key: 'outline-style', 'inset'},
-      outset: {key: 'outline-style', 'outset'},
-      thin: {key: 'outline-width', 'thin'},
-      medium: {key: 'outline-width', 'medium'},
-      thick: {key: 'outline-width', 'thick'}
+      none: {key: 'outline-style', val: 'none'},
+      hidden: {key: 'outline-style', val: 'hidden'},
+      dotted: {key: 'outline-style', val: 'dotted'},
+      dashed: {key: 'outline-style', val: 'dashed'},
+      solid: {key: 'outline-style', val: 'solid'},
+      double: {key: 'outline-style', val: 'double'},
+      groove: {key: 'outline-style', val: 'groove'},
+      ridge: {key: 'outline-style', val: 'ridge'},
+      inset: {key: 'outline-style', val: 'inset'},
+      outset: {key: 'outline-style', val: 'outset'},
+      thin: {key: 'outline-width', val: 'thin'},
+      medium: {key: 'outline-width', val: 'medium'},
+      thick: {key: 'outline-width', val: 'thick'}
     }
   }
 }

js/props/triple.js

@@ -23,2 +23,3 @@ const overflowVal = {auto: 'auto', hidden: 'hidden', visible: 'visible', scroll: 'scroll'}
     scroll: {key: 'overflow', val: 'scroll'},
+    touch: {key: '-webkit-overflow-scrolling', val: 'touch'},
     x: {key: 'overflow-x', val: overflowVal},
@@ -47,3 +48,4 @@ y: {key: 'overflow-y', val: overflowVal},
     bottom: { key: 'vertical-align', val: 'bottom'},
-    text: { key: 'vertical-align', val: {top: 'text-top', bottom: 'text-bottom'}}
+    text: { key: 'vertical-align', val: {top: 'text-top', bottom: 'text-bottom'}},
+    vertical: { key: 'vertical-align', val: {inherit: 'inherit', initial: 'initial', revert: 'revert', unset: 'unset'}}
   },
@@ -59,3 +61,7 @@ place: {
     rows: { key: 'grid-auto-rows', val: {auto: 'auto', 'min': 'min-content', 'max': 'max-content', fr: 'minmax(0px, 1fr)'}},
+  },
+  word: {
+    wrap: {key: 'overflow-wrap', val: {base: 'break-word', anywhere: 'anywhere', normal: 'normal'}},
+    'break': {key: 'word-break', val: {base: 'break-word', all: 'break-all', normal: 'normal'}},
   }
 }

js/provide.js

@@ -16,41 +16,42 @@ const postcss = require('postcss')
         for(let node of rnode.nodes) {
-          if(node.type === 'atrule' && node.name === 'prefers') {
-            const prefersParam = node.params.trim()
-            if(opts.prefers[prefersParam]) {
-              const media = postcss.atRule({name: 'media', params: opts.prefers[prefersParam]})
-              media.append(node.nodes)
-              selectNodes.push(media)
-            } else {
+          if(node.type === 'atrule') {
+            if(node.name === 'prefers') {
+              const prefersParam = node.params.trim()
+              if(opts.prefers[prefersParam] !== undefined) {
+                const media = postcss.atRule({name: 'media', params: opts.prefers[prefersParam]})
+                media.append(node.nodes)
+                selectNodes.push(media)
+              }
               node.remove()
-            }
-          } else if(node.type === 'atrule' && node.name === 'screen') {
-            const screenParam = node.params.trim()
-            if(opts.screen[screenParam]) {
-              const media = postcss.atRule({name: 'media', params: `(min-width: ${opts.screen[screenParam]})`})
-              media.append(node.nodes)
-              selectNodes.push(media)
-            } else {
+            } else if(node.name === 'screen') {
+              const screenParam = node.params.trim()
+              if(Object.keys(opts.screen).includes(screenParam)) {
+                const media = postcss.atRule({name: 'media', params: `(min-width: ${opts.screen[screenParam]})`})
+                media.append(node.nodes)
+                selectNodes.push(media)
+              }
               node.remove()
-            }
-          } else if(node.type === 'atrule' && node.name === 'get') {
-            const getParam = node.params.trim()
-            if(opts.define[getParam]) {
-              const setRule = postcss.rule({selector: '.'+getParam})
-              setRule.append(...opts.define[getParam])
-              if(node.nodes) {
-                for(let getNode of node.nodes) {
-                  if(getNode.type === 'decl' && getNode.prop === 'emit') {
-                    const refs = getNode.value.trim() ? Array.from(new Set(getNode.value.trim().split(/\s|\|/).filter(i => i !== ''))) : []
-                    for(let ref of refs) {
-                      setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+            } else if(node.name === 'get') {
+              const getParam = node.params.trim()
+              if(opts.define[getParam]) {
+                const setRule = postcss.rule({selector: '.'+getParam})
+                setRule.append(...opts.define[getParam])
+                if(node.nodes) {
+                  for(let getNode of node.nodes) {
+                    if(getNode.type === 'decl' && getNode.prop === 'emit') {
+                      const refs = getNode.value.trim() ? Array.from(new Set(getNode.value.trim().split(/\s|\|/).filter(i => i !== ''))) : []
+                      for(let ref of refs) {
+                        setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                      }
                     }
                   }
                 }
+                selectNodes.push(setRule)
+              } else {
+                node.remove()
               }
-              selectNodes.push(setRule)
-            } else {
-              node.remove()
             }
-          } if(node.type === 'rule') {
+          } else if(node.type === 'rule') {
             const setRule = postcss.rule({selector: node.selector})
+            const mediaDecl = []
             if(node.nodes) {
@@ -67,2 +68,22 @@ for(let nd of node.nodes) {
                   }
+                } else if(nd.type === 'decl' && nd.prop === 'screen') {
+                  for(let [scrKey, scrVal] of Object.entries(opts.screen)) {
+                    const setAtRule = postcss.atRule({name: 'media', params: `(min-width: ${scrVal})`})
+                    const setNewRule = postcss.rule({selector: `.${scrKey}\\.${node.selector.replace('.', '')}`})
+                    const refs = nd.value.trim() ? Array.from(new Set(nd.value.trim().split(/\s|\|/).filter(i => i !== ''))) : []
+                    for(let ref of refs) {
+                      setNewRule.append(...reference(ref, {screen: opts.screen, prefers: opts.prefers, color: opts.color, preset: opts.preset}))
+                    }
+                    setAtRule.append(setNewRule)
+                    mediaDecl.push(setAtRule)
+                  }
+                } else if(nd.type === 'decl' && Object.keys(opts.screen).includes(nd.prop)) {
+                  const setAtRule = postcss.atRule({name: 'media', params: `(min-width: ${opts.screen[nd.prop]})`})
+                  const setNewRule = postcss.rule({selector: `.${nd.prop}\\.${node.selector.replace('.', '')}`})
+                  const refs = nd.value.trim() ? Array.from(new Set(nd.value.trim().split(/\s|\|/).filter(i => i !== ''))) : []
+                  for(let ref of refs) {
+                    setNewRule.append(...reference(ref, {screen: opts.screen, prefers: opts.prefers, color: opts.color, preset: opts.preset}))
+                  }
+                  setAtRule.append(setNewRule)
+                  mediaDecl.push(setAtRule)
                 } else {
@@ -73,3 +94,3 @@ setRule.append(nd)
             }
-            selectNodes.push(setRule)
+            selectNodes.push(setRule, ...mediaDecl)
           } else {
@@ -82,2 +103,3 @@ selectNodes.push(node)
     }
+    //rnode.remove()
   }
@@ -84,0 +106,0 @@

js/reference.js

@@ -5,6 +5,7 @@ const postcss = require('postcss')
 const spacing = require('./props/spacing.js')
+const styling = require('./props/styling.js')
+const indexing = require('./props/indexing.js')
 const single = require('./props/single.js')
 const double = require('./props/double.js')
 const triple = require('./props/triple.js')
-const indexing = require('./props/indexing.js')
 const grid = require('./props/grid.js')
@@ -14,5 +15,9 @@ const flex = require('./props/flex.js')
 const unitUtil = require('./utils/unit-util.js')
+const calcUtil = require('./utils/calc-util.js')
+const isUtil = require('./utils/is-util.js')
 
 const rightLeft = ['right', 'left']
 const topBottom = ['top', 'bottom']
+const sidePosition = [...topBottom, ...rightLeft]
+const globalVal = ['inherit', 'initial', 'revert', 'unset']
 
@@ -42,3 +47,3 @@ function reference(nameArg, valueArg, opts) {
       
-    if(isNaN(valueArg) === false) {
+    if(valueArg !== '' && isNaN(valueArg) === false) {
       state.alpha = Number('0.'+ valueArg)
@@ -54,4 +59,8 @@ }
     } else {
-      if(typeof valueArg === 'string') {
-        arr.push(postcss.decl({ prop: sizing[cls[0]], value: unitUtil(valueArg, unit.length, '%', 1) }))
+      if(valueArg !== '') {
+        if(isUtil.isCalc(valueArg)) {
+          arr.push(postcss.decl({ prop: sizing[cls[0]], value: calcUtil(valueArg) }))
+        } else {
+          arr.push(postcss.decl({ prop: sizing[cls[0]], value: unitUtil(valueArg, unit.length, '%', 1) }))
+        }
       }
@@ -176,4 +185,11 @@ }
     if(cls[1]) {
-      const cls1or2 = (typeof cls[2] === 'string') ? `${cls[1]}-${cls[2]}` : cls[1]
-      arr.push(postcss.decl({ prop: 'grid-area', value: cls1or2 }))
+      let clsArea = cls[1]
+      if(typeof cls[4] === 'string') {
+        clsArea = `${cls[1]}-${cls[2]}-${cls[3]}-${cls[4]}`
+      } else if(typeof cls[3] === 'string') {
+        clsArea = `${cls[1]}-${cls[2]}-${cls[3]}`
+      } else if(typeof cls[2] === 'string') {
+        clsArea = `${cls[1]}-${cls[2]}`
+      }
+      arr.push(postcss.decl({ prop: 'grid-area', value: clsArea }))
     }
@@ -204,3 +220,3 @@ } else if(Object.keys(indexing).includes(cls[0])) {
     } else {
-      if(valueArg !== null && isNaN(valueArg) === false) {
+      if(valueArg !== '' && isNaN(valueArg) === false) {
         arr.push(postcss.decl({prop: 'flex', value: `${valueArg} 1 0px`}))
@@ -211,2 +227,151 @@ } else {
     }
+  } else if(cls[0] === 'bd') {
+    if(cls[1] === 'collapse') {
+      arr.push(postcss.decl({prop: 'border-collapse', value: 'collapse'}))
+    } else if(cls[1] === 'color') {
+      if(globalVal.includes(cls[2])) {
+        arr.push(postcss.decl({prop: styling.bd.color, value: cls[2]}))
+      } else if(isUtil.isColor(valueArg)) {
+        arr.push(postcss.decl({prop: styling.bd.color, value: valueArg}))
+      } else if(isUtil.isHex(valueArg)) {
+        arr.push(postcss.decl({prop: styling.bd.color, value: valueArg.replace('hex(', '#').replace(')', '')}))
+      }
+    } else if(Object.keys(styling.bd.attrs).includes(cls[1])) {
+      arr.push(postcss.decl({prop: styling.bd.attrs[cls[1]].key, value: styling.bd.attrs[cls[1]].val}))
+      if(styling.bd.attrs[cls[1]].key === 'border-style' && valueArg !== '') {
+        arr.push(postcss.decl({ prop: styling.bd.width, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    } else if(Object.keys(opts.color).includes(cls[1])) {
+      let bdAlpha = 1
+      if(valueArg !== '' && isNaN(valueArg) === false) {
+        bdAlpha = Number('0.'+valueArg)
+      }
+      arr.push(postcss.decl({prop: styling.bd.color, value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], bdAlpha) : opts.color[cls[1]]}))
+    } else if(sidePosition.includes(cls[1])) {
+      if(cls[2] === 'color') {
+        if(globalVal.includes(cls[3])) {
+          arr.push(postcss.decl({prop: `border-${cls[1]}-color`, value: cls[3]}))
+        } else if(isUtil.isColor(valueArg)) {
+          arr.push(postcss.decl({prop: `border-${cls[1]}-color`, value: valueArg}))
+        } else if(isUtil.isHex(valueArg)) {
+          arr.push(postcss.decl({prop: `border-${cls[1]}-color`, value: valueArg.replace('hex(', '#').replace(')', '')}))
+        }
+      } else if(Object.keys(styling.bd.attrs).includes(cls[2])) {
+        if(styling.bd.attrs[cls[2]].key === 'border-style') {
+          arr.push(postcss.decl({prop: `border-${cls[1]}-style`, value: styling.bd.attrs[cls[2]].val}))
+          if(valueArg !== '') {
+            arr.push(postcss.decl({ prop: `border-${cls[1]}-width`, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+          }
+        } else if(styling.bd.attrs[cls[2]].key === 'border-width') {
+          arr.push(postcss.decl({prop: `border-${cls[1]}-width`, value: styling.bd.attrs[cls[2]].val}))
+        }
+      } else if(Object.keys(opts.color).includes(cls[2])) {
+        let bdAlpha = 1
+        if(valueArg !== '' && isNaN(valueArg) === false) {
+          bdAlpha = Number('0.'+valueArg)
+        }
+        arr.push(postcss.decl({prop: `border-${cls[1]}-color`, value: (typeof opts.color[cls[2]] !== 'string') ? colorUtil(opts.color[cls[2]], bdAlpha) : opts.color[cls[2]]}))
+      } else {
+        if(valueArg !== '') {
+          arr.push(postcss.decl({ prop: `border-${cls[1]}-width`, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+        }
+      }
+    } else if(cls[1] === 'x') {
+      if(valueArg !== '') {
+        arr.push(
+          postcss.decl({ prop: 'border-right-width', value: unitUtil(valueArg, unit.length, 'px', 1) }),
+          postcss.decl({ prop: 'border-left-width', value: unitUtil(valueArg, unit.length, 'px', 1) })
+        )
+      }
+    } else if(cls[1] === 'y') {
+      if(valueArg !== '') {
+        arr.push(
+          postcss.decl({ prop: 'border-top-width', value: unitUtil(valueArg, unit.length, 'px', 1) }),
+          postcss.decl({ prop: 'border-bottom-width', value: unitUtil(valueArg, unit.length, 'px', 1) })
+        )
+      }
+    } else if(cls[1] === 'spacing') {
+      if(valueArg !== '') {
+        arr.push(postcss.decl({ prop: 'border-spacing', value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    } else {
+      if(valueArg !== '') {
+        arr.push(postcss.decl({ prop: styling.bd.width, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    }
+  } else if(cls[0] === 'outline') {
+    if(cls[1] === 'offset') {
+      if(typeof valueArg === 'string') {
+        arr.push(postcss.decl({ prop: styling.outline.offset, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    } else if(cls[1] === 'color') {
+      if(globalVal.includes(cls[2])) {
+        arr.push(postcss.decl({prop: styling.outline.color, value: cls[2]}))
+      } else if(isUtil.isColor(valueArg)) {
+        arr.push(postcss.decl({prop: styling.outline.color, value: valueArg}))
+      } else if(isUtil.isHex(valueArg)) {
+        arr.push(postcss.decl({prop: styling.outline.color, value: valueArg.replace('hex(', '#').replace(')', '')}))
+      }
+    } else if(Object.keys(styling.outline.attrs).includes(cls[1])) {
+      arr.push(postcss.decl({prop: styling.outline.attrs[cls[1]].key, value: styling.outline.attrs[cls[1]].val}))
+      if(styling.outline.attrs[cls[1]].key === 'outline-style' && typeof valueArg === 'string') {
+        arr.push(postcss.decl({ prop: styling.outline.width, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    } else if(Object.keys(opts.color).includes(cls[1])) {
+      let outlineAlpha = 1
+      if(valueArg !== '' && isNaN(valueArg) === false) {
+        outlineAlpha = Number('0.'+valueArg)
+      }
+      arr.push(postcss.decl({prop: styling.outline.color, value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], outlineAlpha) : opts.color[cls[1]]}))
+    } else {
+      if(valueArg !== '') {
+        arr.push(postcss.decl({ prop: styling.outline.width, value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    }
+  } else if(cls[0] === 'txt') {
+    if(Object.keys(styling.txt.position.val).includes(cls[1])) {
+      if(typeof styling.txt.position.val[cls[1]] === 'string') {
+        arr.push(postcss.decl({prop: styling.txt.position.key, value: styling.txt.position.val[cls[1]]}))
+      }
+    } else if(cls[1] === 'align') {
+      if(globalVal.includes(cls[2])) {
+        arr.push(postcss.decl({prop: styling.txt.position.key, value: cls[2]}))
+      } else if(cls[2] === 'webkit') {
+        arr.push(postcss.decl({prop: styling.txt.position.key, value: '-webkit-match-parent'}))
+      }
+    } else if(cls[1] === 'color') {
+      if(isUtil.isColor(valueArg)) {
+        arr.push(postcss.decl({prop: 'color', value: valueArg}))
+      } else if(isUtil.isHex(valueArg)) {
+        arr.push(postcss.decl({prop: 'color', value: valueArg.replace('hex(', '#').replace(')', '')}))
+      }
+    } else if(Object.keys(opts.color).includes(cls[1])) {
+      let outlineAlpha = 1
+      if(valueArg !== '' && isNaN(valueArg) === false) {
+        outlineAlpha = Number('0.'+valueArg)
+      }
+      arr.push(postcss.decl({prop: styling.txt.color, value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], outlineAlpha) : opts.color[cls[1]]}))
+    }
+  } else if(cls[0] === 'bg') {
+    if(Object.keys(styling.bg.attrs).includes(cls[1])) {
+      if(typeof styling.bg.attrs[cls[1]].val === 'string') {
+        arr.push(postcss.decl({prop: styling.bg.attrs[cls[1]].key, value: styling.bg.attrs[cls[1]].val}))
+      } else {
+        if(Object.keys(styling.bg.attrs[cls[1]].val).includes(cls[2])) {
+          arr.push(postcss.decl({prop: styling.bg.attrs[cls[1]].key, value: styling.bg.attrs[cls[1]].val[cls[2]]}))
+        }
+      }
+    } else if(Object.keys(opts.color).includes(cls[1])) {
+      let outlineAlpha = 1
+      if(valueArg !== '' && isNaN(valueArg) === false) {
+        outlineAlpha = Number('0.'+valueArg)
+      }
+      arr.push(postcss.decl({prop: styling.bg.color, value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], outlineAlpha) : opts.color[cls[1]]}))
+    } else if(['center', ...sidePosition].includes(cls[1])) {
+      if(rightLeft.includes(cls[2])) {
+        arr.push(postcss.decl({prop: styling.bg.position, value: `${cls[1]} ${cls[2]}`}))
+      } else {
+        arr.push(postcss.decl({prop: styling.bg.position, value: cls[1]}))
+      }
+    }
   }
@@ -233,3 +398,3 @@ return arr
   } else {
-    arr = arr.concat(reference(refs[0], refs[1] ? refs[1] : null, opts))
+    arr = arr.concat(reference(refs[0], refs[1] ? refs[1] : '', opts))
   }
@@ -236,0 +401,0 @@

js/screen.js

 module.exports = {
-  'xs': '0px',
-  'sm': '600px', //576px
-  'md': '768px', //720px
-  'lg': '1024px', //992px
-  'xl': '1280px', //1200px
-  '2xl': '1440px', //1400px
-  '3xl': '1920px', //1800px
-  '4xl': '2560px', //2400px
-  '5xl': '3440px', //3400px
+  xs: '0px',
+  sm: '576px', //576px
+  md: '768px', //720px
+  lg: '1024px', //992px
+  xl: '1366px', 
+  '2xl': '1536px', 
+  '3xl': '1920px', 
+  '4xl': '2560px', 
+  '5xl': '3840px', 
 }

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-development4",
+  "version": "1.0.0-development5",
   "description": "Alga CSS is a scoped-first CSS toolkit for quickly compose or share any design between components",
@@ -12,2 +12,7 @@ "main": "js/index.js",
   },
+  "files": [
+    "js",
+    "css/defines",
+    "css/provides"
+  ],
   "repository": {
@@ -14,0 +19,0 @@ "type": "git",

README.md

@@ -17,3 +17,3 @@ <p align="center">
 
-What I mean by scope-first is, this Alga CSS is specially made for frameworks or libraries that support scoped-css like `Vue`, `Svelte` and `Astro`. Also, my goal in building this is to support all the UI libraries that I have now like `vidie` or `sastra`
+What I mean by scope-first is, this Alga CSS is specially made for frameworks or libraries that support scoped-css like `Vue` or (`Svelte` or `Astro` coming soon). Also, my goal in building this is to support all the UI libraries that I have now like `vidie` or (`sastra` still in progress)
 
@@ -26,9 +26,32 @@ All the main features:
 5. Custom CSS utility/helper (preset, define, color, screen, etc.)
-6. Extract classes from HTML (Petite-Vue, Alpine.js), Astro, Vue, Svelte, and JSX as well
+6. Extract classes from HTML (Petite-Vue, Alpine.js) and Vue or (in the future will support Svelte, Astro, and JSX as well)
 
-## Utility and Mixin
-For getting CSS utility, I provide a custom property which is `ref`.
+## Class Name Structure
+Alga CSS allow you to use whatever special character you wish (use either `-`, `.`, `:` or `_`) as divider or separator of class names or references.
 
 ```css
+/* highly recommended */
+<span class="md.mgTop-5 bgPrimary-725 txtColor-hex(333)"></span>
+
 .className {
+  ref: md.mgTop-5;
+  ref: txtColor.rgb(205,45,67);
+}
+
+
+/* alternative */
+md.pdTop.2
+
+md-pdBottom-4
+
+md:pdLeft:3
+
+md_pdRight_7
+```
+
+## Mixin and Composing CSS Component
+For composing CSS utility, we provide a custom property which is `ref`.
+
+```css
+.className {
   ref: flex justifyCenter flex-20 bgPrimary-3;
@@ -45,3 +68,3 @@ }
 
-For mixing or composing CSS properties, we can use `props` custom property.
+For mixing CSS properties, we provide `props` custom property.
 
@@ -58,5 +81,22 @@ ```css
 
-## Composable CSS Component (@set, @get)
+For getting CSS custom class, you can use `@get` custom rule and `emit` custom property if you want to inject CSS utility to it.
 
-## Advanced CSS Component (@provide, @inject, @prefers, @screen)
+```css
+@get className;
 
+/* or */
+
+@get className {
+  emit: txtBold-5 bdSolid-5;
+}
+
+/* or */
+
+@get className {
+  emit: txtBold-5;
+  emit: bdSolid-5;
+}
+```
+
+## Fragmenting CSS Component
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

99

increased by67.8%

Worsened metrics

Total package byte prevSize

72872

decreased by-98.31%

Number of package files

33

decreased by-74.81%

Lines of code

1775

decreased by-80.47%

No dependency changes