alga-css - npm Package Compare versions

Comparing version 1.0.0-iron-7 to 1.0.0-iron-8

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-iron-7",
+  "version": "1.0.0-iron-8",
   "description": "Alga CSS is a scope-first CSS toolkit for quickly mix or compose CSS references and share CSS properties between components",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/configs/color.js

 module.exports = {
-  primary: [13, 110, 253],
-  secondary: [108, 117, 125],
-  accent: [179, 27, 148],
-  success: [25, 135, 84],
-  info: [13, 202, 240],
-  warning: [255, 193, 7],
-  danger: [220, 53, 69],
-  black: [0, 0, 0],
-  white: [255, 255, 255],
-  blue: [11, 108, 251],
-  indigo: [102, 16, 242],
-  purple: [111, 66, 193],
-  pink: [214, 51, 132],
-  red: [218, 51, 67],
-  orange: [253, 126, 20],
-  yellow: [253, 191, 5],
-  green: [23, 133, 82],
-  teal: [32, 201, 151],
-  cyan: [11, 200, 238],
-  gray: [108, 117, 125],
+  primary: '#0d6efd',
+  secondary: '#6c757d',
+  accent: '#b31b94',
+  success: '#198754',
+  info: '#0dcaf0',
+  warning: '#ffc107',
+  danger: '#dc3545',
+  black: '#000000',
+  white: '#ffffff',
+  blue: '#0b6cfb',
+  indigo: '#6610f2',
+  purple: '#6f42c1',
+  pink: '#d63384',
+  red: '#da3343',
+  orange: '#fd7e14',
+  yellow: '#fdbf05',
+  green: '#178552',
+  teal: '#20c997',
+  cyan: '#0bc8ee',
+  gray: '#6c757d',
   transparent: 'transparent',
   current: 'currentColor'
 }

src/cores/atrules.js

 const postcss = require('postcss')
+const preset = require('../configs/preset.js')
+const color = require('../configs/color.js')
+const shorts = require('../configs/shorts.js')
 const camelDash = require('../helpers/camelDash.js')
@@ -8,9 +11,11 @@ const flatScreen = require('../helpers/flatScreen.js')
   let newObj = Object.assign({}, obj)
+  const newPreset = opts?.preset || preset
+  const newColor = opts?.color || color
   
   const refs = ref.trim().split(/-|:/).filter(i => i !== '')
   
-  if(Number(refs.length) === 3) {
-    if('preset' in opts && Object.keys(opts.preset).includes(refs[1])) {
+  if(ref.includes(':')) { //Number(refs.length) === 3
+    /*if('preset' in opts && Object.keys(opts.preset).includes(refs[1])) {
       refs[1] = opts.preset[refs[1]]
-    }
+    }*/
     
@@ -28,5 +33,35 @@ const newScreen = Object.assign({}, flatScreen(opts.screen))
       const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll('/', '\\/') })
-      const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
-      newRule.append(declVal)
+      /*const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
+      newRule.append(declVal)*/
+      if(Object.keys(newColor).includes(refs[1])) {
+        let newNum = 0
+        if(refs[3] || isNaN(refs[2]) === false) {
+          newNum = refs[3]
+        }
+        let newValue = `lighten(${refs[0]},${newNum})`
+        if(refs[2] === 'dark') {
+          newValue = `darken(${refs[0]},${newNum})`
+        }
+        const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue) })
+        newRule.append(bgDeclVal)
+        const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue) })
+        newRule.append(bdDeclVal)
+        const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+        newRule.append(fgDeclVal)
+      } else if(Object.keys(shorts).includes(refs[1])) {
+        const newShorts = shorts[refs[1]]
+        for(let newShort of newShorts) {
+          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2]) })
+          newRule.append(declVal)
+        }
+      } else {
+        // Switch from preset to real property like m to margin
+        if(Object.keys(newPreset).includes(refs[1])) {
+          refs[1] = newPreset[refs[1]]
+        }
       
+        const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
+        newRule.append(declVal)
+      }
+      
       newObj[refs[0]].append(newRule)
