@massimo-cassandro/minimo 1.20.5 → 1.20.6

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

@@ -48,20 +48,28 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   // ,manifest_shared_seed = {}
 ;
 
-// test del cacheGroup `shared` (splitChunks): con PurgeCSS attivo i css restano
-// FUORI dal chunk condiviso e nel chunk della entry che li importa, così ogni
-// asset css resta autosufficiente (`variables: true` funziona per singolo asset,
-// e i critical css inlinati nei template devono restare autosufficienti). Con
-// PurgeCSS disattivo questo vincolo non serve più: i css seguono lo stesso path
-// matching dei moduli js
+// test del cacheGroup `shared` (splitChunks): i css restano SEMPRE FUORI dal
+// chunk condiviso e nel chunk della entry che li importa, così ogni asset css
+// resta autosufficiente (`variables: true` funziona per singolo asset, e i
+// critical css inlinati nei template devono restare autosufficienti). I
+// template (twig/altro) linkano solo il css della propria entry (e gli
+// eventuali `.critical.css`), MAI uno shared.css: se i css finissero nel
+// chunk condiviso, quella parte di stili sparirebbe silenziosamente dalla
+// pagina.
+//
+// NB: non è la soluzione migliore, perché rinuncia alla deduplicazione dei
+// css tra entry — ma è la più pratica al momento vista la duplicazione ancora
+// limitata tra le pagine. Da rivedere in futuro se la duplicazione dovesse
+// crescere.
 //
 // TODO: se in futuro la duplicazione di css tra le pagine dovesse crescere
 // (componenti importati dal js di più entry), valutare un cacheGroup `styles`
 // dedicato ai css condivisi: andranno escluse le entry `.critical` (devono
-// restare autosufficienti) e gestite in safelist.variables le custom properties
-// definite/consumate tra asset diversi (vedi purgecss-variables-safelist.mjs)
+// restare autosufficienti), gestite in safelist.variables le custom properties
+// definite/consumate tra asset diversi (vedi purgecss-variables-safelist.mjs),
+// e i template dovranno linkare esplicitamente lo shared.css generato
 const shared_chunk_paths = (module) => {
-  if (usePurgeCss && module.type === 'css/mini-extract') return false;
+  if (module.type === 'css/mini-extract') return false;
 
   // path delle directory da utilizzare nel chunk `shared`
   const sep = '[\\\\/]'; // stringa che produce [\\/] nel pattern
@@ -302,7 +310,7 @@ const config = {
 
         shared: {
           // vedi shared_chunk_paths sopra per la logica completa del test
-          // (path match + esclusione css quando PurgeCSS è attivo)
+          // (path match + esclusione sempre dei css)
           test: shared_chunk_paths,
           name: 'shared',
           chunks: 'all'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.5",
+  "version": "1.20.6",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -72,7 +72,8 @@
   ],
   "peerDependencies": {
     "@svgdotjs/svg.js": "^3.2.7",
-    "blurhash": "^2.0.5"
+    "blurhash": "^2.0.5",
+    "style-dictionary": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@svgdotjs/svg.js": {

package/src/utilities/dom-builder/dom-builder.js

@@ -11,6 +11,7 @@ import { parseDomString } from './parseDomString.js';
  * @property {string | string[]} [tagName='div'] - Alias for `tag`.
  * @property {string | string[]} [className] - CSS class(es): a single string or an array (falsy values filtered out).
  * @property {string | string[]} [class] - Alias for `className`.
+ * @property {string | string[]} [classname] - Alias for `className`.
  * @property {string | null} [id] - Unique element ID.
  * @property {[string, *] | [string, *][] | Object<string, *>} [attrs] - Attributes: a `[name, value]` pair, array of pairs, or `{name: value}` object.
  * @property {string | number | Function | Element | DomBuilderItem[] | null} [content] - Element content.
@@ -67,13 +68,25 @@ import { parseDomString } from './parseDomString.js';
  * object-level properties take precedence.
  *
  * @function domBuilder
- * @param {Array<DomBuilderItem|string>} [structureArray=[]] - Configuration array. Accepts strings (shorthand per `parseDomString`) and/or configuration objects.
+ * @param {Array<DomBuilderItem|string>} [structureArray=[]] - Configuration array. Accepts strings (shorthand per `parseDomString`) and/or configuration objects, each supporting:
+ * - `tag` / `tagName` {string | string[]} - HTML tag name, or array of nested tags (each is parent of the next). Default `'div'`.
+ * - `className` / `class` / `classname` {string | string[]} - CSS class(es): a single string or an array (falsy values filtered out).
+ * - `id` {string | null} - Unique element ID.
+ * - `attrs` {[string, *] | [string, *][] | Object<string, *>} - Attributes: a `[name, value]` pair, array of pairs, or `{name: value}` object.
+ * - `content` {string | number | Function | Element | DomBuilderItem[] | null} - Element content. A string/number is set as `textContent` unless it contains `<`, in which case it's sanitized and inserted as markup (`Element.setHTML`, falling back to `innerHTML`).
+ * - `condition` {boolean} - When false, the element is skipped. Default `true`.
+ * - `callback` {(function(HTMLElement): void) | null} - Invoked after the element is created.
+ * - `children` {Array<DomBuilderItem|string>} - Configuration array for child elements (same format, nested).
+ *
+ * IDs and classes can be specified either as top-level object keys or inside `attrs`; top-level properties take precedence.
  * @param {HTMLElement} [parent] - Parent element the structure is attached to (see `options.insertMode`).
  * @param {Object} [options={}] - Configuration options.
  * @param {boolean} [options.emptyParent=false] - When true, the parent element is emptied before building.
  * @param {'append'|'before'|'after'} [options.insertMode='append'] - How each root element of `structureArray` is attached to `parent`: `append` inserts it as a child (default), `before`/`after` insert it as a previous/next sibling of `parent`, preserving `structureArray` order. Only applies to the elements produced by this call — nested `domBuilder` calls (`content`, `children`) always append.
  * @returns {HTMLElement|null} The first created element, or null if nothing was created.
  */
+
+
 export function domBuilder(structureArray = [], parent, options = {}) {
 
   options = {

package/src/utilities/dom-builder/domBuilderBasicSetup.js

@@ -42,10 +42,13 @@ const boolAttrs = new Set([
  */
 export function domBuilderBasicSetup (element, domBuilderItem) {
 
-  // class aliases: accept both `class` and `className`; `className` takes precedence
+  // class aliases: accept `class` and `classname`; `className` takes precedence over both
   if (domBuilderItem.class && !domBuilderItem.className) {
     domBuilderItem.className = domBuilderItem.class;
   }
+  if (domBuilderItem.classname && !domBuilderItem.className) {
+    domBuilderItem.className = domBuilderItem.classname;
+  }
 
   // normalize attrs: a single flat array is treated as a single [name, value] pair
   if (domBuilderItem.attrs && Array.isArray(domBuilderItem.attrs) && !Array.isArray(domBuilderItem.attrs[0])) {