anubis-ui 1.2.15 → 1.2.16

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,201 +1,340 @@
-import { config } from "../config.tool"
-import { IPreset } from "../../interfaces/preset.interface"
-import { log } from "../logger"
+import { IRuleInfo } from '@/interfaces/preset.interface';
+import { config } from '@tools/config.tool';
+import { log } from '@tools/logger';
 
 const mapClassesIntoRules = (classes: string[]) => {
-  const mappedRules = classes
-    ?.map(cssClass => mapClassIntoRule(cssClass))
-    ?.filter(rule => rule)
-
-  log(`${mappedRules?.length} rules generated`)
-
-  const rules = mappedRules?.join('\n')
-  return rules
-}
-
-const mapClassIntoRule = (stringClass: string) => {
-  const params = getClassInfos(stringClass)
-
-  /**
-   * _ 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 and doesn't have a variation (can be called without variation)
-   * _ then no
-   */
-  if (!params.color && !params.preset?.standalone && !params.variationName) {
-    return
-  }
-
-  const rule = mapIntoRule(params)
-  return rule
-}
+	const usedVariations = new Map<string, string>();
+	const ruleInfos = classes
+		.map(cssClass => mapClassIntoRule(cssClass))
+		.filter(ruleInfo => ruleInfo !== null);
+
+	// Collecter les variations utilisés dans les règles générées
+	ruleInfos.forEach(ruleInfo => {
+		if (ruleInfo.variant && ruleInfo.variant.shouldExport) {
+			const variableName = `${ruleInfo.variant.prefix}-${ruleInfo.variant.variantName}`;
+			usedVariations.set(variableName, ruleInfo.variant.variantValue);
+		}
+	});
+
+	// Générer les règles CSS
+	const rules = generateCssRules(ruleInfos);
+
+	log(`${ruleInfos.length} rules generated`);
+
+	return {
+		rules,
+		variationsFromRules: Object.fromEntries(usedVariations),
+	};
+};
+
+const generateCssRules = (ruleInfos: IRuleInfo[]): string => {
+	return ruleInfos
+		.map(ruleInfo => `.${ruleInfo.selector} { ${ruleInfo.declaration} }`)
+		.join('\n');
+};
+
+const mapClassIntoRule = (stringClass: string): IRuleInfo | null => {
+	const params = getClassInfos(stringClass);
+
+	/**
+	 * _ 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.utility) {
+		const { colorExists } = getColorInfos(params.color);
+
+		if (!colorExists) {
+			return null;
+		}
+	}
+
+	/**
+	 * _ If the current QoL isn't standalone and doesn't have a variation (can be called without variation)
+	 * _ then no
+	 */
+	if (!params.color && !Object.keys(params.utility?.variations || []).includes('default') && !params.variationName) {
+		return null;
+	}
+
+	const ruleInfo = buildRuleInfo(params);
+	return ruleInfo;
+};
 
 const getClassInfos = (stringClass: string) => {
-  const { cleanedClass, state } = getStateInfos(stringClass)
-  const { cleanedColor, prefix } = getPrefixInfos(cleanedClass)
-  const { baseColor, preset, variation, variationName } = getPresetInfos({ cleanedColor, prefix })
-
-  return {
-    state,
-
-    color: baseColor,
-    prefix,
-
-    preset,
-    variation,
-    variationName
-  }
-}
+	const { cleanedClass, state } = getStateInfos(stringClass);
+	const { cleanedColor, prefix } = getPrefixInfos(cleanedClass);
+	const { color, baseColor, utility, variation, variationName } = getUtilityInfos({
+		cleanedColor,
+		prefix,
+	});
+
+	return {
+		state,
+
+		color,
+		baseColor,
+		prefix,
+
+		utility,
+		variation,
+		variationName,
+	};
+};
 
 const getStateInfos = (stringClass: string) => {
-  let state = undefined
-
-  for (const configState of config.states) {
-    if (!stringClass.startsWith(configState)) { continue }
-
-    state = configState
-  }
-
-  const cleanedClass = !!state ? stringClass?.slice(state?.length + 1) : stringClass
-  return {
-    cleanedClass,
-    state,
-  }
-}
-
-const getPrefixInfos = (stringClass: string): { cleanedColor: string, prefix: string } => {
-  const prefixes = [
-    ...config.presets?.map(q => q.prefix),
-    ...config.qol?.map(q => q.prefix)
-  ]
-
-  for (const prefix of prefixes) {
-    if (!stringClass.startsWith(prefix)) { continue }
-
-    return {
-      cleanedColor: stringClass?.slice(prefix.length + 1),
-      prefix
-    }
-  }
-
-  console.log({ prefixes, stringClass })
-  return { cleanedColor: stringClass, prefix: null }
-}
-
-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 {
-      matchingPreset,
-      variation: null
-    }
-  }
-
-  const possibleVariations = (matchingPreset.variations || { default: '' })
-
-  const defaultVariation = 'default'
-  const matchingVariation = Object.keys(possibleVariations)
-    ?.find(v => cleanedColor === v || cleanedColor.endsWith(v))
-
-  const variation = possibleVariations[matchingVariation || defaultVariation]
-  const baseColor = matchingVariation
-    ? cleanedColor?.slice(0, -matchingVariation?.length - 1)
-    : cleanedColor
-
-  return {
-    baseColor,
-    preset: matchingPreset,
-    variationName: matchingVariation,
-    variation,
-  }
-}
-
-const mapIntoRule = ({ state, prefix, color, preset, variation, variationName }) => {
-  // _ Set state selector
-  let stateSelector = ''
-  switch (state) {
-    case 'hover':
-      stateSelector = ':hover'
-      break
-
-    case 'not-hover':
-      stateSelector = ':not(:hover)'
-      break
-  }
-
-  let selector = `${prefix}${color ? `-${color}` : ''}${variationName ? `-${variationName}` : ''}`
-  if (state) {
-    selector = `${state}\\:${selector}${stateSelector}`
-  }
-
-  const colorVar = `var(--${color})`
-  let declaration = preset.declaration
-    ?.replace('${value}', variation)
-    ?.replace('${color}', colorVar)
-
-  if (!declaration.endsWith(';')) {
-    declaration += ';'
-  }
-
-  if (!declaration.includes('!important')) {
-    declaration = declaration
-      ?.replace(';', ' !important;')
-  }
-
-  const rule = `.${selector} { ${declaration} }`
-  return rule
-}
+	const state = config.states.find(configState =>
+		stringClass.startsWith(configState)
+	);
+
+	const cleanedClass = state
+		? stringClass.slice(state.length + 1)
+		: stringClass;
+
+	return {
+		cleanedClass,
+		state,
+	};
+};
+
+const getPrefixInfos = (
+	stringClass: string
+): { cleanedColor: string; prefix: string } => {
+	const prefixes = [
+		...config.utilities.map(u => u.prefix)
+	];
+
+	for (const prefix of prefixes) {
+		if (!stringClass.startsWith(prefix)) {
+			continue;
+		}
+
+		return {
+			cleanedColor: stringClass.slice(prefix.length + 1),
+			prefix,
+		};
+	}
+
+	log(`No matching prefix found for class: ${stringClass}`);
+	return { cleanedColor: stringClass, prefix: null };
+};
+
+const getUtilityInfos = ({
+	cleanedColor,
+	prefix,
+}: {
+	cleanedColor: string;
+	prefix?: string;
+}) => {
+	/**
+	 * 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
+	 */
+	const possibleUtility = [...config.utilities].filter(
+		p => p.prefix === prefix
+	);
+
+	if (!possibleUtility.length) {
+		return { matchingUtility: null, variation: null };
+	}
+
+	const { colorExists } = getColorInfos(cleanedColor);
+
+	/**
+	 * Find the utility where the variations exist
+	 * Logic:
+	 * 1. If we have a valid color or no color specified, use the first utility
+	 * 2. Otherwise, find a utility with a matching variation
+	 */
+	let matchingUtility;
+
+	if (colorExists || !cleanedColor) {
+		// Valid color exists or no color specified - use first utility
+		matchingUtility = possibleUtility[0];
+	} else {
+		// Find utility with matching variation
+		matchingUtility = possibleUtility.find(({ variations }) => {
+			if (!variations) return true;
+
+			const mappedVariations = Array.isArray(variations) ? variations : Object.keys(variations)
+
+			return mappedVariations.some(
+				v => cleanedColor === v || cleanedColor.endsWith(v)
+			);
+		});
+	}
+
+	if (!matchingUtility) {
+		log(`No utility found for ${cleanedColor || prefix}`);
+
+		return {
+			matchingUtility,
+			variation: null,
+		};
+	}
+
+	if (!colorExists && !matchingUtility.variations) {
+		log(`Unknow stuff -> ${[prefix, cleanedColor].join('-')}`);
+
+		return {
+			matchingUtility,
+			variation: null,
+		};
+	}
+
+	const possibleVariations = matchingUtility.variations || { default: '' };
+
+	const defaultVariation = 'default';
+	/**
+	 * Variation matching logic:
+	 * 1. Check for exact match first (prevents "xl" matching when looking for "2xl")
+	 * 2. Fall back to endsWith for edge cases where variation is a suffix
+	 */
+	const exactVariation = Object.keys(possibleVariations).find(
+		v => cleanedColor === v
+	);
+	const closestVariation = Object.keys(possibleVariations).find(v =>
+		cleanedColor.endsWith(v)
+	);
+
+	const matchingVariation = exactVariation || closestVariation;
+
+	const variation = possibleVariations[matchingVariation || defaultVariation];
+	const color = matchingVariation
+		? cleanedColor.slice(0, -matchingVariation.length - 1)
+		: cleanedColor;
+
+	const { baseColor } = getColorInfos(color)
+
+	return {
+		color,
+		baseColor,
+		utility: matchingUtility,
+		variationName: matchingVariation,
+		variation,
+	};
+};
+
+// Map state names to CSS pseudo-selectors
+const stateSelectors: Record<string, string> = {
+	hover: ':hover',
+	'not-hover': ':not(:hover)',
+};
+
+const buildRuleInfo = ({
+	state,
+	prefix,
+	color,
+	baseColor,
+	utility,
+	variation,
+	variationName,
+}): IRuleInfo | null => {
+	// Get state selector from mapping
+	const stateSelector = state ? stateSelectors[state] || '' : '';
+
+	let selector = `${prefix}${color ? `-${color}` : ''}${
+		variationName ? `-${variationName}` : ''
+	}`;
+
+	if (state) {
+		selector = `${state}\\:${selector}${stateSelector}`;
+	}
+
+	// Vérifier que la couleur existe dans la config
+	if (baseColor && !config.colors[baseColor]) {
+		log(
+			`Color '${baseColor}' not found in colors config - skipping rule generation`
+		);
+		return null;
+	}
+
+	// Gérer les variations avec variables CSS ou valeurs directes
+	let variableToUse = variation;
+	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;
+
+	if (variationName && variationName !== 'default') {
+		const variablePrefix = prefix;
+		const variableName = `${variablePrefix}-${variationName}`;
+
+		// Si export-variations: true, utiliser une variable CSS, sinon la valeur directe
+		if (useVariables) {
+			variableToUse = `var(--${variableName})`;
+			variantInfo = {
+				prefix,
+				variantName: variationName,
+				variantValue: variation,
+				shouldExport: true,
+			};
+		} else {
+			// Utiliser la valeur directe, pas de variable CSS
+			variableToUse = variation;
+		}
+	} else if (variation && variationName === 'default') {
+		// Pour les variations par défaut
+		const variableName = `${prefix}-default`;
+
+		if (useVariables) {
+			variableToUse = `var(--${variableName})`;
+			variantInfo = {
+				prefix,
+				variantName: 'default',
+				variantValue: variation,
+				shouldExport: true,
+			};
+		} else {
+			variableToUse = variation;
+		}
+	}
+
+	let declaration = utility.declaration
+		.replace('${value}', variableToUse)
+		.replace('${color}', color ? `var(--${color})` : '');
+
+	if (!declaration.endsWith(';')) {
+		declaration += ';';
+	}
+
+	if (!declaration.includes('!important')) {
+		declaration = declaration.replace(';', ' !important;');
+	}
+
+	return {
+		selector,
+		declaration,
+		color: color || undefined,
+		variant: variantInfo,
+	};
+};
 
 /**
  * _ 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
-}
+// Cache regex outside function to avoid recompilation on every call
+const OPACITY_DETECTION_REGEX = /(?:(\w-?)+)-\d{2}$/; // Strings that end with two digits (e.g., primary-50)
+const OPACITY_SUFFIX_LENGTH = 3; // Length of "-NN" format
+
+const getColorInfos = (color: string) => {
+	const isOpacity = OPACITY_DETECTION_REGEX.test(color);
+
+	const baseColor = isOpacity
+		? color.slice(0, -OPACITY_SUFFIX_LENGTH)
+		: color;
+	const colorExists = Object.keys(config.colors).some(
+		configColor => configColor === baseColor
+	);
+	color === 'primary-10' && console.log({ colorExists, baseColor })
+
+	return {
+		colorExists,
+		isOpacity,
+		baseColor,
+	};
+};
+
+export { mapClassesIntoRules };

package/src/tools/mapping/mapColorIntoDeclaration.ts

@@ -0,0 +1,14 @@
+import { IColor } from '@interfaces/color.interface';
+import { defineColor } from '@tools/output/css.output';
+
+const mapColorsIntoMixinDeclaration = (colors: IColor) => {
+    const mappedColors = Object.entries(colors)
+        ?.map(([colorName, { light, dark }]) =>
+            defineColor(colorName, light, dark)
+        )
+        ?.join('\n');
+
+    return mappedColors;
+};
+
+export { mapColorsIntoMixinDeclaration };

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

@@ -0,0 +1,105 @@
+import packageJson from '../../../package.json';
+const { version } = packageJson;
+
+const header = `/**
+ * Anubis v.${version}
+ * Improba
+ * Released under the MIT License.
+ */`;
+
+const mixin = `
+$background-opacity: (
+  10: 0.1,
+  20: 0.2,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  80: 0.8,
+  90: 0.9
+);
+
+// Mixin that will automatically generate colors for light and/or dark themes (with opacity variations)
+@mixin setRootColors ($name, $lightColor: null, $darkColor: null) {
+  :root {
+    @if $lightColor != null {
+      body.body--light {
+        #{"--"+$name}: $lightColor;
+
+        // Only generate opacity variations for non transparent colors
+        @if $lightColor != transparent {
+          @each $opacity, $multiplier in $background-opacity {
+            #{"--"+$name+"-"+$opacity}: #{rgba(red($lightColor), green($lightColor), blue($lightColor), $multiplier)};
+          }
+        }
+      }
+    }
+
+    @if $darkColor != null {
+      body.body--dark {
+        #{"--"+$name}: $darkColor;
+
+        // Only generate opacity variations for non transparent colors
+        @if $darkColor != transparent {
+          @each $opacity, $multiplier in $background-opacity {
+            #{"--"+$name+"-"+$opacity}: #{rgba(red($darkColor), green($darkColor), blue($darkColor), $multiplier)};
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+const COLOR_COMMENT = `/**
+ * These colours will be mapped to css variables in
+ * the :root element on the html page.
+ *
+ * It allows you to write custom css/scss classes in your web
+ * components.
+ */`;
+
+const VARIANT_COMMENT = `/**
+ * These css variables are generated automatically when Anubis
+ * detects that they are used in preset/qol in your config.
+ *
+ * It allows you to write custom css/scss classes in your web
+ * components like:
+ *
+ * .paragraph-small {
+ *    font-size: var(--size-xs);
+ *    font-weight: var(--weight-light);
+ * }
+ *
+ * (You can also force the generation of all variants from a
+ * preset/qol by setting the 'export-variations' to 'true')
+ */`;
+
+const CLASS_COMMENT = `/**
+ * These are the css classes generated by Anubis based on your config
+ * and what was detected in your source files.
+ */`;
+
+const defineColor = (colorName: string, light?: string, dark?: string) => {
+    // Handle cases where only dark is provided
+    if (!light && dark) {
+        return `@include setRootColors('${colorName}', null, ${dark});`;
+    }
+    // Handle cases where only light is provided or both are provided
+    return `@include setRootColors('${colorName}', ${light}${
+        dark ? ', ' + dark : ''
+    });`;
+};
+
+const getHeader = () => {
+    return `${header}${mixin}`;
+};
+
+export {
+    getHeader,
+    defineColor,
+    COLOR_COMMENT,
+    VARIANT_COMMENT,
+    CLASS_COMMENT,
+};