anubis-ui 1.0.4 → 1.0.6

package/README.md

@@ -1,14 +1,25 @@
-# Anubis UI
+# AnubisUI
 > powered by [__Improba__](https://improba.fr/)
 
-Anubis UI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugin that provides dynamic CSS class generation based on configuration files. It automatically generates CSS rules by scanning your Vue files and mapping utility classes to their corresponding styles.
+AnubisUI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugin that provides dynamic CSS class generation based on configuration files. It automatically generates CSS rules by scanning your Vue files and mapping utility classes to their corresponding styles.
+
+> __THIS DOESN'T WORK__ ```<div :class="`bg-primary-${props.bg || 'low'}\`" />```
+> <br />
+> Classes must be EXPLICITY written in the code to allow the extraction to work correctly, dynamic classes will not work
+> <br />
+> In the future, some config will allow to generate a bunch of specified classes even if not present in the code
+> <br />
+> Until then, you can create a decoy .vue file filled with the dynamic classes you want
+> <br />
 
 ## Table of Contents
 1. [Features](#features)
 2. [Installation](#installation)
 3. [Configuration](#configuration)
-4. [Usage](#usage)
-5. [Architecture](#architecture)
+4. [Available Utility Classes](#available-utility-classes)
+5. [Prefix/Declaration relations](#prefixdeclaration-relations)
+6. [Architecture](#architecture)
+7. [Credits](#credits)
 
 ## Features
 - 🎨 Dynamic CSS generation based on utility classes
@@ -23,10 +34,101 @@ Anubis UI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugi
 - 🔍 Smart class detection and parsing
 
 # Installation
+
+1. Add the package to your project
+<br />
 `npm install anubis-ui`
 
+2. In the config file, add the package in the plugin section
+```js
+vitePlugins: [
+  [
+    anubisUI(),
+    ...
+  ]
+]
+```
+<sup>quasar.config.js</sup>
+
+3. Still in the config file, add the generated file to the css usage
+```js
+css: [
+  'app.scss',
+  '~anubis-ui/dist/_anubis.scss'
+],
+```
+<sup>quasar.config.js</sup>
+
+4. Declare your project colors in the DOM ::root in anyway you want
+<br />
+Personnaly, i use the following method based on a mixin declaration
+
+```scss
+$background-opacity: (
+  10: 0.1,
+  20: 0.2,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  80: 0.8,
+  90: 0.9
+);
+
+@mixin setGlobalColors($name, $light, $dark) {
+  @include setRootColors($name, $light, 'body--light');
+  @include setRootColors($name, $dark, 'body--dark');
+}
+
+@mixin setRootColors ($name, $color, $theme) {
+  :root {
+    body.#{$theme} {
+      #{"--"+$name}: $color;
+
+      @if $color != transparent {
+        @each $opacity, $multiplier in $background-opacity {
+          #{"--"+$name+"-"+$opacity}: #{rgba(red($color), green($color), blue($color), $multiplier)};
+        }
+      }
+    }
+  }
+}
+```
+<sup>src/css/_mixins.scss</sup>
+
+```scss
+@import './mixins';
+
+/**...highest... */
+/**...higher... */
+/**...high... */
+@include setGlobalColors('primary', $blue-500, $blue-400);
+/**...low... */
+/**...lower... */
+/**...lowest... */
+
+@include setGlobalColors('secondary', $blue-grey-500, $blue-grey-400);
+@include setGlobalColors('accent', $blue-500, $blue-400);
+@include setGlobalColors('neutral', $slate-500, $slate-500);
+@include setGlobalColors('success', $green-500, $green-400);
+@include setGlobalColors('danger', $red-500, $red-400);
+```
+<sup>src/css/_colors_.scss</sup>
+
+
+5. Start adding classes however you want to (in *.vue files)
+```html
+<div class="bg-primary border-neutral-low hover:shadow-low" />
+```
+<sup>any .vue file</sup>
+
+6. Enjoy
+
 ## Configuration
-Anubis UI uses several configuration files located in the `src/config` directory:
+AnubisUI uses several configuration files located in the `src/config` directory:
+<br />
+Customisation from root file `anubis.config.json` will appear in future updates
 
 ---
 ### Colors (`colors.config.json`)
@@ -44,6 +146,7 @@ Define your color palette
   "warning",
   "danger"
 ]
+// no need to includes (lowest, lower, low, high, higher, highest) variants as long as the color name is present in the class
 ```
 </details>
 
@@ -104,7 +207,8 @@ Configure common style presets
 </details>
 
 
----### Selectors (`selectors.config.json`)
+---
+### Selectors (`selectors.config.json`)
 Define available states and style prefixes
 
 <details>
@@ -133,7 +237,8 @@ Define available states and style prefixes
 - `bg-{color}` - Background color
 - `text-{color}` - Text color
 - `border-{color}` - Border color
-- `shadow-{color}` - Box shadow color
+- `inner-border-{color}` - Inner border color (inset box shadow, not compatible with `shadow-`)
+- `shadow-{color}` - Box shadow color (not compatible with `inner-border-`)
 
 #### States
 - `hover:{utility}` - Apply style on hover
@@ -145,25 +250,34 @@ Define available states and style prefixes
 - `shadow-{color}-{preset}` - Box shadow spread
 - `inner-border-{color}-{preset}` - Box shadow inset width
 
+## Prefix/Declaration relations
+| prefix       | declaration                                                                 |
+|--------------|-----------------------------------------------------------------------------|
+| bg           | `background: {color} important;`                                            |
+| text         | `color: {color} important;`                                                 |
+| border       | `border-width: {variation \|\| default} !important; border-color: {color} !important; border-style: solid;` |
+| inner-border | `box-shadow: inset {variation \|\| default} {color} !important;`            |
+| shadow       | `box-shadow: {variation \|\| default} {color} !important;`                  |
+
 ## Architecture
 ### Core Components
 - **Vite Plugin**: Handles file watching and build process
 - **Class Extractor**: Scans files for utility classes
 - **Rule Generator**: Converts utility classes to CSS rules
-- **Configuration System**: Manages user preferences and presets
+- **Configuration System**: WIP - Manages user preferences and presets
 
 ### File Structure
 ```
-</details>src/
-
-├── config/ # Configuration files
-├── interfaces/ # TypeScript interfaces
-├── manual/ # Manually trigger anubis actions
-├── tools/
-│ ├── extract/ # Class extraction logic
-│ ├── mapping/ # Class to CSS rule mapping
-│ └── declaration/ # Style declaration handlers
-└── index.ts # Plugin entry point
+├── dist/ # Compiled and generated output
+├── src/
+│ ├── config/ # Configuration files
+│ ├── interfaces/ # TypeScript interfaces
+│ ├── manual/ # Manually trigger anubis actions
+│ └── tools/
+│  ├── extract/ # Class extraction logic
+│  ├── declaration/ # WIP - Style declaration handlers
+│  └── mapping/ # Class to CSS rule mapping
+└── index.js # Plugin entry point
 ```
 
 

package/package.json

@@ -1,18 +1,29 @@
 {
   "name": "anubis-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Class-based css generator",
   "main": "index.js",
+  "keywords": [
+    "anubis",
+    "anubisUI",
+    "css",
+    "scss",
+    "style",
+    "plugin",
+    "vite",
+    "quasar",
+    "vue"
+  ],
   "scripts": {
     "build": "tsc",
-    "prepare": "npm run build"
+    "preinstall": "npm run build"
   },
   "style": "dist/_anubis.scss",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HugoLMTY/anubis-ui.git"
   },
-  "author": "HugoLMTY - Improba",
+  "author": "Improba",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/HugoLMTY/anubis-ui/issues"

package/src/tools/cssFile.ts

@@ -3,7 +3,7 @@
 const fs = require('fs')
 const path = require('path')
 
-import { log } from './logger'
+import { cssHeader, log } from './logger'
 
 const distDir = path.join(__dirname, '..', '..', 'dist')
 const outputPath = path.join(distDir, '_anubis.scss')
@@ -25,7 +25,7 @@ const buildCssRuleFile = (classes: string = '') => {
   try {
     checkCssRuleFilePresence()
 
-    fs.writeFileSync(outputPath, classes)
+    fs.writeFileSync(outputPath, cssHeader + '\n' + classes)
 
     return outputPath
   } catch (err: any) {

package/src/tools/extract/classes/index.ts

@@ -1,7 +1,6 @@
 import { config } from "../../../config/config.tool"
 import { buildCssRuleFile } from "../../cssFile"
-import { log } from "../../logger"
-import { mapClassIntoRule } from "../../mapping/mapClassIntoRule"
+import { mapClassesIntoRules } from "../../mapping/mapClassIntoRule"
 import { getFiles } from "../extract.tools"
 
 // import fs from 'fs'
@@ -52,17 +51,6 @@ const extractClasses = async (filePath: string): Promise<string[]> => {
   return matches
 }
 
-const mapClassesIntoRules = (classes: string[]) => {
-  const mappedRules = classes
-    ?.map(cssClass => mapClassIntoRule(cssClass))
-    ?.filter(rule => rule)
-
-  log(`${mappedRules?.length} rules generated`)
-
-  const rules = mappedRules?.join('\n')
-  return rules
-}
-
 export {
   init
 }

package/src/tools/logger.ts

@@ -13,8 +13,15 @@ const logo = () => {
   log('---')
 }
 
+const cssHeader = `/*!
+ * * Anubis v.1.0.6
+ * * Improba
+ * * Released under the MIT License.
+ * */`
+
 export {
   logo,
+  cssHeader,
 
   log,
   logPrefix

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,4 +1,16 @@
 import { config } from "../../config/config.tool"
+import { log } from "../logger"
+
+const mapClassesIntoRules = (classes: string[]) => {
+  const mappedRules = classes
+    ?.map(cssClass => mapClassIntoRule(cssClass))
+    ?.filter(rule => rule)
+
+  log(`${mappedRules?.length} rules generated`)
+
+  const rules = mappedRules?.join('\n')
+  return rules
+}
 
 const mapClassIntoRule = (stringClass: string) => {
   const colorExists = config.colors?.some(color => stringClass.includes(color))
@@ -59,11 +71,12 @@ const getVariantInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefi
   const isOpacity = opacityDetectionRegex.test(cleanedColor)
   if (isOpacity) {
     return {
-      color: cleanedColor?.slice(0, -3),
-      variation: {
-        key: 'opacity',
-        value: cleanedColor?.slice(-2),
-      }
+      color: cleanedColor // Opacity is included in the color name, whoops on me for this one (and every other one tho)
+      // color: cleanedColor?.slice(0, -3),
+      // variation: {
+      //   key: 'opacity',
+      //   value: cleanedColor?.slice(-2),
+      // }
     }
   }
 
@@ -151,5 +164,6 @@ function mapIntoRule({ state, prefix, color, variation }: { state?: string, pref
 }
 
 export {
+  mapClassesIntoRules,
   mapClassIntoRule
 }