alga-css - npm Package Compare versions

Comparing version 1.0.0-development5 to 1.0.0-development6

js/define.js

 const postcss = require('postcss')
 const glob = require('glob')
 const fs = require('fs')
-const reference = require('./reference.js')
+const declaration = require('./declaration.js')
 
@@ -22,3 +22,3 @@ function readPath(rp, defs, opts) {
           for(let ref of refs) {
-            selectNodes.push(...reference(ref, opts))
+            selectNodes.push(...declaration(ref, opts))
           }
@@ -25,0 +25,0 @@ } else {

js/extract.js

 const postcss = require('postcss')
 const glob = require('glob')
 const fs = require('fs')
+const rules = require('./rules.js')
 
-function readPath(rp) {
+function readPath(rp, opts) {
   const regexp = /(v-bind:class|x-bind:class|:class|class)=\"([\w]+|[\s\w]+|[\s\w\-\_\.\:\d\(\)]+)\"/g
-  const content = {}
+  const content = []
   const data = fs.readFileSync(rp, 'utf8')
   const classes = [...data.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
   const uniqClasses = Array.from(new Set(classes.map(i => i.split(' ')).flat()))
-  console.log(uniqClasses)
-  /*const root = postcss.parse(data)
-  for(let node of root.nodes) {
-    if(node.name === 'provide') {
-      content[node.params.trim()] = node.nodes
-    }
-  }*/
+  for(let ref of uniqClasses) {
+    content.push(...rules(ref, opts))
+  }
   return content
 }
 
-module.exports = (paths) => {
-  let extract = {}
+module.exports = (paths, options) => {
+  let extract = []
   
@@ -27,3 +24,3 @@ if(typeof paths === 'string') {
     for(let file of files) {
-      extract = Object.assign({}, extract, readPath(file))
+      extract = extract.concat(readPath(file, options))
     }
@@ -35,3 +32,3 @@ } else if(Array.isArray(paths)) {
         for(let file of files) {
-          extract = Object.assign({}, extract, readPath(file))
+          extract = extract.concat(readPath(file, options))
         }
@@ -38,0 +35,0 @@ }

js/index.js

@@ -7,3 +7,3 @@ const define = require('./define.js')
 const color = require('./color.js')
-const reference = require('./reference.js')
+const declaration = require('./declaration.js')
 const preset = require('./preset.js')
@@ -20,9 +20,12 @@
     provide: {},
-    extract: {}
+    extract: []
   }
   
-  config.define = define(options.define, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset})
-  config.provide = provide(options.provide, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset, define: config.define})
-  config.extract = extract(options.extract)
+  const opts1 = {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}
+  config.define = define(options.define, opts1)
   
+  const opts2 = {define: config.define, ...opts1}
+  config.provide = provide(options.provide, opts2)
+  config.extract = extract(options.extract, opts2)
+  
   return {
@@ -35,3 +38,3 @@ Once (root, {Rule, Declaration, AtRule}) {
           for(let ref of refs) {
-            selectNodes.push(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+            selectNodes.push(...declaration(ref, opts1))
           }
@@ -44,3 +47,4 @@ decl.replaceWith(...selectNodes)
       
-      root.walkAtRules('template', rule => { ///^template/i
+      root.walkAtRules('area', rule => { ///^area/i
+        const areaArray = []
         const name = new Rule({ selector: '.'+rule.params.replace('.', '').trim() })
@@ -56,7 +60,19 @@ name.append(new Declaration({ prop: 'display', value: 'grid'}))
               name.append(new Declaration({ prop: 'grid-template-columns', value: node.value}))
-            } else if(node.type === 'decl' && node.prop === 'layout') {
+            } else if(node.type === 'decl' && node.prop === 'template') {
               name.append(new Declaration({ prop: 'grid-template', value: node.value}))
+            } else {
+              if(node.type === 'decl' && (node.prop !== undefined && node.prop !== null && node.prop !== '')) {
+                const areaRule = new Rule({ selector: '.'+node.prop.trim() })
+                const areaNodes = []
+                const refs = node.value.trim() ? Array.from(new Set(node.value.trim().split(/\s|\|/).filter(i => i !== ''))) : []
+                for(let ref of refs) {
+                  areaNodes.push(...declaration(ref, opts1))
+                }
+                areaRule.append(...areaNodes)
+                areaArray.push(areaRule)
+              }
             }
           }
-        rule.replaceWith(name)
+          areaArray.unshift(name)
+          rule.replaceWith(...areaArray)
         } else {
@@ -80,3 +96,3 @@ rule.remove()
               for(let ref of refs) {
-                selectNodes.push(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                selectNodes.push(...declaration(ref, opts1))
               }
@@ -103,3 +119,3 @@ } else {
                 for(let ref of refs) {
-                  setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                  setRule.append(...declaration(ref, opts1))
                 }
@@ -188,3 +204,3 @@ }
                       for(let ref of refs) {
-                        setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                        setRule.append(...declaration(ref, opts1))
                       }
@@ -209,3 +225,3 @@ }
                     for(let ref of refs) {
-                      setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                      setRule.append(...declaration(ref, opts1))
                     }
@@ -237,2 +253,6 @@ } else {
       })
+      
+      if(config.extract.length >= 1) {
+        root.append(...config.extract)
+      }
     }
@@ -239,0 +259,0 @@ }

js/provide.js

 const postcss = require('postcss')
 const glob = require('glob')
 const fs = require('fs')
-const reference = require('./reference.js')
+const declaration = require('./declaration.js')
 
@@ -43,3 +43,3 @@ function readPath(rp, opts) {
                       for(let ref of refs) {
-                        setRule.append(...reference(ref, {screen: config.screen, prefers: config.prefers, color: config.color, preset: config.preset}))
+                        setRule.append(...declaration(ref, opts))
                       }
@@ -66,3 +66,3 @@ }
                   for(let ref of refs) {
-                    setRule.append(...reference(ref, {screen: opts.screen, prefers: opts.prefers, color: opts.color, preset: opts.preset}))
+                    setRule.append(...declaration(ref, opts))
                   }
@@ -75,3 +75,3 @@ } else if(nd.type === 'decl' && nd.prop === 'screen') {
                     for(let ref of refs) {
-                      setNewRule.append(...reference(ref, {screen: opts.screen, prefers: opts.prefers, color: opts.color, preset: opts.preset}))
+                      setNewRule.append(...declaration(ref, opts))
                     }
@@ -86,3 +86,3 @@ setAtRule.append(setNewRule)
                   for(let ref of refs) {
-                    setNewRule.append(...reference(ref, {screen: opts.screen, prefers: opts.prefers, color: opts.color, preset: opts.preset}))
+                    setNewRule.append(...declaration(ref, opts))
                   }
@@ -89,0 +89,0 @@ setAtRule.append(setNewRule)

js/reference.js

@@ -12,2 +12,3 @@ const postcss = require('postcss')
 const flex = require('./props/flex.js')
+const txt = require('./refs/txt.js')
 const colorUtil = require('./utils/color-util.js')
@@ -23,3 +24,3 @@ const unitUtil = require('./utils/unit-util.js')
 
-function reference(nameArg, valueArg, opts) {
+module.exports = (nameArg, valueArg, opts) => {
   const arr = []
@@ -327,3 +328,4 @@ const state = {
   } else if(cls[0] === 'txt') {
-    if(Object.keys(styling.txt.position.val).includes(cls[1])) {
+    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') {
@@ -350,3 +352,3 @@ arr.push(postcss.decl({prop: styling.txt.position.key, value: styling.txt.position.val[cls[1]]}))
       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') {
@@ -377,24 +379,1 @@ if(Object.keys(styling.bg.attrs).includes(cls[1])) {
 }
-
-module.exports = (ref, opts) => {
-  let arr = []
-  const obj = {}
-  
-  const refs = ref.trim().split(/\.|-|_|\:/).filter(i => i !== '')
-  
-  if(Object.keys(opts.preset).includes(refs[0])) {
-    refs[0] = opts.preset[param]
-  }
-  
-  if(Object.keys(opts.screen).includes(refs[0])) {
-    obj['screen'] = postcss.AtRule({ name: 'media', params: '(min-width: ${opts.screen[refs[0]]})' })
-  } else if(refs[0] === 'dark' || refs[0] === 'light' || refs[0] === 'reduce') {
-    obj['screen'] = postcss.AtRule({ name: 'media', params: opts.prefers[refs[0]] })
-  } else if(refs[0] === 'print' || refs[0] === 'screen') {
-    obj['screen'] = postcss.AtRule({ name: 'media', params: refs[0] })
-  } else {
-    arr = arr.concat(reference(refs[0], refs[1] ? refs[1] : '', opts))
-  }
-  
-  return arr
-}

package.json

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

README.md

@@ -15,5 +15,5 @@ <p align="center">
 # Alga CSS
-Alga CSS is a scope-first CSS toolkit for quickly compose or share any design between components
+Alga CSS is a scope-first CSS toolkit for quickly mix or compose the CSS references and share the CSS properties between components
 
-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)
+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`.
 
@@ -26,4 +26,29 @@ All the main features:
 5. Custom CSS utility/helper (preset, define, color, screen, etc.)
-6. Extract classes from HTML (Petite-Vue, Alpine.js) and Vue or (in the future will support Svelte, Astro, and JSX as well)
+6. Extract classes from HTML (Petite-Vue, Alpine.js) and Vue or (in the future it will support Svelte, Astro, and JSX as well)
 
+## Installation and Setup
+Alga CSS built on top of PostCSS, so before installing Alga CSS, you need to have PostCSS first and after that you can use NPM or Yarn to install this Alga CSS.
+
+```bash
+npm install alga-css@next
+
+#or
+
+yarn add alga-css@next
+```
+
+If you use tool that support PostCSS out of the box like Vite for instance, you just need to create a new config file which is `postcss.config.js` and add the code below to that file.
+
+```js
+const algacss = require('alga-css')
+
+module.exports = {
+  plugins: [
+    algacss({
+      extract: ['./src/**/*.vue', './src/**/*.html']
+    })
+  ]
+}
+```
+
 ## Class Name Structure
@@ -34,3 +59,3 @@ Alga CSS allow you to use whatever special character you wish (use either `-`, `.`, `:` or `_`) as divider or separator of class names or references.
 /* highly recommended */
-<span class="md.mgTop-5 bgPrimary-725 txtColor-hex(333)"></span>
+<span class="md.mgTop-5 bgPrimary-725 txtColor.hex(333)"></span>
 
@@ -54,3 +79,3 @@ .className {
 ## Mixin and Composing CSS Component
-For composing CSS utility, we provide a custom property which is `ref`.
+to compose the CSS reference, we provide a custom property which is `ref` to apply css property to our class.
 
@@ -70,3 +95,3 @@ ```css
 
-For mixing CSS properties, we provide `props` custom property.
+to mix the CSS properties, we provide `props` custom property, this only allow to get CSS properties from `@set` custom atRule.
 
@@ -83,3 +108,3 @@ ```css
 
-For getting CSS custom class, you can use `@get` custom rule and `emit` custom property if you want to inject CSS utility to it.
+to get the CSS custom class (`@get`), you can use `@get` custom rule and `emit` custom property if you want to inject CSS reference to it.
 
@@ -104,2 +129,57 @@ ```css
 ## Fragmenting CSS Component
+Alga CSS also provide a custom atRule for just solving that problem, to create a CSS component, you can use `@provide` and if you want to insert that component to your actual CSS file or scope CSS (like using Vue SFC `<style scoped>`).
 
+```css
+/* Create a component */
+@provide componentName {
+  
+  @get className;
+  
+  .otherClassName {
+    ref: flexBetween;
+  }
+  
+  @slot slotName;
+}
+
+/* Insert the component */
+@inject componentName;
+
+/* In the future */
+@inject componentName {
+  slot: className otherClassName;
+  slotName: anotherClassName;
+}
+```
+
+## Area or Layout Component
+You might want to create a complex layout that based on `grid-template` using Alga CSS, like for instance, creating page layout with multiple sections, you can do that by just using our custom atRule `@area`.
+
+```css
+/* Input: */
+@area layoutName {
+  areas: "a b c" "a b c" "a b c";
+  x: auto 1fr auto;
+  y: auto 1fr auto;
+  layoutSectionA: areaA;
+  layoutSectionB: areaB;
+  layoutSectionC: areaC;
+}
+
+/* Output: */
+.layoutName {
+  display: grid;
+  grid-template-areas: "a b c" "a b c" "a b c";
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+}
+.layoutSectionA {
+  grid-area: a;
+}
+.layoutSectionB {
+  grid-area: b;
+}
+.layoutSectionC {
+  grid-area: c;
+}
+```

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

Total package byte prevSize

79691

increased by9.36%

Number of package files

39

increased by18.18%

Lines of code

1943

increased by9.46%

Number of lines in readme file

179

increased by80.81%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes