anubis-ui 1.0.13 → 1.1.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,45 @@ $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"],
+
+  // selectors.config.json
+  "selectors": {
+    "states": ["hover"],
+    "prefixes": ["bg", "text"]
+  },
+
+  // presets.config.json
+  "presets": {
+    "border": [
+      { "default": "4px" }
+    ]
+  }
+}
+```
+<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 +185,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,6 +206,8 @@ 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>
 
@@ -240,31 +280,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
 ```
@@ -285,4 +325,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 { log, logPrefix, logo } = require('./dist/tools/logger');
 const { init: initClassExtraction } = require('./dist/tools/extract/classes');
 
 /** 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.vue')) { 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.13",
+  "version": "1.1.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,10 +1,9 @@
-// import fs from 'fs'
-// import path from 'path'
+import { readUserConfigFile, userConfig } from "../tools/fileHandling/configFile"
+import { log } from "../tools/logger"
+
 const fs = require('fs')
 const path = require('path')
 
-import { log } from '../tools/logger'
-
 interface IPreset {
   [key: string]: string
 }
@@ -26,8 +25,8 @@ interface IEnvConfig {
   [key: string]: any
 }
 
-const configFolder = path.join(__dirname, '..', '..', 'src', 'config');
-const configFiles = [
+const anubisConfigFolder = path.join(__dirname, '..', '..', 'src', 'config');
+const anubisConfigFiles = [
   'files',
   'colors',
   'presets',
@@ -46,17 +45,43 @@ const config = {
 } as IEnvConfig
 
 const init = () => {
-  for (const file of configFiles) {
-    const filePath = path.join(configFolder, `${file}.config.json`)
+  readUserConfigFile()
+
+  checkUserConfig()
 
-    const configContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
+  for (const file of anubisConfigFiles) {
+    let configToUse = null
 
-    config[file as keyof typeof config] = JSON.parse(configContent)
+    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' })
+
+      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/manual/build.js

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

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

@@ -1,9 +1,8 @@
 import { config } from "../../../config/config.tool"
-import { buildCssRuleFile } from "../../cssFile"
+import { buildCssRuleFile } from "../../fileHandling/cssFile"
 import { mapClassesIntoRules } from "../../mapping/mapClassIntoRule"
-import { getFiles } from "../extract.tools"
+import { getFiles } from "../../fileHandling/file.tools"
 
-// import fs from 'fs'
 const fs = require('fs')
 
 /** Fetch vue file based on config target patterns */

package/src/tools/fileHandling/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 → fileHandling/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 → fileHandling/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/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/manual/build.ts

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

package/template/colors.js

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