alga-css - npm Package Compare versions

Comparing version 1.0.0-development8 to 1.0.0-development9

js/color.js

@@ -23,4 +23,3 @@ module.exports = {
   transparent: 'transparent',
-  current: 'currentColor',
-  color: 'var(--color)',
+  current: 'currentColor'
 }

js/props/single.js

@@ -19,3 +19,3 @@ module.exports = {
   preline: { key: 'white-space', val: 'pre-line' },
-  prewrap: { key: 'white-space', val: 'pre-wrap' },
+  prewrap: { key: 'white-space', val: 'pre-wrap' }
 }

js/props/txt-prop.js

@@ -6,10 +6,10 @@ module.exports = {
     val: {
-      '2xs': 'xx-small',
-      xs: 'x-small',
-      sm: 'small',
-      md: 'medium',
-      lg: 'large',
-      xl: 'x-large',
-      '2xl': 'xx-large',
-      '3xl': 'xxx-large',
+      xxsmall: 'xx-small',
+      xsmall: 'x-small',
+      small: 'small',
+      medium: 'medium',
+      large: 'large',
+      xlarge: 'x-large',
+      xxlarge: 'xx-large',
+      xxxlarge: 'xxx-large',
       smaller: 'smaller',
@@ -44,3 +44,5 @@ larger: 'larger'
       heavy: 900,
-      extraheavy: 950
+      extraheavy: 950,
+      lighter: 'lighter',
+      bolder: 'bolder'
     }
@@ -68,3 +70,3 @@ },
   decoration: {
-    key: 'text-decoration', 
+    key: 'text-decoration-line', 
     val: {
@@ -77,5 +79,3 @@ nodecoration: 'none',
   },
-  'decoration-style': ['solid', 'double', 'dotted', 'dashed', 'wavy'],
-  'thickness': 'text-decoration-thickness',
-  'shadow': 'text-shadow'
+  'text-decoration-style': ['solid', 'double', 'dotted', 'dashed', 'wavy']
 }

js/reference.js

@@ -5,3 +5,2 @@ const postcss = require('postcss')
 const spacing = require('./props/spacing.js')
-const styling = require('./props/styling.js')
 const indexing = require('./props/indexing.js')
@@ -14,2 +13,5 @@ const single = require('./props/single.js')
 const txt = require('./refs/txt.js')
+const bg = require('./refs/bg.js')
+const bd = require('./refs/bd.js')
+const outline = require('./refs/outline.js')
 const colorUtil = require('./utils/color-util.js')
@@ -225,153 +227,11 @@ const unitUtil = require('./utils/unit-util.js')
   } 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) }))
-      }
-    }
+    arr.push(...bd(cls, valueArg, opts))
   } 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) }))
