anubis-ui 1.0.14 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Improba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -20,6 +20,7 @@ AnubisUI (Autonomous Nominative Utility Based Intuitive Styler) is a Vite plugin
 5. [Prefix/Declaration relations](#prefixdeclaration-relations)
 6. [Architecture](#architecture)
 7. [Credits](#credits)
+8. [Licence](#licence)
 
 ## Features
 - 🎨 Dynamic CSS generation based on utility classes
@@ -128,7 +129,55 @@ $background-opacity: (
 ## Configuration
 AnubisUI uses several configuration files located in the `src/config` directory:
 <br />
-Customisation from root file `anubis.config.json` will appear in future updates
+To override default configuration, add a `anubis.config.json` in project root folder.
+>Overriding completly replaces default configuration. You need to copy/paste it and add yours if you want to keep the default too.
+<br />
+
+For every config you want to change, add the corresponding section in your config file:
+
+```js
+{
+  // files.config.json
+  "files": {
+    "targets": ["/.vue"],
+    "ignore": []
+  },
+
+  // colors.config.json
+  "colors": ["primary", "secondary"],
+
+  // states.config.json
+  "states": ["hover"],
+
+  // qol.config.json
+  "qol": [
+    {
+      "prefix": "bg",
+      "declaration": "background: ${color}"
+    }
+  ],
+
+  // presets.config.json
+  "presets": [
+    {
+      "prefix": "border",
+      "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+      "variations": {
+        "default": "4px",
+        "thin": "2px"
+      }
+    }
+  ]
+}
+```
+<sup>anubis.config.json (example)</sup>
+
+Only the sections you want to override need to be included - other sections will use default values. Not every
+> Presets is still unstable, use at your own risks
+<br />
+You __MUST__ use the exact same [presets](#presets-presetsconfigjson) names syntax to keep it working, but variations key/values can change.
+<br />
+Copy-paste is recommanded
 
 ---
 ### Colors (`colors.config.json`)
@@ -146,7 +195,6 @@ 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>
 
@@ -168,69 +216,131 @@ Specify which files to scan for classes
 ---
 ### Presets (`presets.config.json`)
 Configure common style presets
+> If overrided in config, default key/value are __REQUIRED__
+
 <details>
 <summary>Default config</summary>
 
 ```json
-{
-  "border": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-  ],
-
-  "innerBorder": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-  ],
-
-  "shadow": [
-    { "default": "0px 0px 7px 1px" },
-    { "densest": "0px 0px 3px 1px" },
-    { "denser": "0px 0px 5px 1px" },
-    { "dense": "0px 0px 5px 1px" },
-    { "wide": "0px 0px 10px 1px" },
-    { "wider": "0px 0px 15px 1px" },
-    { "widest": "0px 0px 20px 1px" }
-  ]
-}
+[
+  {
+    "prefix": "bg",
+    "declaration": "background: ${color}"
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "inner-border",
+    "declaration": "box-shadow: inset 0px 0px 0px ${value} ${color}",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "shadow",
+    "declaration": "box-shadow: ${value} ${color}",
+    "variations": {
+      "default": "0px 0px 7px 1px",
+      "densest": "0px 0px 3px 1px",
+      "denser": "0px 0px 5px 1px",
+      "dense": "0px 0px 5px 1px",
+      "wide": "0px 0px 10px 1px",
+      "wider": "0px 0px 15px 1px",
+      "widest": "0px 0px 20px 1px"
+    }
+  }
+]
 ```
 </details>
 
-
 ---
-### Selectors (`selectors.config.json`)
-Define available states and style prefixes
-
+### Quality of Life (`qol.config.json`)
+Define simple style rules that can have variations but don't require color values. These are CSS declarations that work independently.
 <details>
 <summary>Default config</summary>
 
 ```json
-{
-  "states": [
-      "hover",
-      "not-hover"
-  ],
-  "prefixes": [
-      "bg",
-      "text",
-      "border",
-      "inner-border",
-      "shadow"
-  ]
-}
+[
+  {
+    "prefix": "smooth",
+    "standalone": true,
+    "declaration": "transition-duration: ${value}",
+    "variations": {
+      "default": "0.1s",
+      "slowest": "0.5s",
+      "slower": "0.3s",
+      "slow": "0.2s",
+      "quick": "0.07s",
+      "quicker": "0.05s",
+      "quickest": "0.03s"
+    }
+  },
+  {
+    "prefix": "rounded",
+    "standalone": true,
+    "declaration": "border-radius: ${value}",
+    "variations": {
+      "default": "8px",
+      "square": "0px",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16px",
+      "very": "9999px",
+      "full": "50%",
+      "half": "100%"
+    }
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-style: ${value}",
+    "variations": {
+      "solid": "solid",
+      "dashed": "dashed",
+      "dotted": "dotted"
+    }
+  }
+]
 ```
 </details>
 
+QoL rules can have:
+1. A prefix
+2. A declaration that uses ${value} for variations
+3. Optional variations with default values
+4. Optional `standalone` flag to allow usage without variations
+
+The `standalone` flag allows a QoL rule to be used without any variation. When set to `true`, the rule can be used:
+- With a variation: `rounded-lg`, `smooth-slow`
+- Without a variation: `rounded`, `smooth` (will use the default value)
+
+When `standalone` is `false` or not specified, the rule must always include a variation (e.g., `border-dashed`).
+
+Example usage:
+```html
+<div class="rounded-lg smooth-slow border-dashed" />
+<div class="rounded smooth" /> <!-- Works because these are standalone -->
+```
 
 ## Available Utility Classes
 #### Colors
@@ -240,31 +350,31 @@ Define available states and style prefixes
 - `inner-border-{color}` - Inner border color (inset box shadow, not compatible with `shadow-`)
 - `shadow-{color}` - Box shadow color (not compatible with `inner-border-`)
 
+#### Presets variations
+- `bg-{color}-{(10-90)}` - Background opacity
+- `border-{color}-{presetKey}` - Border width
+- `shadow-{color}-{presetKey}` - Box shadow spread
+- `inner-border-{color}-{presetKey}` - Box shadow inset width
+
 #### States
 - `hover:{utility}` - Apply style on hover
 - `not-hover:{utility}` - Apply style when not hovering
 
-#### Presets
-- `bg-{color}-{(10-90)}` - Background opacity
-- `border-{color}-{preset}` - Border width
-- `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;`                  |
+| border       | `border-width: {presetValue \|\| default} !important; border-color: {color} !important; border-style: solid;` |
+| inner-border | `box-shadow: inset {presetValue \|\| default} {color} !important;`            |
+| shadow       | `box-shadow: {presetValue \|\| 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**: WIP - Manages user preferences and presets
+- **Configuration System**: Manages user preferences and presets
 
 ### File Structure
 ```
@@ -272,11 +382,10 @@ Define available states and style prefixes
 ├── 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
+│   ├── extraction/ # Class extraction logic
+│   ├── fileStuff/ # File handling utilities
+│   └── mapping/ # Class to CSS rule mapping
 └── index.js # Plugin entry point
 ```
 
@@ -285,4 +394,8 @@ Define available states and style prefixes
 
 This project was made possible thanks to the support and resources provided by [__Improba__](https://improba.fr/).
 <br />
-Their trust and commitment played a key role in bringing this idea to life, and i'm grateful for their involvement in making it happen.
+Their trust and commitment played a key role in bringing this idea to life, and i'm grateful for their involvement in making it happen.
+
+## Licence
+
+This project is licensed under the [MIT License](./LICENSE).

package/index.js

@@ -1,13 +1,15 @@
 "use strict";
 
 const { init: initConfig } = require('./dist/config/config.tool');
-const { log, logPrefix } = require('./dist/tools/logger');
-const { init: initClassExtraction } = require('./dist/tools/extract/classes');
+const { log, logPrefix, logo } = require('./dist/tools/logger');
+const { init: initClassExtraction } = require('./dist/tools/extraction/extractClasses');
 
 /** List every imported colors across the projet */
 const colors = [];
 
 const init = async () => {
+  logo();
+
   console.time(`${logPrefix} Config initialized in`);
   initConfig();
   console.timeEnd(`${logPrefix} Config initialized in`);
@@ -19,19 +21,29 @@ const init = async () => {
   log('---');
 };
 
+const refresh = async (file) => {
+  // console.log({ file });
+
+  // _ Prevent self change loop
+  // todo - add targets / ignore detection
+  if (file.endsWith('_anubis.scss')) { return }
+  if (file.endsWith('anubis.config.json')) {
+    log('Config file changed, restarting...')
+    init();
+    return
+  }
+
+  console.time(`${logPrefix} Refreshed in`);
+  await initClassExtraction();
+  console.timeEnd(`${logPrefix} Refreshed in`);
+}
+
 function AnubisUI() {
   return {
     name: 'anubis-ui',
     configureServer(server) {
       server.watcher.on('change', async (file) => {
-        console.log({ file });
-
-        // _ Prevent self change loop
-        if (file.endsWith('_anubis.scss')) { return }
-
-        console.time(`${logPrefix} Refreshed in`);
-        await initClassExtraction();
-        console.timeEnd(`${logPrefix} Refreshed in`);
+        await refresh(file)
       });
     },
     async buildStart() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anubis-ui",
-  "version": "1.0.14",
+  "version": "1.2.0",
   "description": "Class-based css generator",
   "main": "index.js",
   "keywords": [
@@ -15,6 +15,7 @@
     "vue"
   ],
   "scripts": {
+    "dev": "npm run preinstall; node src/manual/build.js",
     "build": "tsc",
     "preinstall": "npm run build"
   },
@@ -24,7 +25,7 @@
     "url": "git+https://github.com/HugoLMTY/anubis-ui.git"
   },
   "author": "Improba",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/HugoLMTY/anubis-ui/issues"
   },

package/src/config/config.tool.ts

@@ -1,62 +1,66 @@
-// import fs from 'fs'
-// import path from 'path'
+import { IEnvConfig } from "../interfaces/config.interface";
+import { readUserConfigFile, userConfig } from "../tools/fileStuff/configFile"
+import { log } from "../tools/logger"
+
 const fs = require('fs')
 const path = require('path')
 
-import { log } from '../tools/logger'
-
-interface IPreset {
-  [key: string]: string
-}
-interface IEnvConfig {
-  files: {
-    targets: string|string[],
-    ignore: string[]
-  },
-  colors: string[],
-  selectors: {
-    states: string[],
-    prefixes: string[]
-  },
-  presets: {
-    'border': IPreset[],
-    'inner-border': IPreset[],
-    'shadow': IPreset[],
-  },
-  [key: string]: any
-}
-
-const configFolder = path.join(__dirname, '..', '..', 'src', 'config');
-const configFiles = [
+const anubisConfigFolder = path.join(__dirname, '..', '..', 'src', 'config');
+const anubisConfigFiles = [
+  'qol',
   'files',
   'colors',
+  'states',
   'presets',
-  'selectors'
 ]
 
 const config = {
+  qol: [],
+  presets: [],
+
   files: { targets: [], ignore: [] },
   colors: [],
-  selectors: { states: [], prefixes: [] },
-  presets: {
-    border: [],
-    "inner-border": [],
-    shadow: [],
-  },
+  states: [],
 } as IEnvConfig
 
 const init = () => {
-  for (const file of configFiles) {
-    const filePath = path.join(configFolder, `${file}.config.json`)
+  readUserConfigFile()
+
+  checkUserConfig()
+
+  for (const file of anubisConfigFiles) {
+    let configToUse = null
 
-    const configContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
+    if (userConfig && userConfig[file]) {
+      log(`${file} config found, overriding default.`)
+      configToUse = userConfig[file]
+    } else {
+      const filePath = path.join(anubisConfigFolder, `${file}.config.json`)
+      const configContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
 
-    config[file as keyof typeof config] = JSON.parse(configContent)
+      configToUse = JSON.parse(configContent)
+    }
+
+    config[file as keyof typeof config] = configToUse
   }
 
   return config
 }
 
+const checkUserConfig = () => {
+
+  // todo - also check values
+  const userConfigKeys = Object.keys(userConfig)
+
+  const unknownKeys = userConfigKeys?.filter(key => !anubisConfigFiles.includes(key))
+  if (!unknownKeys?.length) { return }
+
+  log(`${unknownKeys?.length} unknown config keys found in user config file`)
+  for (const key of unknownKeys) {
+    log(`- ${key}`)
+  }
+}
+
 export {
   init,
   config

package/src/config/presets.config.json

@@ -1,33 +1,47 @@
-{
-  "border": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-    { "node": "0.2rem" }
-  ],
-
-  "innerBorder": [
-    { "default": "4px" },
-    { "thinest": "1px" },
-    { "thiner": "2px" },
-    { "thin": "3px" },
-    { "thick": "6px" },
-    { "thicker": "8px" },
-    { "thickest": "10px" },
-    { "node": "0.2rem" }
-  ],
-
-  "shadow": [
-    { "default": "0px 0px 7px 1px" },
-    { "densest": "0px 0px 3px 1px" },
-    { "denser": "0px 0px 5px 1px" },
-    { "dense": "0px 0px 5px 1px" },
-    { "wide": "0px 0px 10px 1px" },
-    { "wider": "0px 0px 15px 1px" },
-    { "widest": "0px 0px 20px 1px" }
-  ]
-}
+[
+  {
+    "prefix": "bg",
+    "declaration": "background: ${color}"
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
+    "variations": {
+      "default": "4px",
+      "thinest": "1px",
+      "thiner": "2px",
+      "thin": "3px",
+      "thick": "6px",
+      "thicker": "8px",
+      "thickest": "10px",
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "inner-border",
+    "declaration": "box-shadow: inset 0px 0px 0px ${value} ${color}",
+    "variations": {
+      "default": "4px" ,
+      "thinest": "1px" ,
+      "thiner": "2px" ,
+      "thin": "3px" ,
+      "thick": "6px" ,
+      "thicker": "8px" ,
+      "thickest": "10px" ,
+      "node": "0.2rem"
+    }
+  },
+  {
+    "prefix": "shadow",
+    "declaration": "box-shadow: ${value} ${color}",
+    "variations": {
+      "default": "0px 0px 7px 1px" ,
+      "densest": "0px 0px 3px 1px" ,
+      "denser": "0px 0px 5px 1px" ,
+      "dense": "0px 0px 5px 1px" ,
+      "wide": "0px 0px 10px 1px" ,
+      "wider": "0px 0px 15px 1px" ,
+      "widest": "0px 0px 20px 1px"
+    }
+  }
+]

package/src/config/qol.config.json

@@ -0,0 +1,42 @@
+[
+  {
+    "prefix": "smooth",
+    "standalone": true,
+    "declaration": "transition-duration: ${value}",
+    "variations": {
+      "default": "0.1s",
+      "slowest": "0.5s",
+      "slower": "0.3s",
+      "slow": "0.2s",
+      "quick": "0.07s",
+      "quicker": "0.05s",
+      "quickest": "0.03s"
+    }
+  },
+  {
+    "prefix": "rounded",
+    "standalone": true,
+    "declaration": "border-radius: ${value}",
+    "variations": {
+      "default": "8px",
+      "square": "0px",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16s",
+      "very": "9999px",
+      "full": "50%",
+      "half": "100%"
+    }
+  },
+  {
+    "prefix": "border",
+    "declaration": "border-style: ${value}",
+    "variations": {
+      "solid": "solid",
+      "dashed": "dashed",
+      "dotted": "dotted"
+    }
+  }
+]

package/src/config/states.config.json

@@ -0,0 +1,4 @@
+[
+  "hover",
+  "not-hover"
+]

package/src/interfaces/config.interface.ts

@@ -0,0 +1,16 @@
+import { IPreset } from "./preset.interface"
+
+export interface IFilePatterns {
+  targets: string|string[],
+  ignore: string[]
+}
+
+export interface IEnvConfig {
+  qol: IPreset[]
+  presets: IPreset[],
+  files: IFilePatterns,
+
+  colors: string[],
+  states: string[],
+  [key: string]: any
+}

package/src/interfaces/preset.interface.ts

@@ -0,0 +1,18 @@
+export interface IVariation {
+  [key: string]: string
+}
+
+export interface IPreset {
+  // [key: string]: string
+  prefix: string,
+  declaration: string,
+
+  /** When true, class can be called without variation, creating a rule with default variation */
+  standalone?: boolean,
+
+  /**In a quasar project (quasar.variabls.scss), will set as !default the precised key with the default variations */
+  globalVariableOverride?: string,
+
+  /** List of every possible variations */
+  variations: IVariation
+}

package/src/manual/build.js

@@ -0,0 +1,3 @@
+const AnubisUI = require('../../index')
+
+AnubisUI()?.buildStart()

package/src/tools/{extract/classes/index.ts → extraction/extractClasses.ts}

@@ -1,22 +1,19 @@
-import { config } from "../../../config/config.tool"
-import { buildCssRuleFile } from "../../cssFile"
-import { mapClassesIntoRules } from "../../mapping/mapClassIntoRule"
-import { getFiles } from "../extract.tools"
+import { getFiles } from "../fileStuff/file.tools"
+import { mapClassesIntoRules } from "../mapping/mapClassIntoRule"
+import { buildCssRuleFile } from "../fileStuff/cssFile"
+import { config } from "../../config/config.tool"
 
-// import fs from 'fs'
 const fs = require('fs')
 
 /** Fetch vue file based on config target patterns */
 const init = async () => {
   const files = await getFiles(config.files)
-  // console.log({ files })
 
   const uniqueClasses = await getUniqueClasses(files)
   const mappedRules = mapClassesIntoRules(uniqueClasses)
-  // console.log({ uniqueClasses, mappedRules })
 
   const file = buildCssRuleFile(mappedRules)
-  // console.log({ file })
+  return file
 }
 
 /** Extract detected class and map into a flat set */
@@ -28,8 +25,6 @@ const getUniqueClasses = async (files: string[]): Promise<string[]> => {
   ?.sort()
 
   const uniqueClasses = Array.from(new Set(extractedClasses))
-  // log(`${uniqueClasses?.length} classes found`)
-
   return uniqueClasses
 }
 
@@ -38,16 +33,20 @@ const extractClasses = async (filePath: string): Promise<string[]> => {
   const file = await fs.promises.readFile(filePath, 'utf-8')
   if (!file) { return [] }
 
-  const { states, prefixes } = config.selectors
+  const { states, qol, presets } = config
 
-  const partialStates = `(${states?.map(s => `${s}:`)?.join('|')})`
-  const partialPrefixes = `(${prefixes?.map(p => `${p}-`)?.join('|')})`
+  const partialPrefixes = presets?.map(p => `${p.prefix}-`)
+  const partialQol = qol?.map(q => `${q.prefix}`)
 
-  const classDetectionRegex = new RegExp(`${partialStates}?${partialPrefixes}(\\w+(-+)?)+`, 'gi')
+  const mappedPrefixes = [
+    ...partialPrefixes,
+    ...partialQol
+  ]?.join('|')
+  const mappedStates = `(${states?.map(s => `${s}:`)?.join('|')})`
 
-  const matches = file.match(classDetectionRegex)
-  if (!matches?.length) { return [] }
+  const classDetectionRegex = new RegExp(`${mappedStates}?(${mappedPrefixes})(-?(\\w+(-+)?)+)?`, 'gi')
 
+  const matches = file.match(classDetectionRegex) || []
   return matches
 }
 

package/src/tools/fileStuff/configFile.ts

@@ -0,0 +1,26 @@
+const fs = require('fs')
+const path = require('path')
+
+import { log } from '../logger'
+
+const userConfigPath = path.join(process.cwd(), 'anubis.config.json')
+let userConfig = null
+
+const readUserConfigFile = () => {
+  const userConfigExists = fs.existsSync(userConfigPath)
+
+  if (!userConfigExists) {
+    log('No user config file found, using default configuration.')
+    return
+  }
+
+  const config = fs.readFileSync(userConfigPath, { encoding: 'utf-8'})
+  userConfig = JSON.parse(config)
+
+  return userConfig
+}
+
+export {
+  userConfig,
+  readUserConfigFile
+}

package/src/tools/{cssFile.ts → fileStuff/cssFile.ts}

@@ -1,9 +1,7 @@
-// import fs from 'fs'
-// import path from 'path'
 const fs = require('fs')
 const path = require('path')
 
-import { cssHeader, log } from './logger'
+import { cssHeader, log } from '../logger'
 
 const srcDir = path.join(process.cwd(), 'src', 'css')
 const outputPath = path.join(srcDir, '_anubis.scss')

package/src/tools/{extract/extract.tools.ts → fileStuff/file.tools.ts}

@@ -1,4 +1,3 @@
-// import fg from 'fast-glob'
 const fg = require('fast-glob')
 
 import { IFileConfig } from '../../interfaces/files.interface'

package/src/tools/logger.ts

@@ -1,6 +1,8 @@
 const logPrefix = '☯︎ [ANUBIS]'
 const log = (str: string) => console.log(`${logPrefix} ${str}`)
 
+const { version } = require('./../../package.json')
+
 const logo = () => {
   log('    ___    _   ____  ______  _________')
   log('   /   |  / | / / / / / __ )/  _/ ___/')
@@ -14,7 +16,7 @@ const logo = () => {
 }
 
 const cssHeader = `/*!
- * * Anubis v.1.0.13
+ * * Anubis v.${version}
  * * Improba
  * * Released under the MIT License.
  * */`

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,4 +1,5 @@
 import { config } from "../../config/config.tool"
+import { IPreset } from "../../interfaces/preset.interface"
 import { log } from "../logger"
 
 const mapClassesIntoRules = (classes: string[]) => {
@@ -13,31 +14,52 @@ const mapClassesIntoRules = (classes: string[]) => {
 }
 
 const mapClassIntoRule = (stringClass: string) => {
-  const colorExists = config.colors?.some(color => stringClass.includes(color))
-  if (!colorExists) { return }
-
   const params = getClassInfos(stringClass)
-  // console.log({ params })
 
-  const rule = mapIntoRule(params)
-  // console.log({ rule })
+  /**
+   * _ If no variations are found, maybe it's just a color like bg-primary
+   * _ So we need to check if the color exists to avoid useless computing
+   * */
+  if (!params.preset) {
+    const { colorExists } = checkOpacity(params.color)
+
+    if (!colorExists) {
+      return
+    }
+  }
+
+  /**
+   * _ If the current QoL isn't standalone (can be called without variation)
+   * _ no
+   */
+  if (!params.color && !params.preset?.standalone) {
+    return
+  }
 
+  const rule = mapIntoRule(params)
   return rule
 }
 
-const getClassInfos = (stringClass: string): { state?: string, prefix?: string, color: string, variation?: { key: string, value: string } } => {
+const getClassInfos = (stringClass: string) => {
   const { cleanedClass, state } = getStateInfos(stringClass)
   const { cleanedColor, prefix } = getPrefixInfos(cleanedClass)
-  const { color, variation } = getVariantInfos({ cleanedColor, prefix })
+  const { preset, variation } = getPresetInfos({ cleanedColor, prefix })
+
+  return {
+    state,
 
-  // console.log({ state, color, prefix, variation })
-  return { state, color, prefix, variation }
+    color: cleanedColor,
+    prefix,
+
+    preset,
+    variation
+  }
 }
 
 const getStateInfos = (stringClass: string) => {
   let state = undefined
 
-  for (const configState of config.selectors?.states) {
+  for (const configState of config.states) {
     if (!stringClass.startsWith(configState)) { continue }
 
     state = configState
@@ -51,62 +73,67 @@ const getStateInfos = (stringClass: string) => {
 }
 
 const getPrefixInfos = (stringClass: string): { cleanedColor: string, prefix: string } => {
-  let prefix = ''
+  const prefixes = [
+    ...config.presets?.map(q => q.prefix),
+    ...config.qol?.map(q => q.prefix)
+  ]
 
-  for (const configPrefix of config.selectors.prefixes) {
-    if (!stringClass.startsWith(configPrefix)) { continue }
+  for (const prefix of prefixes) {
+    if (!stringClass.startsWith(prefix)) { continue }
 
-    prefix = configPrefix
+    return {
+      cleanedColor: stringClass?.slice(prefix.length + 1),
+      prefix
+    }
   }
 
-  return {
-    cleanedColor: stringClass?.slice(prefix.length + 1),
-    prefix,
-  }
+  return null
 }
 
-const getVariantInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefix?: string }): { color: string, variation?: { key: string, value: string } } => {
-  // _ Handle opacity | bg-primary-10
-  const opacityDetectionRegex = new RegExp(/(?:(\w-?)+)-\d{2}$/, 'gm') // Strings that end with two digits
-  const isOpacity = opacityDetectionRegex.test(cleanedColor)
-  if (isOpacity) {
+const getPresetInfos = ({ cleanedColor, prefix }: { cleanedColor: string, prefix?: string }) => {
+  /**
+   * _ Find preset variants matching the prefix from the config
+   * _ Since a prefix can be in multiple presets and qol, filter every matching prefixes then flatten everything
+   * TODO fix first default occurence getting picked when duplicate
+  *  */
+  const possiblePresets = [...config.presets, ...config.qol]
+    ?.filter(p => p.prefix === prefix)
+    ?.flat()
+  if (!possiblePresets?.length) { return { matchingPreset: null, variation: null } }
+
+  const { colorExists } = checkOpacity(cleanedColor)
+
+  /**
+   * Find the preset where the variations exists
+   * If the color exists, it is a preset, so use the preset
+   * */
+  const matchingPreset = colorExists || !cleanedColor
+    ? possiblePresets[0]
+    : possiblePresets?.find(({ variations }) => !variations || Object.keys(variations)?.find(v => cleanedColor.endsWith(v)))
+
+  if (!matchingPreset) {
+    log(`No preset found for ${cleanedColor || prefix}`)
+
     return {
-      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),
-      // }
+      matchingPreset,
+      variation: null
     }
   }
 
-  // _ Find preset variants matching the prefix from the config
-  const variants = config.presets[prefix as keyof typeof config.presets]
-  if (!variants) { return { color: cleanedColor } }
-
-  // _ Map found variants into a key/value object
-  const matchingVariants = variants
-    ?.map(v => Object.entries(v))
-    ?.flat()
-    ?.map(([key, value]) => ({ key, value }))
-    // ?.filter(({ key }) => key !== 'default')
+  const possibleVariations = (matchingPreset.variations || { default: '' })
 
-  const variation = matchingVariants?.find(({ key }) => cleanedColor.endsWith(key)) || matchingVariants?.find(({ key }) => key === 'default')
-  // console.log({ variation })
+  const matchingVariation = Object.keys(possibleVariations)
+    ?.find(v => cleanedColor.endsWith(v)) || 'default'
 
-  const color = variation && variation.key !== 'default'
-    ? cleanedColor?.slice(0, variation.key.length + 1)
-    : cleanedColor
+  const variation = possibleVariations[matchingVariation]
 
   return {
-    color,
-    variation
+    preset: matchingPreset,
+    variation,
   }
 }
 
-function mapIntoRule({ state, prefix, color, variation }: { state?: string, prefix?: string, color: string, variation?: { key: string, value: string } }) {  
-  const colorVar = `var(--${color})`
-
+const mapIntoRule = ({ state, prefix, color, preset, variation }) => {
   // _ Set state selector
   let stateSelector = ''
   switch (state) {
@@ -119,50 +146,47 @@ function mapIntoRule({ state, prefix, color, variation }: { state?: string, pref
       break
   }
 
-  let declaration = ''
-
-  // _ Set prefix declaration
-  // ! Don't forget to add the prefix in the selector.config root file
-  switch (prefix) {
-    case 'bg':
-      declaration = `background: ${colorVar} !important`
-      break
-
-    case 'text':
-      declaration = `color: ${colorVar} !important`
-      break
-
-    case 'border':
-      declaration = `border-width: ${variation?.value} !important; border-color: ${colorVar} !important; border-style: solid`
-      break
-
-    case 'inner-border':
-      declaration = `box-shadow: inset ${variation?.value} ${colorVar} !important`
-      break
-
-    case 'shadow':
-      declaration = `box-shadow: ${variation?.value} ${colorVar} !important`
-      break
+  let selector = `${prefix}${color ? `-${color}` : ''}`
+  if (state) {
+    selector = `${state}\\:${selector}${stateSelector}`
+  }
 
-    default:
-      // _ custom rule from config file
-      const customDeclaration = config.customRules?.find((r: any) => r.prefix === prefix)?.declaration
-      if (!customDeclaration) { return }
+  const colorVar = `var(--${color})`
+  let declaration = preset.declaration
+    ?.replace('${value}', variation)
+    ?.replace('${color}', colorVar)
 
-      declaration = customDeclaration?.replace('${value}', color) + ' !important'
-      break
+  if (!declaration.endsWith(';')) {
+    declaration += ';'
   }
 
-  let selector = `${prefix}-${color}`
-  if (state) {
-    selector = `${state}\\:${selector}${stateSelector}`
+  if (!declaration.includes('!important')) {
+    declaration = declaration
+      ?.replace(';', ' !important;')
   }
 
   const rule = `.${selector} { ${declaration} }`
-
   return rule
 }
 
+/**
+ * _ Check if a color includes opacity (ends with 2 digits)
+ * * Opacity is included in the color name during mixin declaration
+ * */
+const checkOpacity = (color: string) => {
+  const opacityDetectionRegex = new RegExp(/(?:(\w-?)+)-\d{2}$/, 'gm') // Strings that end with two digits
+  const isOpacity = opacityDetectionRegex.test(color)
+
+  const baseColor = isOpacity ? color?.slice(0, -3) : color
+  const colorExists = config.colors?.some(configColor => configColor === baseColor)
+
+  return {
+    colorExists,
+    isOpacity,
+    baseColor
+  }
+}
+
 export {
   mapClassesIntoRules,
   mapClassIntoRule

package/src/config/selectors.config.json

@@ -1,13 +0,0 @@
-{
-  "states": [
-      "hover",
-      "not-hover"
-  ],
-  "prefixes": [
-      "bg",
-      "text",
-      "border",
-      "inner-border",
-      "shadow"
-  ]
-}

package/src/index.ts

@@ -1,43 +0,0 @@
-import { Plugin } from 'vite'
-
-import { init as initConfig } from './config/config.tool'
-import { log, logo, logPrefix } from './tools/logger'
-// import { init as initPresets } from './config/'
-import { init as initClassExtraction } from './tools/extract/classes'
-
-/** List every imported colors across the projet */
-const colors: string[] = []
-
-const init = async () => {
-  console.time(`${logPrefix} Config initialized in`)
-  initConfig()
-  console.timeEnd(`${logPrefix} Config initialized in`)
-  log('---')
-
-  console.time(`${logPrefix} Rules generated in`)
-  await initClassExtraction()
-  console.timeEnd(`${logPrefix} Rules generated in`)
-  log('---')
-}
-
-export default function AnubisUI (): Plugin {
-  return {
-    name: 'anubis-ui',
-    configureServer(server: any) {
-      server.watcher.on('change', (file: any) => {
-        console.log({ file })
-      })
-    },
-    async buildStart() {
-      logo()
-
-      console.time(`${logPrefix} Anubis initialized in`)
-      await init()
-      console.timeEnd(`${logPrefix} Anubis initialized in`)
-    }
-  }
-}
-
-export {
-  colors
-}

package/src/interfaces/config.presets.interface.ts

@@ -1,19 +0,0 @@
-interface IConfigDeclaration {
-  [key: string]: string,
-}
-
-export interface IConfigPresets {
-  defaultInnerBorderWidth?: string
-  innerBorderWidths?: IConfigDeclaration[]
-
-  defaultBorderWidth?: string
-  borderWidths?: IConfigDeclaration[]
-
-  defaultShadow?: string,
-  shadowWidths?: IConfigDeclaration[]
-
-  defaultBorderRadius?: string
-  borderRadiuses?: IConfigDeclaration[]
-
-  fontWeights?: IConfigDeclaration[]
-}

package/src/manual/build.ts

@@ -1,4 +0,0 @@
-import AnubisUI from "..";
-
-//@ts-ignore
-AnubisUI()?.buildStart()

package/src/tools/declaration/color.ts

@@ -1,3 +0,0 @@
-import { IDeclaration } from "../../interfaces/declaration.interface";
-
-const declareColor = (options: { name: string, color: string, theme?: string }) => {}

package/template/colors.js

@@ -1,5 +0,0 @@
-const colors = [
-  { name: 'primary', color: '#0f84cb' },
-  { name: 'secondary', color: '#3b5161' },
-  { name: 'accent', color: '#0f84cb' },
-]