anubis-ui 1.2.24 → 1.2.26

package/README.md

@@ -80,7 +80,7 @@ css: [
 
 6. Enjoy
 
-> **Note**: Generated CSS variables (from colors and export-variations) are available for custom styling:
+> **Note**: Generated CSS variables (from colors and export) are available for custom styling:
 > ```css
 > .custom-class {
 >   background: var(--primary-low);
@@ -116,7 +116,8 @@ For every config you want to change, add the corresponding section in your confi
   "qol": [
     {
       "prefix": "bg",
-      "declaration": "background: ${color}"
+      "declaration": "background: ${color}",
+      "export": "all"
     }
   ],
 
@@ -128,7 +129,16 @@ For every config you want to change, add the corresponding section in your confi
       "variations": {
         "default": "4px",
         "thin": "2px"
-      }
+      },
+      "export": "variation"
+    },
+    {
+      "prefix": "rounded",
+      "declaration": "border-radius: ${value}",
+      "variations": {
+        "default": "8px",
+        "lg": "12px"
+      },
     }
   ],
 
@@ -243,21 +253,24 @@ 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` (optional) - Controls how variations are exported as CSS variables
 
-**The `export-variations` flag**:
-- `export-variations: true` → Generates `--size-xs`, `--size-md`, etc. as CSS variables
+**The `export` flag**:
+- `export: "variation"` → Generates CSS variables every variations
+- `export: "all"` → Generates classes for every possible color
 - 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>
 ```
 
@@ -380,7 +393,7 @@ Examples:
 | size     | `font-size: {value} !important;`              |
 | weight   | `font-weight: {value} !important;`            |
 
-**Note**: When `export-variations: true` is set, `{value}` becomes `var(--{prefix}-{variation})` instead of the direct value.
+**Note**: When `export: "variation"` is set, `{value}` becomes `var(--{prefix}-{variation})` instead of the direct value.
 
 ## Architecture
 
@@ -410,7 +423,7 @@ Examples:
 
 5. **CSS Output** (`src/tools/fileStuff/css.file.ts`)
    - Generates color CSS variables with light/dark theme support
-   - Generates variation CSS variables (from `export-variations: true`)
+   - Generates variation CSS variables (from `export: "variation"` or `export: "all"`)
    - Writes final CSS rules
    - Outputs to `src/css/_anubis.scss`
 

package/package.json

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

package/src/config/utilities.config.json

@@ -1,11 +1,13 @@
 [
   {
     "prefix": "bg",
-    "declaration": "background: ${color}"
+    "declaration": "background: ${color}",
+    "export": "all"
   },
   {
     "prefix": "text",
-    "declaration": "color: ${color}"
+    "declaration": "color: ${color}",
+    "export": "all"
   },
   {
     "prefix": "text",
@@ -113,7 +115,7 @@
   {
     "prefix": "size",
     "declaration": "font-size: ${value} !important",
-    "export-variations": true,
+    "export": "variation",
     "variations": {
       "2xs": "10px",
       "xs": "12px",
@@ -134,7 +136,7 @@
   {
     "prefix": "weight",
     "declaration": "font-weight: ${value} !important",
-    "export-variations": true,
+    "export": "variation",
     "variations": {
       "thin": "100",
       "extra-light": "200",

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;
@@ -12,11 +12,11 @@ export interface IPreset {
 
     /**
      * Controls how variations are exported as SCSS variables:
-     * - true: export only variations that are used in the codebase
-     * - "always": export all variations regardless of usage
-     * - undefined/false: do not export variations
+     * - "variation": export every variations
+     * - "all": export every possible color class (utility prefix + every colors)
+     * - undefined: do not export variations
      */
-    'export-variations'?: boolean | 'always';
+    'export'?: 'variations' | 'all';
 
     /** List of every possible variations */
     variations: IVariation;

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

@@ -67,11 +67,14 @@ const init = async () => {
 				config.colors
 		)}`;
 
-		// Get all variations that should be exported (export-variations: true)
-		const allExportVariations = getAllExportVariations();
+		// Get all variations that should be exported (export: "variations")
+		const exportVariations = getExportVariations();
 
 		// Merge used variations with all export variations (all export variations take priority)
-		const finalVariations = { ...variationsFromRules, ...allExportVariations };
+		const finalVariations = {
+			...variationsFromRules,
+			...exportVariations
+		};
 
 		// Generate CSS variables for variations
 		const variationsCss = Object.entries(finalVariations)
@@ -95,7 +98,13 @@ const getUniqueClasses = async (files: string[]): Promise<string[]> => {
 				await pLimit(files, extractClasses, MAX_CONCURRENT_FILE_READS)
 		).flat();
 
-		const classes = [...extractedClasses, ...config.force].sort();
+		const exportClasses = getExportAllClasses()
+
+		const classes = [
+			...extractedClasses,
+			...exportClasses,
+			...config.force,
+		].sort();
 
 		const uniqueClasses = Array.from(new Set(classes));
 		return uniqueClasses;
@@ -116,7 +125,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 +146,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;
@@ -162,23 +171,45 @@ const extractClasses = async (filePath: string): Promise<string[]> => {
 		return matches;
 };
 
-/** Get all variations from utilitys with export-variations: true */
-const getAllExportVariations = (): Record<string, string> => {
-		const allExportVariations: Record<string, string> = {};
-		const allUtilities = [...config.utilities];
+/** Get all variations from utilities with export: "all" */
+const getExportAllClasses = (): string[] => {
+		const possiblesClasses: string[] = [];
+
+		const utilities = [...config.utilities];
+		const colors = Object.keys(config.colors);
+
+		for (const utility of utilities) {
+				const exportValue = utility['export'];
+				// Pour "all", exporter toutes les possibilités de couleurs
+				if (exportValue === 'all') {
+					possiblesClasses.push(
+						...colors.map(c => `${utility.prefix}-${c}`)
+					)
+				}
+		}
+
+		return possiblesClasses;
+};
+
+/** Get all variations from utilities with export: "variations" */
+const getExportVariations = (): Record<string, string> => {
+		const exportAllVariations: Record<string, string> = {};
+		const utilities = [...config.utilities];
 
-		for (const utility of allUtilities) {
-				if (utility['export-variations'] === true && utility.variations) {
+		for (const utility of utilities) {
+				const exportValue = utility['export'];
+				// Pour "variations", exporter toutes les variations
+				if (exportValue === 'variations' && utility.variations) {
 						for (const [variantName, variantValue] of Object.entries(
 								utility.variations
 						)) {
 								const variableName = `${utility.prefix}-${variantName}`;
-								allExportVariations[variableName] = variantValue as string;
+								exportAllVariations[variableName] = variantValue as string;
 						}
 				}
 		}
 
-		return allExportVariations;
+		return exportAllVariations;
 };
 
 export { init };

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
@@ -251,8 +250,8 @@ const buildRuleInfo = ({
 	let variantInfo = undefined;
 
 	// Vérifier si on doit exporter les variations en tant que variables CSS
-	const exportVariations = utility['export-variations'];
-	const useVariables = exportVariations === true;
+	const exportVariations = utility['export'];
+	const useVariables = exportVariations === 'variations' || exportVariations === 'all';
 
 	if (variationName && variationName !== 'default') {
 		const variablePrefix = 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' to 'variations')
  */`;
 
 const CLASS_COMMENT = `/**