alga-css - npm Package Compare versions

Comparing version 1.0.0-gold-5 to 1.0.0-gold-6

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-gold-5",
+  "version": "1.0.0-gold-6",
   "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/cores/atrules.js

@@ -11,3 +11,3 @@ const postcss = require('postcss')
 
-module.exports = (obj, ref, opts) => {
+module.exports = (obj, ref, source, opts) => {
   let newObj = Object.assign({}, obj)
@@ -32,9 +32,9 @@ const newPreset = opts?.preset || preset
             if(newScreen[refs[0]].minmax === 'max') {
-              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})` })
+              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})` })
+              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(')', '\\)')+''+opts.state[refs[1]].state })
+          const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')+''+opts.state[refs[1]].state, source: source })
           //const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
@@ -51,7 +51,7 @@ //newRule.append(declVal)
             }
-            const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important' })
+            const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
             newRule.append(bgDeclVal)
-            const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important' })
+            const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
             newRule.append(bdDeclVal)
-            const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+            const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff', source: source })
             newRule.append(fgDeclVal)
@@ -65,3 +65,3 @@ } else if(Object.keys(shorts).includes(refs[2])) {
               }
-              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], refOpt) + ' !important' })
+              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], refOpt) + ' !important', source: source })
               newRule.append(declVal)
@@ -80,3 +80,3 @@ }
             
-            const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], refOpt) + ' !important' })
+            const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], refOpt) + ' !important', source: source })
             newRule.append(declVal)
@@ -91,9 +91,9 @@ }
             if(newScreen[refs[0]].minmax === 'max') {
-              newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})` })
+              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})` })
+              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(')', '\\)') })
+          const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
           /*const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
@@ -110,7 +110,7 @@ newRule.append(declVal)*/
             }
-            const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important' })
+            const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
             newRule.append(bgDeclVal)
-            const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important' })
+            const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
             newRule.append(bdDeclVal)
-            const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+            const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff', source: source })
             newRule.append(fgDeclVal)
@@ -124,3 +124,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
               }
-              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important' })
+              const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
               newRule.append(declVal)
@@ -139,3 +139,3 @@ }
             
-            const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important' })
+            const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
             newRule.append(declVal)
@@ -150,8 +150,8 @@ }
         if(!newObj[refs[0]]) {
-          newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(${opts.prefers[refs[0]].media}: ${opts.prefers[refs[0]].prefers})` })
+          newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(${opts.prefers[refs[0]].media}: ${opts.prefers[refs[0]].prefers})`, source: source })
         }
         
-        let newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)') })
+        let newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
         if(opts.prefers[refs[0]]?.selector) {
-          newRule = postcss.rule({ selector: opts.prefers[refs[0]].selector+' .'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)') })
+          newRule = postcss.rule({ selector: opts.prefers[refs[0]].selector+' .'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
         }
@@ -169,7 +169,7 @@ //const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], opts) })
           }
-          const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important' })
+          const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
           newRule.append(bgDeclVal)
-          const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important' })
+          const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
           newRule.append(bdDeclVal)
-          const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+          const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff', source: source })
           newRule.append(fgDeclVal)
@@ -183,3 +183,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
             }
-            const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important' })
+            const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
             newRule.append(declVal)
@@ -198,3 +198,3 @@ }
           
-          const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important' })
+          const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
           newRule.append(declVal)
@@ -201,0 +201,0 @@ }

src/cores/extraction.js

@@ -33,3 +33,3 @@ const glob = require('glob')
 
-module.exports = (paths, options) => {
+module.exports = (paths, source, options) => {
   let extract = []
@@ -57,4 +57,4 @@
     if(!options.extract.raws.includes(ref)) {
-      newExtract.push(...rules(ref, options))
-      newStateExtract = Object.assign({}, atrules(newStateExtract, ref, options))
+      newExtract.push(...rules(ref, source, options))
+      newStateExtract = Object.assign({}, atrules(newStateExtract, ref, source, options))
     }
@@ -61,0 +61,0 @@ }

src/cores/rules.js

@@ -10,3 +10,3 @@ const postcss = require('postcss')
 
-module.exports = (ref, opts) => {
+module.exports = (ref, source, opts) => {
   let arr = []
@@ -25,3 +25,3 @@ const newPreset = opts?.preset || preset
     if(Object.keys(newState).includes(refs[0])) {
-      const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')+''+opts.state[refs[0]].state })
+      const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)')+''+opts.state[refs[0]].state, source: source })
       //const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
@@ -38,7 +38,7 @@ //newRule.append(declVal)
         }
-        const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important' })
+        const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
         newRule.append(bgDeclVal)
-        const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important' })
+        const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
         newRule.append(bdDeclVal)
-        const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+        const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff', source: source })
         newRule.append(fgDeclVal)
@@ -52,3 +52,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
           }
-          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important' })
+          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
           newRule.append(declVal)
@@ -67,3 +67,3 @@ }
         
-        const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important' })
+        const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
         newRule.append(declVal)
@@ -76,3 +76,3 @@ }
     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(')', '\\)') })
+      const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\\(').replaceAll(')', '\\)'), source: source })
       if(Object.keys(newColor).includes(refs[0])) {
@@ -87,7 +87,7 @@ let newNum = 0
         }
-        const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important' })
+        const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
         newRule.append(bgDeclVal)
-        const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important' })
+        const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
         newRule.append(bdDeclVal)
-        const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' })
+        const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff', source: source })
         newRule.append(fgDeclVal)
@@ -101,3 +101,3 @@ } else if(Object.keys(shorts).includes(refs[0])) {
           }
-          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], refOpt) + ' !important' })
+          const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], refOpt) + ' !important', source: source })
           newRule.append(declVal)
@@ -116,3 +116,3 @@ }
         
-        const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], refOpt) + ' !important' })
+        const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], refOpt) + ' !important', source: source })
         newRule.append(declVal)
@@ -119,0 +119,0 @@ }

src/index.js

@@ -23,3 +23,4 @@ const chokidar = require('chokidar');
     components: {},
-    extract: {raws: [], rules: []}
+    extract: {raws: [], rules: []},
+    root: {}
   }
@@ -29,5 +30,2 @@
   config.components = component(options?.src, opts)
-  /*if(options?.initialExtraction) {
-    config.extract = extraction(options?.extract, {...opts, extract: config.extract})
-  }*/
   
@@ -40,3 +38,3 @@ const watcher = chokidar.watch(options?.extract, {
   watcher.on('change', path => {
-    config.extract = extraction(path, {...opts, extract: config.extract})
+    console.log(path)
   });
@@ -71,4 +69,6 @@
         }
-        if(name === 'helpers') {
-          config.extract = extraction(options?.extract, {...opts, extract: config.extract})
+        if(name === 'helpers' || param === 'helpers') {
+          config.root = root
+          //console.log(root.source)
+          config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})
           
@@ -78,4 +78,4 @@ if(config.extract.rules.length >= 1) {
           }
-        }
-        if(config.components[name]) {
+          rule.remove()
+        } else if(config.components[name]) {
           let newNodes = []
@@ -110,6 +110,2 @@ if(rule?.nodes) {
       
-      if(config.extract.rules.length >= 1) {
-        root.append(...config.extract.rules)
-      }
-      
       let newPackNodes = []
@@ -116,0 +112,0 @@ const filterPackNodes = []

No alert changes

Improved metrics

Total package byte prevSize

128266

increased by0.37%

Worsened metrics

Lines of code

1653

decreased by-0.18%

No dependency changes