anubis-ui 1.2.25 → 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,8 @@ For every config you want to change, add the corresponding section in your confi
       "variations": {
         "default": "4px",
         "thin": "2px"
-      }
+      },
+      "export": "variation"
     },
     {
       "prefix": "rounded",
@@ -137,7 +139,6 @@ For every config you want to change, add the corresponding section in your confi
         "default": "8px",
         "lg": "12px"
       },
-      "export-variations": false
     }
   ],
 
@@ -252,10 +253,11 @@ 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. `export-variations` (optional) - Generates CSS variables for all variations
+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**:
@@ -391,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
 
@@ -421,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.25",
+  "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/preset.interface.ts

@@ -12,11 +12,11 @@ export interface IUtility {
 
     /**
      * 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/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;
@@ -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

@@ -250,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

@@ -72,7 +72,7 @@ const VARIANT_COMMENT = `/**
  * }
  *
  * (You can also force the generation of all variants from a
- * utility by setting the 'export-variations' to 'true')
+ * utility by setting the 'export' to 'variations')
  */`;
 
 const CLASS_COMMENT = `/**