-      }
-    }
+    arr.push(...outline(cls, valueArg, opts))
   } else if(cls[0] === 'txt') {
     arr.push(...txt(cls, valueArg, opts))
-    /*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]}))
-      }
-    }
+    arr.push(...bg(cls, valueArg, opts))
   }
   return arr
 }

js/refs/txt.js

 const postcss = require('postcss')
 const txtProp = require('../props/txt-prop.js')
-const global = require('../props/global.js')
+const gbl = require('../props/global.js')
 const unit = require('../props/unit.js')
@@ -13,7 +13,5 @@ const colorUtil = require('../utils/color-util.js')
   if(Object.keys(txtProp.position.val).includes(cls[1])) {
-    if(typeof txtProp.position.val[cls[1]] === 'string') {
-      arr.push(postcss.decl({prop: txtProp.position.key, value: txtProp.position.val[cls[1]]}))
-    }
+    arr.push(postcss.decl({prop: txtProp.position.key, value: txtProp.position.val[cls[1]]}))
   } else if(cls[1] === 'align') {
-    if(global.includes(cls[2])) {
+    if(gbl.includes(cls[2])) {
       arr.push(postcss.decl({prop: txtProp.position.key, value: cls[2]}))
@@ -35,2 +33,39 @@ } else if(cls[2] === 'webkit') {
     arr.push(postcss.decl({prop: txtProp.color, value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], outlineAlpha) : opts.color[cls[1]]}))
+  } else if(Object.keys(txtProp.weight.val).includes(cls[1])) {
+    arr.push(postcss.decl({prop: txtProp.weight.key, value: txtProp.weight.val[cls[1]]}))
+    if(valueArg !== '') {
+      arr.push(postcss.decl({ prop: txtProp.width.key, value: unitUtil(valueArg, unit.length, 'pt', 1) }))
+    }
+  } else if(Object.keys(txtProp.style.val).includes(cls[1])) {
+    arr.push(postcss.decl({prop: txtProp.style.key, value: txtProp.style.val[cls[1]]}))
+    if(valueArg !== '') {
+      arr.push(postcss.decl({ prop: txtProp.width.key, value: unitUtil(valueArg, unit.length, 'pt', 1) }))
+    }
+  } else if(Object.keys(txtProp.transform.val).includes(cls[1])) {
+    arr.push(postcss.decl({prop: txtProp.transform.key, value: txtProp.transform.val[cls[1]]}))
+  } else if(Object.keys(txtProp.width.val).includes(cls[1])) {
+    arr.push(postcss.decl({prop: txtProp.width.key, value: txtProp.width.val[cls[1]]}))
+  } else if(Object.keys(txtProp.decoration.val).includes(cls[1])) {
+    arr.push(postcss.decl({prop: txtProp.decoration.key, value: txtProp.decoration.val[cls[1]]}))
+    if(Object.keys(opts.color).includes(cls[2])) {
+      let outlineAlpha = 1
+      if(valueArg !== '' && isNaN(valueArg) === false) {
+        outlineAlpha = Number('0.'+valueArg)
+      }
+      arr.push(postcss.decl({prop: 'text-decoration-color', value: (typeof opts.color[cls[1]] !== 'string') ? colorUtil(opts.color[cls[1]], outlineAlpha) : opts.color[cls[3]]}))
+    } else if(cls[2] === 'color') {
+      if(isUtil.isColor(valueArg)) {
+        arr.push(postcss.decl({prop: 'text-decoration-color', value: valueArg}))
+      } else if(isUtil.isHex(valueArg)) {
+        arr.push(postcss.decl({prop: 'text-decoration-color', value: valueArg.replace('hex(', '#').replace(')', '')}))
+      }
+    } else if(txtProp['text-decoration-style'].includes(cls[2])) {
+      arr.push(postcss.decl({prop: 'text-decoration-style', value: cls[2]}))
+    } else {
+      if(valueArg !== '') {
+        arr.push(postcss.decl({ prop: 'text-decoration-thickness', value: unitUtil(valueArg, unit.length, 'px', 1) }))
+      }
+    }
+  } else if(cls[1] === 'shadow') {
+    arr.push(postcss.decl({prop: 'text-shadow', value: 'var(--shadow-offset-x, 0px) var(--shadow-offset-y, 0px) var(--shadow-blur, 0px) var(--shadow-radius, 0px) var(--shadow-color, currentColor)'}))
   } else {
@@ -37,0 +72,0 @@ if(valueArg !== '') {

js/rules.js

@@ -32,5 +32,7 @@ const postcss = require('postcss')
   } else {
-    const newRule = postcss.rule({ selector: '.'+ref.trim().replace('.', '\\.').replace(':', '\\:') })
-    newRule.append(...reference(refs[0], refs[1] ? refs[1] : '', opts))
-    arr.push(newRule)
+    if(reference(refs[0], refs[1] ? refs[1] : '', opts).length >= 1) {
+      const newRule = postcss.rule({ selector: '.'+ref.trim().replace('.', '\\.').replace(':', '\\:') })
+      newRule.append(...reference(refs[0], refs[1] ? refs[1] : '', opts))
+      arr.push(newRule)
+    }
   }
@@ -37,0 +39,0 @@

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-development8",
-  "description": "Alga CSS is a scope-first CSS toolkit for quickly mix or compose the CSS references and share the CSS properties between components",
+  "version": "1.0.0-development9",
+  "description": "Alga CSS is a scope-first CSS toolkit for quickly mix or compose CSS references and share CSS properties between components",
   "main": "js/index.js",
@@ -6,0 +6,0 @@ "unpkg": "dist/alga-v1.min.css",

No alert changes

Improved metrics

Total package byte prevSize

85667

increased by7.5%

Number of package files

47

increased by20.51%

Lines of code

2046

increased by5.3%

No dependency changes