@@ -33,0 +68,0 @@ } else if(Object.keys(opts.prefers).includes(refs[0])) {

src/cores/reference.js

@@ -8,5 +8,5 @@ const camelDash = require('../helpers/camelDash.js')
   for(let rf of refs) {
-    const props = rf.trim().split(/-|:/).filter(i => i !== '')
+    const props = rf.trim().split('-').filter(i => i !== '')
     
-    if(Number(props.length) === 2) {
+    if(!rf.includes(':')) { // && Number(props.length) === 2
       // Switch from preset to real property like m to margin
@@ -13,0 +13,0 @@ if('preset' in opt && Object.keys(opt.preset).includes(props[0])) {

src/cores/rules.js

 const postcss = require('postcss')
+const preset = require('../configs/preset.js')
+const color = require('../configs/color.js')
+const shorts = require('../configs/shorts.js')
 const camelDash = require('../helpers/camelDash.js')
@@ -7,6 +10,8 @@ const value = require('./value.js')
   let arr = []
+  const newPreset = opts?.preset || preset
+  const newColor = opts?.color || color
   
-  const refs = ref.trim().split(/-|:/).filter(i => i !== '')
+  const refs = ref.trim().split('-').filter(i => i !== '') //.split(/-|:/).filter(i => i !== '')
   
-  if(Number(refs.length) === 3) {
+  /*if(ref.includes(':')) { //Number(refs.length) === 3
     if('preset' in opts && Object.keys(opts.preset).includes(refs[1])) {
@@ -23,12 +28,36 @@ refs[1] = opts.preset[refs[1]]
     }
-  } else if(Number(refs.length) === 2) {
-    // Switch from preset to real property like m to margin
-    if('preset' in opts && Object.keys(opts.preset).includes(refs[0])) {
-      refs[0] = opts.preset[refs[0]]
+  } else { // if(Number(refs.length) === 2)*/
+  if(!ref.includes(':')) {
+    const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)') })
+    if(Object.keys(newColor).includes(refs[0])) {
+      let newNum = 0
+      if(refs[2] || isNaN(refs[1]) === false) {
+        newNum = refs[2]
+      }
+      let newValue = `lighten(${refs[0]},${newNum})`
+      if(refs[1] === 'dark') {
+        newValue = `darken(${refs[0]},${newNum})`
+      }
+      const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue) })
+      newRule.append(bgDeclVal)
+      const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue) })
+      newRule.append(bdDeclVal)
+      const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+      newRule.append(fgDeclVal)
+    } else if(Object.keys(shorts).includes(refs[0])) {
+      const newShorts = shorts[refs[0]]
+      for(let newShort of newShorts) {
+        const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1]) })
+        newRule.append(declVal)
+      }
+    } else {
+      // Switch from preset to real property like m to margin
+      if(Object.keys(newPreset).includes(refs[0])) {
+        refs[0] = newPreset[refs[0]]
+      }
+    
+      const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1]) })
+      newRule.append(declVal)
     }
     
-    const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)') })
-    const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1]) })
-    newRule.append(declVal)
-    
     arr.push(newRule)
@@ -35,0 +64,0 @@ }

src/cores/value.js

 const camelDash = require('../helpers/camelDash.js')
+const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
 const values = require('../configs/values.js')
 const units = require('../configs/units.js')
+const color = require('../configs/color.js')
 const specialValues = ['currentColor']
@@ -9,5 +11,25 @@
   const newUnits = [...units.length, ...units.angle, ...units.time, ...units.resolution]
+  const newColor = opt?.color || color
+  
   if(Object.keys(values).includes(newValue.trim())) {
     newValue = values[newValue.trim()]
   }
+  if(Object.keys(newColor).includes(newValue)) {
+    newValue = newColor[newValue]
+  }
+  if(newValue.startsWith('lighten(') || newValue.startsWith('darken(')) {
+    const splitValues = newValue.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
+    }
+    newValue = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
+  }
   if(newValue.startsWith('calc(')) {
@@ -14,0 +36,0 @@ newValue = newValue.split('_').map(item => {

No alert changes

Improved metrics

Total package byte prevSize

103954

increased by4.05%

Number of package files

49

increased by4.26%

Lines of code

1266

increased by8.95%

No dependency changes