alga-css - npm Package Compare versions

Comparing version 1.0.0-alpha1 to 1.0.0-beta-4

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-alpha1",
-  "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",
-  "unpkg": "dist/alga-v1.min.css",
+  "version": "1.0.0-beta-4",
+  "description": "Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties",
+  "main": "./src/index.js",
+  "bin": "./bin/algac",
   "scripts": {
-    "build": "gulp",
     "test": "jest",
@@ -13,9 +12,9 @@ "lint": "eslint js"
   "files": [
-    "js",
-    "css/defines",
-    "css/provides"
+    "bin",
+    "src",
+    "alga"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tedirghazali/alga-css.git"
+    "url": "git+https://github.com/algacss/algacss.git"
   },
@@ -32,13 +31,15 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/tedirghazali/alga-css/issues"
+    "url": "https://github.com/algacss/algacss/issues"
   },
-  "homepage": "https://github.com/tedirghazali/alga-css#readme",
+  "homepage": "https://github.com/algacss/algacss#readme",
   "devDependencies": {
-    "eslint": "^7.30.0",
-    "jest": "^27.0.6",
-    "postcss": "^8.1.7"
+    "eslint": "^8.7.0",
+    "jest": "^27.4.7",
+    "postcss": "^8.4.14"
   },
   "dependencies": {
-    "glob": "^7.1.7"
+    "chokidar": "^3.5.3",
+    "glob": "^7.2.0",
+    "minimist": "^1.2.6"
   }
 }

README.md

 <p align="center">
-  <a href="https://algacss.gitlab.io/docs/" target="_blank" rel="noopener noreferrer">
+  <a href="https://algacss.tedir.dev" target="_blank" rel="noopener noreferrer">
     <img width="180" src="alga-css-logo.png" alt="Alga CSS logo">
@@ -15,13 +15,13 @@ </a>
 # Alga CSS
-Alga CSS is a scope-first CSS toolkit for quickly mix or compose the CSS references and share the CSS properties between components
+Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties, visit [https://algacss.com](https://algacss.com 'Alga CSS').
 
-What I mean by scope-first is, this Alga CSS is specially made for frameworks or libraries that support scoped-css like `Vue`, `Svelte` or `Astro`. Also, my goal in building this is to support all the UI libraries that I have now like `vidie` or `sastra`.
+Older version only work on Unix/Linux based operating system, if you're using Windows, that mean you need to use the newest version otherwise the default directives won't work (I mean all the CSS components from alga directory not being read), this is because of bug that I have fixed now.
 
+The documentation is still in development stage, so we expected it will finish around 2024. Because of that, if you use this Alga CSS, please check the examples folder, I put all the HTML/UI testing files in that folder and test folder as well.
+
 All the main features:
 1. Created for scoped CSS
 2. As a PostCSS plugin
-3. Composing or mixing CSS components
-4. Provide/inject a large CSS component
-5. Custom CSS utility/helper (preset, define, color, screen, etc.)
-6. Extract classes from HTML (Petite-Vue, Alpine.js), Vue, Svelte, and Astro
+3. Can be store as a CSS component
+4. Extract classes from any major JS Frameworks
 
@@ -32,10 +32,10 @@ ## Installation and Setup
 ```sh
-npm install alga-css@next
+npm install alga-css --save-dev
 
 #or
 
-yarn add alga-css@next
+yarn add alga-css
 ```
 
-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.
+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.cjs` and add the code below to that file.
 
@@ -48,3 +48,7 @@ ```js
     algacss({
-      extract: ['./src/**/*.vue', './src/**/*.svelte', './src/**/*.html']
+      extract: [
+        './src/**/*.html', 
+        './src/**/*.{otherFormat}'
+      ],
+      src: './src/styles/*.alga'
     })
@@ -56,127 +60,82 @@ ]
 ## 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.
