anubis-ui 1.0.4 → 1.0.5

package/README.md

@@ -1,7 +1,7 @@
-# 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.
 
 ## Table of Contents
 1. [Features](#features)
@@ -23,10 +23,94 @@ 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. Start adding classes to your *.vue files
+```html
+<div class="bg-primary border-neutral-low hover:shadow-low" />
+```
+<sup>any .vue file</sup>
+
+5. 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($light, $dark, $name) {
+  @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';
+
+@include defineColorLightAndDark('primary', $blue-500, $blue-400);
+@include defineColorLightAndDark('secondary', $blue-grey-500, $blue-grey-400);
+@include defineColorLightAndDark('accent', $blue-500, $blue-400);
+@include defineColorLightAndDark('neutral', $slate-500, $slate-500);
+@include defineColorLightAndDark('success', $green-500, $green-400);
+@include defineColorLightAndDark('danger', $red-500, $red-400);
+```
+<sup>src/css/_colors_.scss</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`)
@@ -104,7 +188,8 @@ Configure common style presets
 </details>
 
 
----### Selectors (`selectors.config.json`)
+---
+### Selectors (`selectors.config.json`)
 Define available states and style prefixes
 
 <details>

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "anubis-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Class-based css generator",
   "main": "index.js",
   "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.5
+ * * 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
 }