@massimo-cassandro/minimo 0.2.0 → 0.2.2

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
   "bugs": {
     "url": "https://github.com/massimo-cassandro/minimo/issues"
   },
+  "bin": {
+    "buildTokens": "./src/design-tokens-utilities/build-tokens.mjs",
+    "checkUnresolvedProps": "./src/design-tokens-utilities/check-unresolved-custom-props.mjs"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/massimo-cassandro/minimo.git"
@@ -25,7 +29,7 @@
   },
   "main": "./src/index.js",
   "files": [
-    "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc}"
+    "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc,md}"
   ],
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^2.1.0",

package/src/components/spinner/readme.md

@@ -0,0 +1 @@
+Gli spinner hanno tutti la stessa classe, presumendo che se ne usi solo una per volta...

package/src/design-tokens/TODO.md

@@ -0,0 +1,2 @@
+* conversione in js?
+* automatizzare la creazione di proprietà ricorrenti (es il padding)

package/src/design-tokens-utilities/build-tokens.mjs

@@ -0,0 +1,501 @@
+// StyleDictionary v.5
+import StyleDictionary from 'style-dictionary';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import { styleText } from 'node:util';
+
+import { homedir } from 'os';
+
+import stylelint from 'stylelint';
+
+// ---------------------------------------------------------------------------
+// Risoluzione del config file tramite flag --config
+// ---------------------------------------------------------------------------
+const args = process.argv.slice(2);
+const configFlagIndex = args.indexOf('--config');
+
+if (configFlagIndex === -1 || !args[configFlagIndex + 1]) {
+  console.error('Errore: devi specificare il file di configurazione con --config ./path/to/config/file');
+  process.exit(1);
+}
+
+let customPropsCount;
+
+// Il percorso passato è relativo alla CWD (root del progetto)
+const configArgPath = args[configFlagIndex + 1];
+const configAbsPath = path.resolve(process.cwd(), configArgPath);
+
+// La directory del config file: usata come base per risolvere i percorsi interni
+const configDir = path.dirname(configAbsPath);
+
+// Importa il config dinamicamente (usa fileURL per compatibilità ESM su Windows)
+const buildConfig = (await import(pathToFileURL(configAbsPath))).default;
+
+// Helper: risolve un percorso relativo rispetto alla dir del config file.
+// Se il percorso è già assoluto lo lascia intatto.
+const resolveFromConfig = (p) => path.resolve(configDir, p);
+
+// Risolve tutti i percorsi dichiarati nel config
+const stylelintConfigPath = resolveFromConfig(buildConfig.stylelintConfigPath);
+const buildPath           = resolveFromConfig(buildConfig.buildPath);
+const destFile            = buildConfig.destFile; // nome file, non un percorso da risolvere
+
+// source può contenere glob/percorsi: li risolviamo tutti rispetto alla configDir.
+// path.resolve non gestisce i glob, quindi usiamo path.posix per mantenere le slash
+// forward anche su Windows (fast-glob le richiede).
+const source = buildConfig.source.map((s) => {
+  if (path.isAbsolute(s)) return s; // già assoluto, niente da fare
+
+  // Unisce configDir + s e normalizza, poi ri-converte in forward-slash per fast-glob
+  const joined = path.join(configDir, s);
+  // Su Windows path.join usa '\', fast-glob vuole '/': normalizziamo sempre
+  return joined.split(path.sep).join('/');
+});
+
+const stylelintConfig = await import(pathToFileURL(stylelintConfigPath)).then(m => m.default);
+
+// ---------------------------------------------------------------------------
+// 1. Shadow Transform
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'shadow/css',
+  type: 'value',
+  transitive: true,
+  filter: (token) => (token.$type === 'shadow' || token.type === 'shadow'),
+  transform: (token) => {
+    const original = token.original?.$value ?? token.original?.value;
+
+    const value = (typeof original === 'string' && original.startsWith('{'))
+      ? (token.$value ?? token.value)
+      : (original ?? token.$value ?? token.value);
+
+    const shadows = Array.isArray(value) ? value : [value];
+
+    if (shadows.length === 1 && typeof shadows[0] === 'string') {
+      return shadows[0];
+    }
+
+    const BASE_FONT_SIZE = 16;
+    const toRem = (val) => {
+      if (val === undefined || val === null) return '0';
+      const str = String(val).trim();
+      const num = parseFloat(str);
+      if (isNaN(num)) return str;
+      if (num === 0) return '0';
+      if (str.endsWith('px')) return `${num / BASE_FONT_SIZE}rem`;
+      return str;
+    };
+
+    return shadows
+      .map((s) => {
+        const offsetX = toRem(s.offsetX ?? s.x);
+        const offsetY = toRem(s.offsetY ?? s.y);
+        const blur    = toRem(s.blur);
+        const spread  = toRem(s.spread);
+        const color   = s.color ?? 'transparent';
+        const inset   = s.inset ? 'inset ' : '';
+        return `${inset}${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+      })
+      .join(', ');
+  }
+});
+
+// ---------------------------------------------------------------------------
+// 2. PX to REM Transform
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'size/pxToRem-smart',
+  type: 'value',
+  filter: (token) => {
+    const value = token.$value || token.value;
+    return (token.$type === 'dimension' || token.type === 'dimension')
+      && typeof value === 'string'
+      && !value.endsWith('rem');
+  },
+  transform: (token) => {
+    const baseFontSize = 16;
+    const value = token.$value || token.value;
+    const floatValue = parseFloat(value);
+
+    if (isNaN(floatValue)) return value;
+
+    return `${floatValue / baseFontSize}rem`;
+  }
+});
+
+// ---------------------------------------------------------------------------
+// 3. Color passthrough
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'color/css-modern',
+  type: 'value',
+  transitive: true,
+  filter: (token) => token.$type === 'color' || token.type === 'color',
+  transform: (token) => {
+    const value = token.$value ?? token.value;
+    if (typeof value === 'string') return value;
+    return value;
+  }
+});
+
+// ---------------------------------------------------------------------------
+// 4. Gradient Transform
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'gradient/css',
+  type: 'value',
+  transitive: true,
+  filter: (token) => token.$type === 'gradient' || token.type === 'gradient',
+  transform: (token) => {
+    const original = token.original?.$value ?? token.original?.value;
+
+    const value = (typeof original === 'string' && original.startsWith('{'))
+      ? (token.$value ?? token.value)
+      : (original ?? token.$value ?? token.value);
+
+    if (typeof value === 'string') return value;
+
+    const { type = 'linear', angle = 90, stops = [] } = value;
+
+    const stopsList = stops
+      .map((s) => {
+        let color = s.color ?? 'transparent';
+        if (s.alpha !== undefined) {
+          color = `color-mix(in srgb, ${color} ${s.alpha * 100}%, transparent)`;
+        }
+        const position = s.position !== undefined ? ` ${s.position * 100}%` : '';
+        return `${color}${position}`;
+      })
+      .join(', ');
+
+    if (type === 'linear') return `linear-gradient(${angle}deg, ${stopsList})`;
+    if (type === 'radial') return `radial-gradient(circle, ${stopsList})`;
+    if (type === 'conic') return `conic-gradient(from ${angle}deg, ${stopsList})`;
+
+    return `linear-gradient(${angle}${typeof angle === 'number'? 'deg' : ''}, ${stopsList})`;
+  }
+});
+
+// ---------------------------------------------------------------------------
+// 5. Composite Transform (border, outline, transition, animation)
+//    Tutti i tipi che hanno un shorthand CSS diretto.
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'composite/css',
+  type: 'value',
+  transitive: true,
+  filter: (token) => {
+    const type  = token.$type ?? token.type;
+    const value = token.$value ?? token.value;
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      !Array.isArray(value) &&
+      ['border', 'outline', 'transition', 'animation'].includes(type)
+    );
+  },
+  transform: (token) => {
+    const type = token.$type ?? token.type;
+    const v    = token.$value ?? token.value;
+
+    if (type === 'border') {
+      const parts = [v.width ?? '1px'];
+      if (v.style !== undefined && v.style !== null && v.style !== '') parts.push(v.style);
+      parts.push(v.color ?? 'transparent');
+      return parts.join(' ');
+    }
+
+    if (type === 'outline') {
+      return `${v.width ?? '1px'} ${v.style ?? 'solid'} ${v.color ?? 'transparent'}`;
+    }
+
+    if (type === 'transition') {
+      // Ordine: duration | timing-function | delay | property
+      return [
+        v.duration       ?? '0s',
+        v.timingFunction ?? 'ease',
+        v.delay          ?? '0s',
+        v.property       ?? 'all',
+      ].join(' ');
+    }
+
+    if (type === 'animation') {
+      // Ordine: duration | timing-function | delay | iteration-count |
+      //         direction | fill-mode | play-state | name
+      return [
+        v.duration       ?? '0s',
+        v.timingFunction ?? 'ease',
+        v.delay          ?? '0s',
+        v.iterationCount ?? '1',
+        v.direction      ?? 'normal',
+        v.fillMode       ?? 'none',
+        v.playState      ?? 'running',
+        v.name           ?? 'none',
+      ].join(' ');
+    }
+  }
+});
+
+// ---------------------------------------------------------------------------
+// 6. Typography Transform
+//    Restituisce l'oggetto così com'è: il format lo esploderà in più props.
+// ---------------------------------------------------------------------------
+StyleDictionary.registerTransform({
+  name: 'typography/css',
+  type: 'value',
+  transitive: true,
+  filter: (token) => token.$type === 'typography' || token.type === 'typography',
+  transform: (token) => token.$value ?? token.value,
+});
+
+// ---------------------------------------------------------------------------
+// Format: css/variables-sorted
+// ---------------------------------------------------------------------------
+StyleDictionary.registerFormat({
+  name: 'css/variables-sorted',
+  format: ({ dictionary, options }) => {
+    const selector = options.selector ?? ':root';
+
+    const tokenByPath = {};
+    for (const token of dictionary.allTokens) {
+      tokenByPath[token.path.join('.')] = token;
+    }
+
+    const resolveRefs = (str) =>
+      String(str).replace(/\{([^}]+)\}/g, (_, p) => {
+        const ref = tokenByPath[p];
+        return ref ? `var(--${ref.name})` : `{${p}}`;
+      });
+
+    const BASE_FONT_SIZE = 16;
+    const toRem = (val) => {
+      if (val === undefined || val === null) return '0';
+      const str = String(val).trim();
+      const num = parseFloat(str);
+      if (isNaN(num) || num === 0) return num === 0 ? '0' : str;
+      if (str.endsWith('px')) return `${num / BASE_FONT_SIZE}rem`;
+      return str;
+    };
+
+    const buildShadow = (original) => {
+      const shadows = Array.isArray(original) ? original : [original];
+      return shadows.map((s) => {
+        const offsetX = toRem(s.offsetX ?? s.x);
+        const offsetY = toRem(s.offsetY ?? s.y);
+        const blur    = toRem(s.blur);
+        const spread  = toRem(s.spread);
+        const color   = resolveRefs(s.color ?? 'transparent');
+        const inset   = s.inset ? 'inset ' : '';
+        return `${inset}${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+      }).join(', ');
+    };
+
+    const buildGradient = (original) => {
+      const { type = 'linear', angle = 90, stops = [] } = original;
+      const stopsList = stops.map((s) => {
+        let color = resolveRefs(s.color ?? 'transparent');
+        if (s.alpha !== undefined) {
+          color = `color-mix(in srgb, ${color} ${s.alpha * 100}%, transparent)`;
+        }
+        const position = s.position !== undefined ? ` ${s.position * 100}%` : '';
+        return `${color}${position}`;
+      }).join(', ');
+
+      if (type === 'radial') return `radial-gradient(circle, ${stopsList})`;
+      if (type === 'conic')  return `conic-gradient(from ${angle}deg, ${stopsList})`;
+      return `linear-gradient(${angle}deg, ${stopsList})`;
+    };
+
+    // border e outline: shorthand con resolveRefs su tutti i campi; style è opzionale
+    const buildBorderLike = (original) => {
+      const parts = [resolveRefs(String(original.width ?? '1px'))];
+      if (original.style !== undefined && original.style !== null && original.style !== '') {
+        parts.push(resolveRefs(String(original.style)));
+      }
+      parts.push(resolveRefs(String(original.color ?? 'transparent')));
+      return parts.join(' ');
+    };
+
+    // transition: resolveRefs su tutti i campi
+    const buildTransition = (original) => [
+      resolveRefs(String(original.duration       ?? '0s')),
+      resolveRefs(String(original.timingFunction ?? 'ease')),
+      resolveRefs(String(original.delay          ?? '0s')),
+      resolveRefs(String(original.property       ?? 'all')),
+    ].join(' ');
+
+    // animation: resolveRefs su tutti i campi
+    const buildAnimation = (original) => [
+      resolveRefs(String(original.duration       ?? '0s')),
+      resolveRefs(String(original.timingFunction ?? 'ease')),
+      resolveRefs(String(original.delay          ?? '0s')),
+      resolveRefs(String(original.iterationCount ?? '1')),
+      resolveRefs(String(original.direction      ?? 'normal')),
+      resolveRefs(String(original.fillMode       ?? 'none')),
+      resolveRefs(String(original.playState      ?? 'running')),
+      resolveRefs(String(original.name           ?? 'none')),
+    ].join(' ');
+
+    const buildTypography = (tokenName, original) => {
+      const {
+        fontStyle,
+        fontVariant,
+        fontWeight,
+        fontStretch,
+        fontSize,
+        lineHeight,
+        fontFamily,
+        // queste non entrano nel shorthand font
+        letterSpacing,
+        textTransform,
+        textDecoration,
+      } = original;
+
+      const lines = [];
+
+      // shorthand font se ci sono size e family (requisiti minimi CSS)
+      if (fontSize && fontFamily) {
+        const parts = [];
+        if (fontStyle)   parts.push(resolveRefs(String(fontStyle)));
+        if (fontVariant) parts.push(resolveRefs(String(fontVariant)));
+        if (fontWeight)  parts.push(resolveRefs(String(fontWeight)));
+        if (fontStretch) parts.push(resolveRefs(String(fontStretch)));
+
+        const sizeSlash = lineHeight
+          ? `${resolveRefs(String(fontSize))}/${resolveRefs(String(lineHeight))}`
+          : resolveRefs(String(fontSize));
+
+        parts.push(sizeSlash);
+        parts.push(resolveRefs(String(fontFamily)));
+
+        lines.push(`  --${tokenName}-font: ${parts.join(' ')};`);
+      }
+
+      // proprietà che non entrano nel shorthand font
+      const EXTRA_PROPS = {
+        letterSpacing:  ['letter-spacing',  letterSpacing],
+        textTransform:  ['text-transform',  textTransform],
+        textDecoration: ['text-decoration', textDecoration],
+        // fallback: se mancano size o family, le esponiamo comunque separatamente
+        ...(!fontSize   ? { fontSize:   ['font-size',   original.fontSize]   } : {}),
+        ...(!fontFamily ? { fontFamily: ['font-family', original.fontFamily] } : {}),
+      };
+
+      for (const [, [cssProp, val]] of Object.entries(EXTRA_PROPS)) {
+        if (val !== undefined) {
+          lines.push(`  --${tokenName}-${cssProp}: ${resolveRefs(String(val))};`);
+        }
+      }
+
+      return lines.join('\n');
+    };
+
+    const lines = dictionary.allTokens
+      .slice()
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .flatMap((token) => {
+        const type = token.$type ?? token.type;
+        const orig = token.original?.$value ?? token.original?.value;
+
+        // typography: genera più righe, una per proprietà
+        if (type === 'typography') {
+          return [buildTypography(token.name, orig ?? {})];
+        }
+
+        let value;
+
+        if (type === 'shadow' && options.outputReferences) {
+          value = (typeof orig === 'string' && orig.startsWith('{'))
+            ? resolveRefs(orig)
+            : buildShadow(orig);
+
+        } else if (type === 'gradient' && options.outputReferences) {
+          value = (typeof orig === 'string' && orig.startsWith('{'))
+            ? resolveRefs(orig)
+            : buildGradient(orig);
+
+        } else if ((type === 'border' || type === 'outline') && options.outputReferences) {
+          value = (typeof orig === 'string' && orig.startsWith('{'))
+            ? resolveRefs(orig)
+            : buildBorderLike(orig);
+
+        } else if (type === 'transition' && options.outputReferences) {
+          value = (typeof orig === 'string' && orig.startsWith('{'))
+            ? resolveRefs(orig)
+            : buildTransition(orig);
+
+        } else if (type === 'animation' && options.outputReferences) {
+          value = (typeof orig === 'string' && orig.startsWith('{'))
+            ? resolveRefs(orig)
+            : buildAnimation(orig);
+
+        } else if (options.outputReferences && typeof orig === 'string' && orig.includes('{')) {
+          value = resolveRefs(orig);
+
+        } else {
+          value = String(token.$value ?? token.value);
+        }
+
+        return [`  --${token.name}: ${value};`];
+      });
+
+    customPropsCount = lines.length;
+    return `${selector} {\n${lines.join('\n')}\n}\n`;
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Style Dictionary config
+// ---------------------------------------------------------------------------
+const config = {
+  source,
+
+  log: {
+    verbosity: 'verbose'
+  },
+
+  platforms: {
+    css: {
+      buildPath: buildPath + '/',
+      transforms: [
+        'attribute/cti',
+        'name/kebab',
+        'time/seconds',
+        'asset/url',
+        'size/pxToRem-smart',
+        'color/css-modern',
+        'shadow/css',
+        'gradient/css',
+        'composite/css',   // border, outline, transition, animation
+        'typography/css',  // typography (esploso nel format)
+      ],
+      files: [
+        {
+          destination: destFile,
+          format: 'css/variables-sorted',
+          options: {
+            outputReferences: true,
+            showFileHeader: true,
+          }
+        }
+      ]
+    }
+  }
+};
+
+const sd = new StyleDictionary(config);
+await sd.buildAllPlatforms();
+
+await stylelint.lint({
+  config: stylelintConfig,
+  files: [ path.join(buildPath, destFile) ],
+  fix: true
+});
+
+console.log(styleText(['yellow'], `[build-tokens] config file : ${configAbsPath.replace(homedir(), '~')}` ));
+console.log(styleText(['yellow'], `[build-tokens] source      : ${source.map(i => i.replace(homedir(), '~'))}` ));
+console.log(styleText(['yellow'], `[build-tokens] dest file   : ${path.join(buildPath, destFile).replace(homedir(), '~')}` ));
+
+console.log(styleText(['green'], `[build-tokens] ${customPropsCount} custom props elaborate`));
+
+console.log(styleText(['green'], '**** FINE ****'));

package/src/design-tokens-utilities/check-unresolved-custom-props.mjs

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+
+// rivela eventuale custom props css nei file della dir data non presenti nel file css di definizione
+// uso: node check-unresolved-custom-props.mjs --config ./path/to-config.mjs
+
+import path from 'path';
+import fs from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { dirname } from 'path';
+import { glob } from 'node:fs/promises';
+import { styleText, parseArgs } from 'node:util';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 1. Configurazione e parsing dei flag
+const options = {
+  config: {
+    type: 'string',
+    short: 'c',
+  },
+  // Qui in futuro potrai aggiungere altri flag, es:
+  // verbose: { type: 'boolean', short: 'v' }
+};
+
+const { values } = parseArgs({ options });
+
+if (!values.config) {
+  console.error(styleText(['red'], 'Errore: Devi fornire il percorso del config con il flag --config o -c'));
+  console.log('Esempio: node check-unresolved-custom-props.mjs --config ./config.mjs');
+  process.exit(1);
+}
+
+const absoluteConfigPath = path.resolve(process.cwd(), values.config);
+const configDir = path.dirname(absoluteConfigPath);
+
+async function run() {
+  try {
+
+    const { default: config } = await import(pathToFileURL(absoluteConfigPath).href);
+console.log(config);
+    const custom_prop_file_path = path.resolve(configDir, path.join(config.buildPath, config.destFile));
+    const custom_prop_filename = path.basename(custom_prop_file_path);
+    const checkdir = path.resolve(configDir, config.dir_to_check);
+    const exclude = config.exclude_pattern;
+
+    const files = [];
+    for await (const entry of glob(path.join(checkdir, '/**/*.css'))) {
+      if (!entry.endsWith(custom_prop_filename)) {
+        files.push(entry);
+      }
+    }
+
+    if (!fs.existsSync(custom_prop_file_path)) {
+      throw new Error(`File delle proprietà non trovato: ${custom_prop_file_path}`);
+    }
+
+    // lista custom props definiti
+    const cssContent = fs.readFileSync(custom_prop_file_path, 'utf-8');
+    const regex = /--([a-z0-9-]+)(?=\s*:)/g;
+    const propertyNamesList = [...cssContent.matchAll(regex)].map(match => `--${match[1]}`);
+    // extra_custom_props_files 
+
+    (config.extra_custom_props_files??[]).forEach(extraCustomePropsFile => {
+      
+      const extraCustomPropsContent = fs.readFileSync(
+        path.resolve(configDir, extraCustomePropsFile), 
+      'utf-8');
+
+      const extraMatches = [...extraCustomPropsContent.matchAll(regex)].map(match => `--${match[1]}`);
+      propertyNamesList.push(...extraMatches);
+    });
+
+  
+
+    // rilevamento custom props nei vari file css
+    const regex2 = /var\(\s*(--[a-z0-9-]+)\s*(,.*?)?\)/g;
+    const unresolved_props = [];
+    const check = []; // per controllo aggiuntivo esecuzione
+
+    files.forEach(file => {
+      const fileContent = fs.readFileSync(file, 'utf-8');
+      // const filename = path.relative(checkdir, file);
+      const filename = path.relative(configDir, file);
+      const matches = [...fileContent.matchAll(regex2)];
+
+      matches.forEach(match => {
+        const cprop = match[1];
+        const isExcluded = exclude.some(exRegex => exRegex.test(cprop));
+        const isDefined = propertyNamesList.includes(cprop);
+
+        const lineNumber = fileContent.substring(0, match.index).split('\n').length;
+        if (!isExcluded && !isDefined) {
+          // unresolved_props.push(`${filename}:${lineNumber} -> var(${cprop})`);
+          unresolved_props.push({file: filename, line: lineNumber, prop: cprop});
+        }
+
+        check.push(`${filename}:${lineNumber} - ${cprop} - unresolved: ${(!isExcluded && !isDefined) ? 'Y' : 'N'}`);
+      });
+    });
+
+    unresolved_props.sort((a,b) => a.file.localeCompare(b.file));
+
+
+    const result_file = path.resolve(configDir, 'unresolved-props.md');
+
+    console.log(styleText(['green'], 
+      `${unresolved_props.length} custom properties non impostate ` +
+      `-> ${path.relative(process.cwd(), result_file)}`)
+    );
+
+    // Output
+    fs.writeFileSync(result_file, unresolved_props
+      .map(item => `* [${path.basename(item.file)} :: ${item.line}](${item.file}#L${item.line}) -> var(${item.prop})`)
+      .join('\n'), 'utf-8');
+    
+    // fs.writeFileSync(path.resolve(configDir, 'full-result.txt'), check.join('\n'), 'utf-8');
+
+
+    console.log(styleText(['green'], '**** FINE ****'));
+
+  } catch (err) {
+    console.log(styleText(['redBright'], err.stack));
+    // console.error(styleText(['red'], `Errore: ${err.message}`));
+    process.exit(1);
+  }
+}
+
+run();

package/src/design-tokens-utilities/config-templates/tokens-config.mjs

@@ -0,0 +1,34 @@
+
+import { homedir } from 'os';
+import path from 'path';
+
+// TODO spostare percorsi minimo su node modules
+const minimo_path = path.resolve(homedir(), 'Sites/minimo/src');
+
+// path relativi a questo file
+
+const config = {
+  // build tokens
+  stylelintConfigPath: '../../stylelint.config.mjs',
+  buildPath: '../src/css', // dir in cui salvare il file generato da style dictionary
+  destFile: 'custom-properties.css', // nome del file generato da style dictionary
+  // tokens files
+  source: [
+    // '../../node_modules/open-props/open-props.style-dictionary-tokens.json',
+    path.join(minimo_path, 'design-tokens/*.jsonc'),
+    path.join(minimo_path, 'components/**/*.tokens.jsonc'),
+    path.join(minimo_path, 'web-components/**/*.tokens.jsonc'),
+    './figma-tokens-OK/*.jsonc',
+  ],
+
+  // eventuali file aggiuntivi con custim props utilizzate nel progetto
+  extra_custom_props_files: [
+    // '../../node_modules/open-props/open-props.min.css'
+  ],
+  dir_to_check: '../../src', // percorso della dir che include i css da analizzare
+  exclude_pattern: [ // patterns per l'esclusione dal controllo di alcune custom props
+    /^--_/,
+  ]
+};
+
+export default config;

package/src/design-tokens-utilities/readme.md

@@ -0,0 +1,12 @@
+```json
+{
+  "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
+  "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"
+}
+```
+
+## TODO
+
+* <https://github.com/georgeadamson/postcss-merge-selectors>
+* <https://medium.com/@ashusingh584/chokidar-11290855e2cb>
+* <https://github.com/xtivia/style-dictionary-watcher>