+Alga CSS uses special character `-` to gab classes from HTML elements or Vue components, and it uses `:` for breakpoints and states and also `_` as a divider or separator of css values.
 
 ```css
 /* highly recommended */
-<span class="md.mgTop-5 bgPrimary-725 txtColor.hex(333)"></span>
+<span class="marginTop-0.75rem padding-10px md:marginTop-5pct color-rgb(205,45,67) backgroundColor-hexfff"></span>
 
 .className {
-  ref: md.mgTop-5;
-  ref: txtColor.rgb(205,45,67);
+  ref: marginTop-0.75rem padding-10px color-rgb(205,45,67) backgroundColor-hexfff;
+  screen-md: marginTop-5pct;
 }
 
+/* class structure: property (camelCase for prop name and prop value separated by - or dash) */
+justifyContent-spaceBetween
 
-/* alternative */
-md.pdTop.2
+/* class structure: unit size (pct is unit size in percent) */
+width-100pct
+height-250px
+padding-1.75rem
 
-md-pdBottom-4
+/* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
+ss:paddingLeft-3px
 
-md:pdLeft:3
+/* class structure: mode */
+dark:backgroundColor-hex242424
+light:backgroundColor-hexf2f2f2
 
-md_pdRight_7
-```
+/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
+toDark:backgroundColor-hex242424
 
-## Mixin and Composing CSS Component
-to compose the CSS reference, we provide a custom property which is `ref` to apply css property to our class.
+/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
+toLight:backgroundColor-hexf2f2f2
 
-```css
-.className {
-  ref: flex justifyCenter flex-20 bgPrimary-3;
-}
+mode:backgroundColor-hexfff /* for [data-mode=dark] .backgroundColor-hexfff {} */
 
-.otherClassName {
-  ref: flex;
-  ref: justifyCenter;
-  ref: flex-20;
-  ref: bgPrimary-3;
-}
+/* class structure: state */
+hover:backgroundColor-hex2f2f2f
+facus:paddingLeft-3px
 ```
 
-to mix the CSS properties, we provide `props` custom property, this only allow to get CSS properties from `@set` custom atRule.
+## CSS Component
+We provide alga format `.alga` for creating CSS component.
 
 ```css
-@set className {
-  ref: flex justifyCenter flex-20 bgPrimary-3;
+/* navBar.alga */
+@define refs {
+  name: navBar;
 }
 
-.otherClassName {
-  props: className;
+@define props {
+  size: 0.75rem;
 }
-```
 
-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.
-
-```css
-@get className;
-
-/* or */
-
-@get className {
-  emit: txtBold-5 bdSolid-5;
+@alga {refs.name} {
+  .{refs.name} {
+    ref: position-relative zIndex-3;
+    ref-paddingTop: {props.size};
+    ref-paddingBottom: {props.size};
+  }
 }
 
-/* or */
-
-@get className {
-  emit: txtBold-5;
-  emit: bdSolid-5;
+/* navBar.vue <style scoped> */
+@use navBar {
+  size: 20px;
 }
 ```
 
-## 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>`).
+## Mixin and Composing CSS Component
+to compose the CSS component.
 
 ```css
-/* Create a component */
-@provide componentName {
-  
-  @get className;
-  
-  .otherClassName {
-    ref: flexBetween;
-  }
-  
-  @slot slotName;
-}
+/* layout.alga */
 
-/* Insert the component */
-@inject componentName;
+@import 'navBar.alga'
 
-/* In the future */
-@inject componentName {
-  slot: className otherClassName;
-  slotName: anotherClassName;
+@alga layout {
+  use: navBar;
 }
+
+@use layout;
 ```
 
-## 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;
-}
-```

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

Total package byte prevSize

244619

increased by176.38%

Number of package files

64

increased by33.33%

Lines of code

3319

increased by56.78%

Worsened metrics

Dependency count

3

increased by200%

Number of lines in readme file

138

decreased by-22.91%

Number of low supply chain risk alerts

5

increased by66.67%

Dependency changes

• + Addedchokidar@^3.5.3

• + Addedminimist@^1.2.6

• + Addedanymatch@3.1.3(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedglob-parent@5.1.2(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedreaddirp@3.6.0(transitive)

• + Addedto-regex-range@5.0.1(transitive)

• Updatedglob@^7.2.0