@massimo-cassandro/minimo 1.19.8 → 1.19.9

package/design-tokens/tokens-config-sample.mjs

@@ -18,7 +18,7 @@ const minimo_path = '../../node_modules/@massimo-cassandro/minimo';
 const config = {
 
   // ---------------------------------------------------------------------------
-  // build-tokens.mjs settings
+  // BUILD-TOKENS & STYLE-DICTIONARY SETTINGS
   // ---------------------------------------------------------------------------
 
   // Path to the stylelint config used to lint the generated CSS file
@@ -49,11 +49,27 @@ const config = {
 
   ],
 
+  // If true, custom properties already present in the CSS destination file
+  // (destFile, from a previous build) take priority over the ones generated
+  // by this build. Properties found only in the pre-existing file (no longer
+  // generated) are kept too. Useful to preserve manual overrides/additions
+  // made directly in the compiled CSS across rebuilds. Ignored on the first
+  // build, when destFile does not exist yet. Default: false.
+  mergeCustomProps: false,
+
+  // Properties whose names begin with one of the following strings are grouped
+  // and placed at the beginning of the output CSS file
+  colorPropertiesPrefixes: ['accent', 'primary', 'secondary', 'neutral'],
+
+
+  // ---------------------------------------------------------------------------
+  // PENPOT / FIGMA
   // ---------------------------------------------------------------------------
   // Optional design tokens output
   // Generates one or more json(c) files in addition to the CSS output file, for use
   // in Penpot or Figma projects or as an alternative to the .mjs source files
   // ---------------------------------------------------------------------------
+
   // Output format for Penpot token files: 'jsonc' or 'json'
   //   'jsonc' -> adds a generated-file disclaimer header, uses .jsonc extension
   //   'json'  -> plain JSON, no disclaimer
@@ -75,18 +91,9 @@ const config = {
   //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
   penpotExpressions: 'resolve',
 
-  // If true, custom properties already present in the CSS destination file
-  // (destFile, from a previous build) take priority over the ones generated
-  // by this build. Properties found only in the pre-existing file (no longer
-  // generated) are kept too. Useful to preserve manual overrides/additions
-  // made directly in the compiled CSS across rebuilds. Ignored on the first
-  // build, when destFile does not exist yet. Default: false.
-  mergeCustomProps: false,
-
-
 
   // ---------------------------------------------------------------------------
-  // check-unresolved-custom-props.mjs settings
+  // CHECK-UNRESOLVED-CUSTOM-PROPS.MJS SETTINGS
   // ---------------------------------------------------------------------------
 
   // If true, also reports custom properties that are defined (in destFile or

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

@@ -81,6 +81,13 @@ export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExp
 // build-tokens-src/merge-css.mjs). Default: false.
 export const mergeCustomProps = buildConfig.mergeCustomProps === true;
 
+// colorPropertiesPrefixes: custom properties whose first hyphen-separated
+// name segment matches one of these prefixes are grouped together and moved
+// to the beginning of the generated CSS file (see formats/css.mjs). Default: [].
+export const colorPropertiesPrefixes = Array.isArray(buildConfig.colorPropertiesPrefixes)
+  ? buildConfig.colorPropertiesPrefixes
+  : [];
+
 // ---------------------------------------------------------------------------
 // Source: resolve patterns relative to the config directory and normalise to
 // forward-slash absolute paths (fast-glob, used internally by Style Dictionary,

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

@@ -239,19 +239,54 @@ StyleDictionary.registerFormat({
     const sortedProps = Object.entries(finalProps)
       .sort(([a], [b]) => a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' }));
 
+    // colorPropertiesPrefixes: properties whose first hyphen-separated name
+    // segment matches one of these prefixes are pulled out and placed, in
+    // prefix-list order, at the beginning of the output file.
+    const colorPropertiesPrefixes = options.colorPropertiesPrefixes ?? [];
+    const colorProps = [];
+    const restProps = [];
+    for (const entry of sortedProps) {
+      const prefix = entry[0].split('-')[0];
+      if (colorPropertiesPrefixes.includes(prefix)) {
+        colorProps.push(entry);
+      } else {
+        restProps.push(entry);
+      }
+    }
+    colorProps.sort(([a], [b]) => {
+      const prefixA = a.split('-')[0];
+      const prefixB = b.split('-')[0];
+      const idxA = colorPropertiesPrefixes.indexOf(prefixA);
+      const idxB = colorPropertiesPrefixes.indexOf(prefixB);
+      if (idxA !== idxB) return idxA - idxB;
+      return a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' });
+    });
+
     // A blank line is inserted between blocks of properties sharing the same
     // first hyphen-separated segment (e.g. all `btn-*` together), to visually
     // group related custom properties in the generated file.
     const outLines = [];
     let prevPrefix = null;
-    for (const [name, tail] of sortedProps) {
-      const prefix = name.split('-')[0];
-      if (prevPrefix !== null && prefix !== prevPrefix) {
-        outLines.push('');
+    const appendBlock = (props) => {
+      for (const [name, tail] of props) {
+        const prefix = name.split('-')[0];
+        if (prevPrefix !== null && prefix !== prevPrefix) {
+          outLines.push('');
+        }
+        outLines.push(`  --${name}: ${tail}`);
+        prevPrefix = prefix;
       }
-      outLines.push(`  --${name}: ${tail}`);
-      prevPrefix = prefix;
+    };
+
+    if (colorProps.length) {
+      outLines.push('  /** COLORS **/');
+    }
+    appendBlock(colorProps);
+    if (colorProps.length && restProps.length) {
+      outLines.push('', '');
+      prevPrefix = null;
     }
+    appendBlock(restProps);
 
     customPropsCount = sortedProps.length;
     return `${selector} {\n${outLines.join('\n')}\n}\n`;

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

@@ -44,6 +44,7 @@ const PENPOT_TRANSFORMS = [
  *                                                   Collected from sd.allTokens after SD initialisation.
  *                                                   Ignored when penpotDestFile is set.
  * @param {'keep'|'calc'|'resolve'} opts.penpotExpressions  How to handle math expressions in dimension tokens.
+ * @param {string[]}        opts.colorPropertiesPrefixes  Name prefixes grouped at the top of the CSS output.
  * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -54,6 +55,7 @@ export const buildPlatforms = ({
   penpotFormat,
   penpotExpressions = 'keep',
   concreteFilePaths = [],
+  colorPropertiesPrefixes = [],
 }) => {
   /** @type {Record<string, PlatformConfig>} */
   const platforms = {
@@ -67,6 +69,7 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
+            colorPropertiesPrefixes,
           },
         },
       ],

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

@@ -32,6 +32,7 @@ import {
   penpotExpressions,
   source,
   mergeCustomProps,
+  colorPropertiesPrefixes,
 } from './build-tokens-src/config.mjs';
 
 // ── 2. Custom transforms ─────────────────────────────────────────────────────
@@ -95,6 +96,7 @@ const sd = new StyleDictionary({
     penpotFormat,
     penpotExpressions,
     concreteFilePaths,
+    colorPropertiesPrefixes,
   }),
 });
 

package/dev-tools/starter-kit/webpack-template.ejs

@@ -11,6 +11,7 @@
     <!-- <%= require('./frontend/favicons/output/favicons.incl.ejs')({}) %> -->
 
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- <base href="<%= htmlWebpackPlugin.options.base %>"> -->
     <%= htmlWebpackPlugin.tags.headTags %> <!-- opzionale, param `inject: false` -->
   </head>
   <body>

package/dev-tools/starter-kit/webpack.config.mjs

@@ -397,6 +397,7 @@ const config = {
       inject: 'body',
       title: 'XXXXX',
       minify: !isDevelopment
+      // base: isDevelopment ? '/' : '/xxxxx/',
     }),
 
     // =>> plugins: HtmlWebpackInjectAttributesPlugin

package/package.json

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

package/src/custom-properties.css

@@ -1,7 +1,18 @@
 :root {
+  /** COLORS **/
   --accent: #567d0d;
   --accent-fg: #fff;
 
+  --primary-100: #083865;
+  --primary-100-fg: #fff;
+
+  --secondary-100: #650853;
+  --secondary-100-fg: #fff;
+
+  --neutral-100: #666;
+  --neutral-100-fg: #fff;
+
+
   --alert-border-radius: var(--radius-sm);
   --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
 
@@ -252,14 +263,8 @@
   --mpopup-min-width: 25rem;
   --mpopup-width: max-content;
 
-  --neutral-100: #666;
-  --neutral-100-fg: #fff;
-
   --overlay-color: rgb(0 0 0 / .6);
 
-  --primary-100: #083865;
-  --primary-100-fg: #fff;
-
   --radius-base: var(--size-base);
   --radius-lg: var(--size-lg);
   --radius-md: var(--size-md);
@@ -276,9 +281,6 @@
   --sdt-pagination-padding-inline: var(--size-xs);
   --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent));
 
-  --secondary-100: #650853;
-  --secondary-100-fg: #fff;
-
   --sf-macro-btn-close-background-color: var(--btn-close-background-color);
   --sf-macro-btn-close-position-bottom: auto;
   --sf-macro-btn-close-position-left: auto;