@massimo-cassandro/minimo 1.35.0 → 1.35.1

package/dev-tools/design-tokens-builder/README.md

@@ -161,6 +161,8 @@ When set, each mode has its own `source` array, and the generated CSS composes a
 - the base mode's props go in a top-level `:root { ... }` block, with `color-scheme: <all modes>;` prepended
 - every other mode's props go in `@media (prefers-color-scheme: <mode>) { :root { ... } }`, with `color-scheme: <mode>;` prepended
 
+Tokens of a non-base mode can reference tokens defined in the base mode (e.g. a dark token using `{color.1}` defined in light, output as `var(--color-1)`). References to a non-base mode's tokens (from the base mode or from another non-base mode) fail with a "reference not defined" error, since the target would be undefined outside its own `@media` block.
+
 `customPropsGroups`, `mergeCustomProps`, `addLayer`, `pxToRem` etc. all apply the same way as with a single `source`. The JSON output (when `jsonBuildPath` is set) is produced once per mode, with the mode name appended to each filename (e.g. `tokens-light.jsonc` / `tokens-dark.jsonc`).
 
 ---

package/dev-tools/design-tokens-builder/build-tokens-src/build-source-modes.mjs

@@ -80,7 +80,16 @@ export const buildSourceModes = async ({
   const jsonFilesByMode = {};
 
   for (const mode of modeNames) {
+    // Non-base modes may reference base-mode tokens (always defined, since
+    // the base block is the unconditional top-level `:root`). The base
+    // sources are passed as `include`: available for reference resolution
+    // but flagged isSource: false, and skipped by the css/json formats.
+    // Base-mode-only on purpose: a reference to a token that exists only in
+    // another `@media` block would build fine but be undefined at runtime.
+    const include = mode === baseMode ? [] : sourceModes[baseMode];
+
     const sd = new StyleDictionary({
+      include,
       source: sourceModes[mode],
       parsers: [LEGACY_TOKENS_PARSER_NAME],
       log: { verbosity: 'verbose' },
@@ -116,6 +125,7 @@ export const buildSourceModes = async ({
       const files = buildJsonFiles(concreteFilePaths, jsonDestFile, jsonFormat, jsonExpression, `-${mode}`);
 
       const jsonSd = new StyleDictionary({
+        include,
         source: sourceModes[mode],
         parsers: [LEGACY_TOKENS_PARSER_NAME],
         log: { verbosity: 'silent' },

package/dev-tools/design-tokens-builder/build-tokens-src/formats/css.mjs

@@ -189,8 +189,11 @@ StyleDictionary.registerFormat({
       return a.name.localeCompare(b.name, 'en', { numeric: true, sensitivity: 'base' });
     };
 
+    // Tokens loaded via `include` (sourceModes: base-mode tokens made
+    // available to other modes) stay in tokenByPath, so references to them
+    // resolve to var(--name), but are not declared in this mode's block.
     const lines = dictionary.allTokens
-      .slice()
+      .filter((token) => token.isSource !== false)
       // .sort((a, b) => a.name.localeCompare(b.name, 'en', {numeric: true, sensitivity: 'base'}))
       .sort((a, b) => sortFunction(a,b))
       .flatMap((token) => {
@@ -247,6 +250,15 @@ StyleDictionary.registerFormat({
           value = String(token.$value ?? token.value);
         }
 
+        // Multi-line values (e.g. Open Props' linear() easings) are collapsed
+        // to a single line: declarations are parsed one line at a time (see
+        // parseCustomProps in ../merge-css.mjs), so a multi-line value would
+        // be truncated to its first line.
+        value = String(value)
+          .replace(/\s*\n\s*/g, ' ')
+          .replace(/\(\s+/g, '(')
+          .replace(/\s+\)/g, ')');
+
         return [`  --${token.name}: ${value};${commentSuffix}`];
       });
 

package/dev-tools/design-tokens-builder/build-tokens-src/formats/json.mjs

@@ -136,6 +136,10 @@ StyleDictionary.registerFormat({
     const tokenMap = (expressionMode === 'resolve') ? makeTokenMap(dictionary) : null;
 
     for (const token of dictionary.allTokens) {
+      // Tokens loaded via `include` (sourceModes: base-mode tokens made
+      // available to other modes for reference resolution) are not output.
+      if (token.isSource === false) continue;
+
       // Rebuild the nested tree from the token path
       let node = root;
       for (let i = 0; i < token.path.length - 1; i++) {
@@ -205,7 +209,7 @@ export const collectConcreteFilePaths = async (sd) => {
   await sd.hasInitialized;
   const paths = new Set();
   for (const token of sd.allTokens) {
-    if (token.filePath) paths.add(token.filePath);
+    if (token.filePath && token.isSource !== false) paths.add(token.filePath);
   }
   return [...paths].sort();
 };

package/dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs

@@ -202,14 +202,17 @@ async function run() {
     /** @type {Map<string, Map<string, string>>} */
     const sourceFileByPropByMode = new Map();
 
-    /** @param {string[]} sourcePatterns @returns {Promise<Map<string,string>>} */
-    const resolveSourceFileMap = async (sourcePatterns) => {
+    // includePatterns: base-mode sources, passed as `include` for non-base
+    // modes so cross-mode references resolve (same as build-source-modes.mjs).
+    /** @param {string[]} sourcePatterns @param {string[]} [includePatterns] @returns {Promise<Map<string,string>>} */
+    const resolveSourceFileMap = async (sourcePatterns, includePatterns = []) => {
       /** @type {Map<string, string>} */
       const map = new Map();
       const resolvedPaths = resolveSourcePaths(sourcePatterns, configDir);
       if (!resolvedPaths.length) return map;
       try {
         const sd = new StyleDictionary({
+          include: resolveSourcePaths(includePatterns, configDir),
           source: resolvedPaths,
           parsers: [LEGACY_TOKENS_PARSER_NAME],
           log: { verbosity: 'silent' },
@@ -217,7 +220,7 @@ async function run() {
         });
         const dictionary = await sd.getPlatformTokens('css');
         for (const token of dictionary.allTokens) {
-          if (token.filePath) map.set(`--${token.name}`, token.filePath);
+          if (token.filePath && token.isSource !== false) map.set(`--${token.name}`, token.filePath);
         }
       } catch {
         // Non-fatal: unused properties will be reported by name only.
@@ -227,7 +230,8 @@ async function run() {
 
     if (checkUnused && config.sourceModes) {
       for (const [mode, modeSource] of Object.entries(config.sourceModes)) {
-        sourceFileByPropByMode.set(mode, await resolveSourceFileMap(modeSource));
+        const includePatterns = mode === sourceModesBase ? [] : config.sourceModes[sourceModesBase];
+        sourceFileByPropByMode.set(mode, await resolveSourceFileMap(modeSource, includePatterns));
       }
     } else if (checkUnused && Array.isArray(config.source) && config.source.length) {
       const map = await resolveSourceFileMap(config.source);

package/dev-tools/design-tokens-builder/tokens-config-sample.mjs

@@ -77,6 +77,13 @@ const config = {
   // customPropsGroups, mergeCustomProps, addLayer, pxToRem etc. all apply
   // the same way as with a single `source`.
   //
+  // Cross-mode references: tokens of a non-base mode can reference tokens
+  // defined in the base mode (e.g. a dark token using {color.1} defined in
+  // light); it resolves to var(--color-1). The reverse (or between two
+  // non-base modes) is not supported and fails with a "reference not
+  // defined" error, since the target would be undefined outside its own
+  // @media block.
+  //
   // The JSON output (see JSON TOKENS OUTPUT below) is produced once per
   // mode, with the mode name appended to each filename, e.g. with
   // jsonDestFile: 'tokens' -> "tokens-light.jsonc", "tokens-dark.jsonc".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.35.0",
+  "version": "1.35.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",