anubis-ui 1.2.24 → 1.2.25

package/README.md

@@ -129,6 +129,15 @@ For every config you want to change, add the corresponding section in your confi
         "default": "4px",
         "thin": "2px"
       }
+    },
+    {
+      "prefix": "rounded",
+      "declaration": "border-radius: ${value}",
+      "variations": {
+        "default": "8px",
+        "lg": "12px"
+      },
+      "export-variations": false
     }
   ],
 
@@ -243,21 +252,23 @@ QoL utilities include:
 1. `prefix` - The class name prefix
 2. `declaration` - CSS rule using `${value}` placeholder for variations
 3. `variations` - Key-value pairs of variation names and their CSS values
-4. `standalone` (optional) - Allows usage without variation (uses `default` value)
-5. `export-variations` (optional) - Generates CSS variables for all variations
-
-**The `standalone` flag**:
-- `standalone: true` → Can use `rounded` or `rounded-lg` (both valid)
-- `standalone: false` or omitted → Must use `border-solid` (requires variation)
+4. `export-variations` (optional) - Generates CSS variables for all variations
 
 **The `export-variations` flag**:
 - `export-variations: true` → Generates `--size-xs`, `--size-md`, etc. as CSS variables
 - These can be used in custom CSS: `font-size: var(--size-xl)`
 
+**Color support**:
+- Use `${color}` in declaration to indicate the utility requires a color
+- Colors are automatically injected as CSS variables: `var(--{color})`
+
+**Standalone usage**:
+- Utilities with a `default` variation and no color requirement can be used without specifying a variation (e.g., `rounded` uses `rounded-default`)
+
 Example usage:
 ```html
-<div class="rounded-lg smooth-slow border-dashed" />
-<div class="rounded smooth blur" /> <!-- Standalone rules with default values -->
+<div class="bg-primary-low border-neutral-medium hover:shadow-wide rounded-lg" />
+<div class="rounded smooth blur" /> <!-- Uses default variations -->
 <p class="size-2xl weight-bold">Typography utilities</p>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anubis-ui",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "description": "Class-based css generator",
   "main": "index.js",
   "keywords": [

package/src/interfaces/config.interface.ts

@@ -1,9 +1,9 @@
 import { IColor } from './color.interface';
-import { IPreset } from './preset.interface';
+import { IUtility } from './preset.interface';
 import { IFileConfig } from './files.interface';
 
 export interface IEnvConfig {
-    utilities: IPreset[];
+    utilities: IUtility[];
     files: IFileConfig;
 
     /** User-given classes to force the css rule creation */

package/src/interfaces/preset.interface.ts

@@ -2,7 +2,7 @@ export interface IVariation {
     [key: string]: string;
 }
 
-export interface IPreset {
+export interface IUtility {
     // [key: string]: string
     prefix: string;
     declaration: string;

package/src/tools/config.tool.ts

@@ -37,7 +37,7 @@ const init = () => {
     } else {
       const filePath = path.join(anubisConfigFolder, `${file}.config.json`)
       const fileExists = fs.existsSync(filePath)
-      if (!fileExists) { return }
+      if (!fileExists) { continue }
 
       const configContent = fs.readFileSync(filePath, { encoding: 'utf-8' })
       if (!configContent) { continue }
@@ -45,9 +45,11 @@ const init = () => {
       configToUse = JSON.parse(configContent)
     }
 
+    config[file as keyof typeof config] = configToUse
+
     switch (file) {
       case 'colors':
-        validateColors(config[file])
+        validateColors(config.colors)
         break
 
       case 'force':
@@ -57,8 +59,6 @@ const init = () => {
         }
         break
     }
-
-    config[file as keyof typeof config] = configToUse
   }
 
   return config

package/src/tools/extraction/extractClasses.ts

@@ -116,7 +116,7 @@ const buildClassDetectionRegex = (): RegExp => {
 				const hasDefaultVariation = hasVariations && variations.includes('default')
 				const needColor = declaration.includes('${color}')
 
-				/** If variation has default key, it's considered as a standalone - can be used solo */
+				/** If variation has default key and doesn't need color, can be used solo */
 				if (hasVariations && hasDefaultVariation && !needColor) {
 					return `${prefix}`
 				}
@@ -137,8 +137,8 @@ const buildClassDetectionRegex = (): RegExp => {
 
 /** Get cached regex or build a new one if config changed */
 const getClassDetectionRegex = (): RegExp => {
-		const { states, qol, utilitys } = config;
-		const configHash = JSON.stringify({ states, qol, utilitys });
+		const { states, utilities } = config;
+		const configHash = JSON.stringify({ states, utilities });
 
 		if (cachedRegex && cachedConfigHash === configHash) {
 				return cachedRegex;

package/src/tools/mapping/mapClassIntoRule.ts

@@ -120,8 +120,7 @@ const getUtilityInfos = ({
 }) => {
 	/**
 	 * Find utility variations matching the prefix from the config
-	 * Since a prefix can be in multiple utilitys and qol, filter every matching prefixes
-	 * TODO fix first default occurence getting picked when duplicate
+	 * Since a prefix can be in multiple utilities, filter every matching prefixes
 	 */
 	const possibleUtility = [...config.utilities].filter(
 		p => p.prefix === prefix

package/src/tools/output/css.output.ts

@@ -61,7 +61,7 @@ const COLOR_COMMENT = `/**
 
 const VARIANT_COMMENT = `/**
  * These css variables are generated automatically when Anubis
- * detects that they are used in preset/qol in your config.
+ * detects that they are used in utilities in your config.
  *
  * It allows you to write custom css/scss classes in your web
  * components like:
@@ -72,7 +72,7 @@ const VARIANT_COMMENT = `/**
  * }
  *
  * (You can also force the generation of all variants from a
- * preset/qol by setting the 'export-variations' to 'true')
+ * utility by setting the 'export-variations' to 'true')
  */`;
 
 const CLASS_COMMENT = `/**