@massimo-cassandro/minimo 1.40.0 → 1.40.2

package/dev-tools/create-favicons/src/default-params.mjs

@@ -15,7 +15,7 @@ export const default_params = {
 
   // directory output (percorso relativo alla dir di lavoro)
   // se la dir non esiste, viene creata
-  output_dir: './output',
+  output_dir: './output', // symfony -> '../../public',
 
 
   // WEBMANIFEST
@@ -43,12 +43,12 @@ export const default_params = {
   // nome del file snippet, compresa l'estensione
   // se questo parametro è null e anche `snippet_target_file` lo è, lo snippet non viene generato
   // se il linguaggio è ejs il nome è sempre 'favicons.incl.ejs' e snippet_name viene ignorato
-  snippet_name: 'favicons.html',
+  snippet_name: 'favicons.html', // symfony -> 'favicons.incl.html.twig',
 
   // path (relativo a questo file) in cui salvare lo snippet
   // se null, viene utilizzato lo stesso percorso indicato in `output_dir`
   // se la dir non esiste, viene creata
-  snippet_path: null,
+  snippet_path: null, // symfony -> '../../templates/_incl',
 
   // path del file in cui scrivere le righe dello snippet
   // questa impostazione è alternativa alle due precedenti e, se presente, queste
@@ -62,7 +62,7 @@ export const default_params = {
 
   // linguaggio da utilizzare per la sintassi dello snippet html
   // html, pug, ejs
-  snippet_language: 'ejs',
+  snippet_language: 'ejs', // symfony: 'html',
 
   // template per la costruzione dello snippet.
   // si tratta di una stringa (anche su più righe) in cui deve essere presente
@@ -78,7 +78,7 @@ export const default_params = {
 
   // se true aggiunge allo snippet una query string per ovviare ad eventuali
   // problemi di caching del browser
-  add_cache_buster: false,
+  add_cache_buster: false, // symfony: true,
 
   //****************************************************************************
 

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

@@ -114,7 +114,7 @@ const config = {
     // your project tokens — e.g. remaps a Figma/Penpot-exported `primary`
     // color to minimo's own `primary.100` naming
     {
-      src: './project-tokens/*.{js,mjs,jsonc,json}',
+      src: './design-tokens/*.{js,mjs,jsonc,json}',
       prefix: 'my-project',
       transform: { primary: 'primary.100' },
     }

package/dev-tools/starter-kit/source_files/app/css/fonts.css

@@ -3,5 +3,5 @@
 
 */
 
-@import '@fontsource-variable/rubik/wght.css';
-@import '@fontsource-variable/rubik/wght-italic.css';
+/* @import '@fontsource-variable/rubik/wght.css';
+@import '@fontsource-variable/rubik/wght-italic.css'; */

package/dev-tools/starter-kit/source_files/root/_gitignore

@@ -22,3 +22,4 @@ node_modules
 _private
 public/_dev
 unresolved-unused-props.md
+orphan-classes.md

package/dev-tools/starter-kit/source_files/root/_sf/controller/UnsplashController.php

@@ -22,7 +22,8 @@ class UnsplashController extends AbstractController
       $orientation = 'landscape';
     }
 
-    $unsplash_access_key = 'xxxxxxx';
+    $unsplash_access_key = 'xxxxxxx'; // vedi minimo/_private/unsplash-access-keys.md
+
     $collections_ids = '3660951'; // comma separated list
     $count = null;
 

package/dev-tools/starter-kit/source_files/root/_sf/templates/_main-tpl.html.twig

@@ -4,17 +4,22 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>{%- block title -%}{%- endblock %} | Marketing</title>
+    <title>{%- block title -%}{%- endblock %} | xxxxx</title>
     <meta name="robots" content="noindex, nofollow, noarchive">
     {%- include '_incl/favicons.incl.html.twig'-%}
+
+    <link rel="preload" href="{{ asset('fonts/xxxxx.woff2') }}" as="font" type="font/woff2" crossorigin>
+
     {{- '' -}}
+    {#- shared.js, runtime.js e shared.css servono solo con `useSharedChunk: true` in webpack.config.mjs:
+        con `false` rimuovere tutte le righe che li referenziano (qui sotto e a fine body) -#}
     <link rel="preload" href="{{ asset('index.js') }}" as="script">
     <link rel="preload" href="{{ asset('shared.js') }}" as="script">
     <link rel="preload" href="{{ asset('runtime.js') }}" as="script">
     {{- '' -}}
     <link rel="preload" href="{{ asset('shared.css') }}" as="style">
     <link rel="preload" href="{{ asset('index.css') }}" as="style">
-    {# shared.css va linkato PRIMA del css della entry (ordine della cascata) #}
+    {# shared.css va inserito PRIMA del css della entry (ordine della cascata) #}
     <link rel="stylesheet" href="{{ asset('shared.css') }}" type="text/css" media="all">
     <link rel="stylesheet" href="{{ asset('index.css') }}" type="text/css" media="all">
     <style>
@@ -24,6 +29,8 @@
   </head>
   <body>
 
+    {%- block body -%}{%- endblock -%}
+
     <script src="{{ asset('runtime.js') }}"></script>
     <script src="{{ asset('shared.js') }}"></script>
     <script src="{{ asset('index.js') }}"></script>

package/dev-tools/starter-kit/source_files/root/_sf/templates/bundles/TwigBundle/Exception/error.html.twig

@@ -1,6 +1,6 @@
 {#- https://symfony.com/doc/current/controller/error_pages.html#testing-error-pages-during-development -#}
 <!DOCTYPE html>
-<html lang="it" data-err-code="{{ status_code }}" data-err-text="{{ status_text}}">
+<html lang="it" class="uspg" data-err-code="{{ status_code }}" data-err-text="{{ status_text}}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -8,6 +8,10 @@
   <title>Errore {{ status_code }}</title>
   <meta name="robots" content="noindex, nofollow, noarchive">
   {%- include '_incl/favicons.incl.html.twig'-%}
+  {#- shared.css, shared.js e runtime.js servono solo con `useSharedChunk: true` in webpack.config.mjs:
+      con `false` rimuovere tutte le righe che li referenziano -#}
+  <link rel="preload" href="{{ asset('shared.css') }}" as="style">
+  <link rel="stylesheet" href="{{ asset('shared.css') }}" media="all">
   <link rel="preload" href="{{ asset('index.css') }}" as="style">
   <link rel="stylesheet" href="{{ asset('index.css') }}" media="all">
   <link rel="preload" href="{{ asset('error-pages.css') }}" as="style">

package/dev-tools/starter-kit/source_files/root/_sf/templates/home.html.twig

@@ -0,0 +1,17 @@
+{% extends '_main-tpl.html.twig' %}
+
+{% block title %}xxxx{% endblock %}
+{% block head %}
+
+<link rel="preload" href="{{ asset('__page__.css') }}" as="style">
+<link rel="stylesheet" href="{{ asset('__page__.css') }}" media="all">
+<link rel="preload" href="{{ asset('__page__.js') }}" as="script">
+{% endblock %}
+{% block js %}
+<script src="{{ asset('__page__.js') }}"></script>
+{% endblock %}
+
+{% block body %}
+  home
+  <div id="root"><div class="spinner"></div></div>
+{% endblock %}

package/dev-tools/starter-kit/source_files/root/package-tpl.json

@@ -19,7 +19,7 @@
   "scripts": {
     "webpack DEV (js)": "NODE_ENV=development webpack serve --config ./webpack.config.mjs #--open-app-name 'Google Chrome'",
     "php server": "php -S localhost:[[port8000]] # -t root_dir/",
-    "webpack DEV (sf)": "rm -rf ./public/_dev && NODE_ENV=development webpack serve --config ./webpack.config.mjs # http://192.168.1.135:[[port5700]",
+    "webpack DEV (sf)": "rm -rf ./public/_dev && NODE_ENV=development webpack serve --config ./webpack.config.mjs # http://192.168.1.135:[[port5700]]",
     "symfony server": "symfony serve --port=[[port8000]] --listen-ip=0.0.0.0 # http://192.168.1.135:[[port8000]] # -d (deamon): rimane aperto anche dopo la chiusura del terminale, terminare con `symfony server:stop`",
     "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3' # mbn: 1 / mg2: 3",
     "webpack PROD": "npm run 'UPD-version' && NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",

package/dev-tools/starter-kit/source_files/root/webpack-config-modules/custom-props-purgecss-plugin.mjs

@@ -1,5 +1,5 @@
 // webpack-config-modules/custom-props-purgecss-plugin.mjs
-// v.3
+// v.3.1
 import fs from 'fs';
 import postcss from 'postcss';
 import { globSync } from 'glob';
@@ -11,7 +11,10 @@ import { globSync } from 'glob';
   custom properties disponibili. I css compilati da webpack contengono invece
   solo *usi* (`var(--nome)`), mai definizioni. Dopo la minificazione degli
   asset, il plugin:
-  1. scansiona i css di ogni "set" per trovare le custom properties usate;
+  1. scansiona i css di ogni "set" per trovare le custom properties usate, e
+     anche i js dei chunk che contengono quei css (i css importati con `?raw`,
+     es. shadow DOM dei web components, sono stringhe nel bundle js: vengono
+     così rilevati solo per i componenti realmente importati);
   2. risolve le dipendenze transitive (`--a: calc(var(--b) * 2)` => anche
      `--b`, fino al fixed point, fallback `var(--x, var(--y))` inclusi);
   3. estrae dal master le sole definizioni necessarie, PRESERVANDO l'ordine
@@ -137,8 +140,9 @@ export class CustomPropsPurgeCssPlugin {
    * @param {string} [options.selector=':root'] - Selettore con cui sostituire i blocchi
    *   `:root` del master (es. `':where(html)'`); gli altri selettori (temi, ecc.) restano invariati (default: ':root')
    * @param {string[]} [options.extraUsageGlobs=[]] - Glob di file css i cui usi di var()
-   *   contano come usati in TUTTI i set: css caricati fuori dagli asset (shadow DOM dei
-   *   web components, import `?raw`) (default: [])
+   *   contano come usati in TUTTI i set: serve solo per css caricati fuori dal bundle
+   *   (i css `?raw` sono già rilevati nei js dei chunk del set). Un glob troppo largo
+   *   porta nel css anche le props di componenti non importati (default: [])
    * @param {(string|RegExp)[]} [options.seeds=[]] - Props da includere comunque in tutti i
    *   set (nomi esatti o pattern risolti sui nomi dichiarati nel master), es. override
    *   consumati da un altro asset (default: [])
@@ -248,9 +252,29 @@ export class CustomPropsPurgeCssPlugin {
               continue;
             }
 
-            // props usate nei css del set
+            /*
+              asset da scansire: i css del set + i js dei chunk che li contengono
+              (e dei chunk da essi raggiunti). I css importati con `?raw` (shadow DOM
+              dei web components) sono stringhe nel bundle js: vengono quindi
+              rilevati solo per i componenti realmente importati
+            */
+            const scanned = new Set(sourceNames);
+            for (const chunk of compilation.chunks) {
+              if (![...chunk.files].some(file => sourceNames.includes(file))) {
+                continue;
+              }
+              for (const referenced of chunk.getAllReferencedChunks()) {
+                for (const file of referenced.files) {
+                  if (/\.m?js$/i.test(file)) {
+                    scanned.add(file);
+                  }
+                }
+              }
+            }
+
+            // props usate negli asset scansionati
             const used = new Set(commonUsages);
-            for (const name of sourceNames) {
+            for (const name of scanned) {
               varRefs(compilation.getAsset(name).source.source().toString()).forEach(ref => used.add(ref));
             }
 

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

@@ -1,5 +1,5 @@
 // webpack.config.mjs __project_name__
-// v.3
+// v.3.1
 import path from 'path';
 import { fileURLToPath } from 'url';
 import webpack from 'webpack';
@@ -8,17 +8,21 @@ import * as process from 'process'; // Rende 'process' disponibile nel contesto
 // import { styleText } from 'node:util';
 // import { createRequire } from 'node:module';
 
+// SETUP symfony -> commentare HtmlWebpackPlugin e HtmlWebpackInjectPreload
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import HtmlWebpackInjectPreload from '@principalstudio/html-webpack-inject-preload';
+
 import TerserPlugin from 'terser-webpack-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 // import Dotenv from 'dotenv-webpack';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
-// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 // import HtmlWebpackInjectAttributesPlugin from 'html-webpack-inject-attributes-plugin';
 
+// NB: symfony -> decommentare WebpackManifestPlugin
+// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+
 import { cssRules } from './webpack-config-modules/css-rules.mjs';
 import { createPurgeCSSPlugins } from './webpack-config-modules/purgecss-setup.mjs';
 import { getJsConfigAliases } from './webpack-config-modules/get-jsConfig-aliases.mjs';
@@ -40,7 +44,8 @@ const __filename = fileURLToPath(import.meta.url)
 
 const isDevelopment = process.env.NODE_ENV === 'development'
   ,devServerPort = [[port5700]]
-  ,apiPort = [[port8000]] // eslint-disable-line no-unused-vars
+  // SETUP symfony
+  // ,apiPort = [[port8000]]
   ,useSass = false
 
   // css in dev: true = iniettato con style-loader (veloce, nessun asset css);
@@ -48,7 +53,9 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   // NB: con `purgeCssInDev: true` (vedi sotto) viene comunque forzato a false,
   // perché il purge e il plugin delle custom properties lavorano sugli asset css
   ,inlineCssInDevMode = true
-  // sf: inlineCssInDevMode = false
+  // SETUP symfony
+  // ,inlineCssInDevMode = false
+
   ,useSvgo = true
   ,useSvgr = false // svg per react
   ,svgoConfig = useSvgo? (await import('./webpack-config-modules/svgo.config.mjs')).default : null
@@ -57,7 +64,8 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   // dir di output: relativa a QUESTO file ('../build' se il frontend è in una
   // sottodirectory, './build' se webpack.config.mjs è nella root del progetto)
   ,output_dir = path.resolve(__dirname, './build')
-  // ,output_dir = isDevelopment? '_dev' : 'build' // symfony
+  // SETUP symfony
+  // ,output_dir = isDevelopment? '_dev' : 'build'
 
   // dir delle favicons generate da `npx create-favicons` (vedi package.json):
   // il path assoluto serve a CopyWebpackPlugin/HtmlWebpackPlugin (i path
@@ -66,8 +74,8 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   ,favicons_path = path.resolve(__dirname, './app/favicons/output') // commentare se non usato
   ,favicons_path_regexp = /favicons\/output/ // source pattern per le favicons (regexp o null)
 
-  //sf:
-  //,favicons_path
+  // SETUP symfony
+  // // ,favicons_path = path.resolve(__dirname, './app/favicons/output') // commentare se non usato
   // ,favicons_path_regexp = null
 
 
@@ -98,6 +106,29 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   // (copiato da minimo da starter-install.sh, generato da `npm run 'build tokens'`)
   ,customPropsFile = path.resolve(__dirname, './app/css/custom-properties.css')
 
+  /*
+    chunk `shared` (splitChunks + runtimeChunk 'single'): true = js e css comuni
+    in `shared.js` / `shared.css` + `runtime.js` (vedi `shared_chunk_paths`);
+    false = nessun chunk condiviso, utile nei progetti con una sola pagina (più al
+    massimo una pagina di errore): la entry principale (`mainEntry`) è sempre
+    caricata e contiene da sola tutto il js/css comune e le definizioni delle
+    custom properties per tutti i css.
+    NB: con `false` i template NON devono più linkare shared.js, shared.css e
+    runtime.js (vedi _sf/templates/_main-tpl.html.twig e la pagina di errore)
+  */
+  ,useSharedChunk = true
+  /*
+    entry principale, sempre caricata: con `useSharedChunk: false` riceve le
+    definizioni delle custom properties per tutti i css delle altre entry
+  */
+  ,mainEntry = 'index'
+  /*
+    solo con `useSharedChunk: false`: entry NON `.critical` che non caricano il css
+    di `mainEntry`. Restano fuori dal set principale del plugin custom properties
+    e ricevono un set proprio, con le proprie definizioni (default: [])
+  */
+  ,standaloneEntries = []
+
   // PurgeCSS e plugin custom properties lavorano sugli asset css finali:
   // in dev, con `false`, sono entrambi disattivati (build più veloce, css
   // iniettato con style-loader; se `useCustomPropsPlugin` è true le definizioni
@@ -106,8 +137,6 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   // rispettivi flag `usePurgeCss` / `useCustomPropsPlugin`) e `inlineCssInDevMode`
   // viene forzato a false
   ,purgeCssInDev = false
-  ,inlineCssInDev = inlineCssInDevMode && !purgeCssInDev // valore effettivo passato a cssRules
-  ,runPurgeCss = usePurgeCss && (!isDevelopment || purgeCssInDev)
   ,runCustomPropsPlugin = useCustomPropsPlugin && (!isDevelopment || purgeCssInDev)
   // ,manifest_shared_seed = {}
 ;
@@ -116,6 +145,7 @@ const { CustomPropsPurgeCssPlugin } = runCustomPropsPlugin
   ? await import('./webpack-config-modules/custom-props-purgecss-plugin.mjs')
   : {};
 
+// (solo con `useSharedChunk: true`, vedi sopra)
 // cacheGroup `shared` (splitChunks): raccoglie in `shared.js` / `shared.css` i
 // moduli js e css provenienti da node_modules e dalle directory condivise del
 // progetto (vedi `pathsRegexp` sotto), così non vengono duplicati in ogni entry.
@@ -217,6 +247,8 @@ const CopyWebpackPluginPatterns = [
 const projectEntries = {
   'index': './app/index.js',
 
+  'error-pages': './app/error-pages/error-pages.js',
+
   // css critici da includere inline nei template html: il suffisso `.critical` nel nome
   // della entry attiva l'istanza PurgeCSS dedicata con purge stretto
   // (vedi purgecss-setup.mjs) e la regola dedicata in css-rules.mjs
@@ -237,6 +269,41 @@ const entries = (useCustomPropsPlugin && isDevelopment && !purgeCssInDev)
   : projectEntries;
 
 
+// regexp per gli asset css compilati di una entry: corrisponde a `nome.css` (dev con
+// WEBPACK_SERVE, senza hash) e a `nome.<hash>.css`, ma NON a `nome.critical.<hash>.css`
+// (il wildcard `*` di una stringa, invece, non corrisponde a `nome.css` e corrisponde
+// anche a `nome.critical.<hash>.css`)
+const cssAssetRegexp = (entryName) =>
+  new RegExp(`^${entryName.replace(/[.+?^${}()|[\]\\]/g, '\\$&')}(\\.[^./]+)?\\.css$`);
+
+// set del CustomPropsPurgeCssPlugin (vedi `sets` nei `plugins`). L'elenco delle entry
+// css è derivato da `projectEntries`: aggiungere una entry lì è sufficiente
+const cssEntries = Object.keys(projectEntries).filter(name => !/\.critical/.test(name))
+  ,criticalEntries = Object.keys(projectEntries).filter(name => /\.critical/.test(name))
+  ,customPropsSets = [
+
+    // i critical css sono inline nei template: restano autosufficienti
+    ...criticalEntries.map(name => ({ sources: [cssAssetRegexp(name)] })),
+
+    ...(useSharedChunk
+      // shared.css è linkato in tutte le pagine: contiene le definizioni per tutti i
+      // css delle entry (le definizioni non sono duplicate negli altri asset)
+      ? [{
+        sources: [cssAssetRegexp('shared'), ...cssEntries.map(cssAssetRegexp)],
+        target: cssAssetRegexp('shared')
+      }]
+      // senza shared: le definizioni sono iniettate solo nel css di `mainEntry`
+      // (sempre caricato); le entry che non lo caricano hanno un set proprio
+      : [
+        {
+          sources: cssEntries.filter(name => !standaloneEntries.includes(name)).map(cssAssetRegexp),
+          target: cssAssetRegexp(mainEntry)
+        },
+        ...standaloneEntries.map(name => ({ sources: [cssAssetRegexp(name)] }))
+      ]
+    )
+  ];
+
 const config = {
   mode: isDevelopment ? 'development' : 'production',
 
@@ -272,7 +339,7 @@ const config = {
     clean: !isDevelopment
   },
 
-  /* SYMFONY:
+  /* SETUP symfony
   output: {
     path: path.resolve(__dirname, `./public/${output_dir}` ),
     // filename: '[name].js',
@@ -302,20 +369,25 @@ const config = {
         extractComments: false
       })
     ],
-    runtimeChunk: 'single', // true
-    splitChunks: {
-      cacheGroups: {
-
-        shared: {
-          // vedi shared_chunk_paths sopra per la logica completa del test
-          test: shared_chunk_paths,
-          name: 'shared',
-          enforce: true,
-          // le entry `.critical` restano autosufficienti (css inline nei template)
-          chunks: (chunk) => !/\.critical/.test(chunk.name)
-        }
+    // chunk `shared` e runtime: solo con `useSharedChunk: true`
+    ...(useSharedChunk
+      ? {
+        runtimeChunk: 'single', // true
+        splitChunks: {
+          cacheGroups: {
+
+            shared: {
+              // vedi shared_chunk_paths sopra per la logica completa del test
+              test: shared_chunk_paths,
+              name: 'shared',
+              enforce: true,
+              // le entry `.critical` restano autosufficienti (css inline nei template)
+              chunks: (chunk) => !/\.critical/.test(chunk.name)
+            }
+          }
+        },
       }
-    },
+      : {})
   },
 
   // =>> performance
@@ -339,6 +411,7 @@ const config = {
     client: { overlay: true, },
   },
 
+  // SETUP symfony
   // =>> devServer (con symfony)
   // reverse proxy davanti a `symfony serve` (porta 8102, vedi package.json):
   // il browser va aperto su questo dev server (non su :8102). Le richieste per
@@ -358,7 +431,10 @@ const config = {
   //   // di servire una versione stale in cache su reload manuale
   //   headers: { 'Cache-Control': 'no-store' },
   //   hot: true,
-  //   open: { app: { name: 'Google Chrome' } }, // apertura automatica del browser all'avvio
+  //   open: {
+  //     app: { name: 'Google Chrome' }, // apertura automatica del browser all'avvio
+  //     // target: ['page1', 'page2'], // pafine da aprire all'avvio
+  //   },
   //   static: false, // niente static serving proprio: tutto il resto passa dal proxy verso Symfony
   //   devMiddleware: { writeToDisk: true, },
   //   client: { overlay: true, },
@@ -405,26 +481,20 @@ const config = {
         : []
     ),
 
+    // SETUP symfony (decommentare)
     // =>> plugins: WebpackManifestPlugin
     // new WebpackManifestPlugin({
-    //   fileName: path.join(output_dir, 'manifest.json'),
-    // sf: fileName: 'manifest.json', // scrive in output.path
+    //   fileName: path.join(output_dir, 'manifest.json'), // NB: symfony -> fileName: 'manifest.json', // scrive in output.path
     //   // basePath: item.source_dirname
     //   // removeKeyHash: /\?.*$/, // /([a-f0-9]{32}\.?)/gi, // /(\?as_asset)$/,
-    //   // rimuove i font dal manifest. Non necessari, rendono il file inutilmente grande
+    //   // rimuove dal manifest i font non woff2 (non necessari, rendono il file inutilmente grande);
+    //   // i woff2 restano per consentire il preload con asset() nei template sf
     //   filter: isDevelopment? undefined : (FileDescriptor) => {
-    //     return /fonts/.test(FileDescriptor.path)? false : true;
+    //     return !/fonts/.test(FileDescriptor.path) || /\.woff2$/.test(FileDescriptor.path);
     //   },
     //   sort: isDevelopment? undefined : (a, b) => a.name.localeCompare(b.name)
     // }),
 
-    // =>> plugins: MiniCssExtractPlugin
-    new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].css',
-      chunkFilename: '[id].[contenthash].css',
-      ignoreOrder: true
-    }),
-
     // =>> plugins: MiniCssExtractPlugin
     // contenthash solo se non si usa Dev Server
     new MiniCssExtractPlugin({
@@ -440,6 +510,7 @@ const config = {
     //   : [new InlineCriticalCssPlugin({ match: (href) => href?.includes('.critical') })]
     // ),
 
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackPlugin (manifest)
     new HtmlWebpackPlugin({
       filename: 'manifest.webmanifest',
@@ -448,6 +519,7 @@ const config = {
       minify: false //!isDevelopment
     }),
 
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackPlugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
@@ -458,6 +530,7 @@ const config = {
       // base: isDevelopment ? '/' : '/xxxxx/',
     }),
 
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackInjectAttributesPlugin
     // new HtmlWebpackInjectAttributesPlugin({
     //   // La funzione riceve un oggetto con gli attributi del tag corrente
@@ -471,6 +544,8 @@ const config = {
     //   }
     // }),
 
+
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackInjectPreload
     // https://github.com/principalstudio/html-webpack-inject-preload
     ...(isDevelopment
@@ -515,8 +590,8 @@ const config = {
 
       },
       raw: true,
-      // niente banner nei critical css: vengono inseriti inline nei template html
-      exclude: /\.critical/ // chunk name
+      // niente banner nei critical css ( vengono inseriti inline nei template html), nelle immagini e nei font
+      exclude: /\.critical|\.(svg|png|jpe?g|gif|webp|avif|ico|woff2?|eot|ttf|otf)$/i
     }),
 
     // =>> plugins: PurgeCSSPlugin (solo classi/keyframes, le custom properties sono
@@ -531,7 +606,7 @@ const config = {
     // watch mode i template twig NON sono osservati da webpack: dopo aver
     // aggiunto una classe solo in un twig occorre rilanciare la build (o toccare
     // un file js/css) per aggiornare il purge
-    ...(runPurgeCss
+    ...(usePurgeCss && (!isDevelopment || purgeCssInDev)
       ? createPurgeCSSPlugins({
 
         // SOLO file che generano markup o classi (twig, php, js);
@@ -591,27 +666,25 @@ const config = {
         definitionsFile: customPropsFile,
 
         // set di asset css elaborati in modo indipendente: `sources` sono i nomi
-        // degli asset compilati (con l'hash nel nome: usare `*`, oppure una
-        // RegExp), `target` l'asset in cui iniettare le definizioni (se omesso
-        // è il primo asset del set; se non corrisponde ad alcun asset e non ha
-        // `*` viene emesso come nuovo asset, che va poi linkato nei template).
-        // NB: `*` corrisponde a qualsiasi carattere: 'layout.*.css' corrisponde
-        // anche a 'layout.critical.<hash>.css'
-        sets: [
-          // il critical css è inline nei template: deve restare autosufficiente
-          { sources: ['layout.critical.*.css'] },
-
-          // shared.css è linkato in tutte le pagine: contiene le definizioni
-          // per tutti i css delle entry (le definizioni non sono duplicate
-          // negli altri asset). Ogni css delle entry va elencato qui
-          { sources: ['shared.*.css', 'index.*.css'], target: 'shared.*.css' },
-        ],
-
-        // css usati fuori dagli asset purgati (shadow DOM dei web components,
-        // import `?raw`): tutti i loro usi di var() contano per tutti i set
+        // degli asset compilati (con l'hash nel nome: usare una RegExp, vedi
+        // `cssAssetRegexp`), `target` l'asset in cui iniettare le definizioni (se
+        // omesso è il primo asset del set; se non corrisponde ad alcun asset e non
+        // è una stringa senza `*` non viene emesso nulla).
+        // NB: evitare i wildcard `*`: 'index.*.css' non corrisponde a 'index.css'
+        // (dev con WEBPACK_SERVE) e corrisponde invece a 'index.critical.<hash>.css'.
+        // I set sono costruiti in `customPropsSets` (sopra) a partire da
+        // `projectEntries`, in base a `useSharedChunk`: aggiungendo una entry
+        // non serve modificare nulla qui
+        sets: customPropsSets,
+
+        // css usati fuori dal bundle: tutti i loro usi di var() contano per tutti i
+        // set. I css importati con `?raw` (shadow DOM dei web components) sono
+        // rilevati automaticamente nei js dei chunk, solo per i componenti
+        // realmente importati: un glob largo qui porterebbe nel css anche le
+        // props di componenti non importati
         extraUsageGlobs: [
-          path.resolve(__dirname, './app/src/web-components/**/*.css'),
-          `${minimo_path}/src/web-components/**/*.css`,
+          // path.resolve(__dirname, './app/src/web-components/**/*.css'),
+          // `${minimo_path}/src/web-components/**/*.css`,
         ],
 
         // props da includere comunque in tutti i set (nomi esatti o RegExp),
@@ -708,7 +781,12 @@ const config = {
       },
 
       // =>> rules: svg
-      ...svgRules({useSvgo: useSvgo, svgoConfig: svgoConfig, useSvgr: useSvgr, favicons_path_regexp: favicons_path_regexp?? null }),
+      ...svgRules({
+        useSvgo: useSvgo,
+        svgoConfig: svgoConfig,
+        useSvgr: useSvgr,
+        favicons_path_regexp: favicons_path_regexp?? null
+      }),
 
       // =>> rules: Images / pdf
       {
@@ -771,7 +849,12 @@ const config = {
       },
 
       // =>> rules: css / scss
-      ...cssRules({isDevelopment: isDevelopment, useSass: useSass, inlineCssInDevMode: inlineCssInDev, postcssConfig_path: postcssConfig_path})
+      ...cssRules({
+        isDevelopment: isDevelopment,
+        useSass: useSass,
+        inlineCssInDevMode: inlineCssInDevMode && !purgeCssInDev,
+        postcssConfig_path: postcssConfig_path
+      })
     ] // end rules
   }, // end module
 

package/dev-tools/starter-kit/starter-install.sh

@@ -198,8 +198,10 @@ force_cat() {
 # sotto-cartelle così com'è in source_files: aggiungere, spostare o rinominare
 # file lì non richiede modifiche a questo script.
 # Il terzo argomento (opzionale) è il nome di una funzione di rename invocata
-# su ogni singolo basename, per i casi in cui il nome del file sorgente non
-# coincide con quello di destinazione (vedi rename_root_file).
+# solo sui file posti direttamente nella root di src_root (non su quelli nelle
+# sotto-cartelle, i cui nomi restano invariati: es. _sf/templates/_main-tpl.html.twig,
+# referenziato così da home.html.twig), per i casi in cui il nome del file
+# sorgente non coincide con quello di destinazione (vedi rename_root_file).
 # Il quarto argomento (opzionale, default: safe_cat_with_ports) è la funzione
 # di copia da usare per ogni file: safe_cat_with_ports confronta e backuppa
 # il singolo file (sostituzione porte no-op se non contiene placeholder);
@@ -210,6 +212,9 @@ force_cat() {
 # dell'installazione dei pacchetti npm (vedi più sotto).
 # I file .DS_Store (macOS) vengono sempre ignorati: sono binari e farebbero
 # fallire il sed di safe_cat_with_ports ("illegal byte sequence").
+# I file .gitkeep non vengono copiati, ma la cartella che li contiene viene
+# comunque creata nella destinazione (servono solo a mantenere la cartella nel
+# repo di minimo).
 install_tree() {
   local src_root="$1"
   local dest_root="$2"
@@ -221,10 +226,14 @@ install_tree() {
     rel="${file#"$src_root"/}"
     dir="$(dirname "$rel")"
     base="$(basename "$rel")"
+    if [ "$base" = ".gitkeep" ]; then
+      [ "$dir" = "." ] || mkdir -p "${dest_root}/${dir}"
+      continue
+    fi
     if [ -n "$exclude" ] && [[ " $exclude " == *" $base "* ]]; then
       continue
     fi
-    if [ -n "$rename_fn" ]; then
+    if [ -n "$rename_fn" ] && [ "$dir" = "." ]; then
       new_base="$("$rename_fn" "$base")"
     else
       new_base="$base"
@@ -239,7 +248,8 @@ install_tree() {
   done < <(find "$src_root" -type f ! -name .DS_Store)
 }
 
-# Rename applicato ai file di source_files/root/ in fase di copia:
+# Rename applicato ai soli file posti direttamente in source_files/root/ (non alle
+# sotto-cartelle) in fase di copia:
 # - prefisso singolo underscore -> dotfile (es. _gitignore -> .gitignore);
 #   il doppio underscore (__project__.code-workspace) non viene toccato,
 #   il nome resta invariato

package/dev-tools/starter-kit/webpack-config-upg.md

@@ -50,14 +50,12 @@ Non servono nuovi pacchetti npm: il plugin usa `postcss` e `glob`, già presenti
    }
    ```
 
-3. **Aggiungere** i nuovi flag e le costanti derivate (dopo `purgeCSSOptions`):
+3. **Aggiungere** i nuovi flag e la costante derivata (dopo `purgeCSSOptions`):
 
    ```js
    ,useCustomPropsPlugin = true // false: il plugin non viene caricato, le custom properties restano a carico del progetto
    ,customPropsFile = path.resolve(__dirname, './app/css/custom-properties.css')
    ,purgeCssInDev = false // true (solo per test): purge e plugin attivi anche in dev
-   ,inlineCssInDev = inlineCssInDevMode && !purgeCssInDev
-   ,runPurgeCss = usePurgeCss && (!isDevelopment || purgeCssInDev)
    ,runCustomPropsPlugin = useCustomPropsPlugin && (!isDevelopment || purgeCssInDev)
    ```
 
@@ -81,7 +79,7 @@ Non servono nuovi pacchetti npm: il plugin usa `postcss` e `glob`, già presenti
    ```
 
 6. **`optimization`**: sostituire il commento `// realContentHash: true,` con `realContentHash: !isDevelopment || purgeCssInDev,`.
-7. **PurgeCSS**: la condizione `...(usePurgeCss ? createPurgeCSSPlugins({...}) : [])` diventa `...(runPurgeCss ? ... : [])`, e nella chiamata a `createPurgeCSSPlugins` va **rimosso** il blocco `variablesSafelist: { declarationGlobs, shadowGlobs, seeds }`. I glob `shadowGlobs` e `seeds` si spostano nel plugin (punto seguente, come `extraUsageGlobs` e `seeds`).
+7. **PurgeCSS**: la condizione `...(usePurgeCss ? createPurgeCSSPlugins({...}) : [])` diventa `...(usePurgeCss && (!isDevelopment || purgeCssInDev) ? ... : [])`, e nella chiamata a `createPurgeCSSPlugins` va **rimosso** il blocco `variablesSafelist: { declarationGlobs, shadowGlobs, seeds }`. I glob `shadowGlobs` e `seeds` si spostano nel plugin (punto seguente, come `extraUsageGlobs` e `seeds`).
 8. **Chunk `shared` anche per i css** (in v2 i css restavano nel css di ogni entry, duplicati). Nel commento e nella funzione `shared_chunk_paths` **rimuovere** la riga `if (module.type === 'css/mini-extract') return false;` (e il vecchio commento/`TODO` che spiegava perché i css restavano fuori dallo `shared`), e nel cacheGroup `shared` (`optimization.splitChunks.cacheGroups`) sostituire `chunks: 'all'` con:
 
    ```js
@@ -113,7 +111,7 @@ Non servono nuovi pacchetti npm: il plugin usa `postcss` e `glob`, già presenti
    ```
 
    I `sets` vanno adattati alle entry del progetto: `sources` è l'elenco dei nomi degli asset CSS compilati (con l'hash nel nome, si usa `*`, oppure una RegExp) e `target` (opzionale) l'asset in cui iniettare le definizioni; se omesso è il primo asset del set. Ogni entry con un proprio css deve comparire in un set, altrimenti l'uso di custom properties in quel css non viene rilevato e le definizioni corrispondenti mancano.
-10. **`cssRules`**: passare `inlineCssInDevMode: inlineCssInDev` (non più `inlineCssInDevMode`).
+10. **`cssRules`**: passare `inlineCssInDevMode: inlineCssInDevMode && !purgeCssInDev` (non più `inlineCssInDevMode`).
 11. Aggiornare, se presenti, i commenti che citano `variables: true`, `safelist.variables` o `purgecss-variables-safelist.mjs`.
 
 ### 3. Template
@@ -149,3 +147,99 @@ Con `HtmlWebpackPlugin` (`inject`) `shared.css` è inserito automaticamente. Se
 3. In `build/` esiste `shared.<hash>.css` (con le definizioni delle custom properties), le pagine lo linkano prima del css della entry senza 404, i css delle entry non duplicano gli stili condivisi e la entry `.critical` resta autosufficiente.
 4. `NODE_ENV=development` (con `webpack serve`): le pagine mostrano stili e colori corretti; il master viene caricato per intero come primo modulo delle entry.
 5. Se qualche componente perde stili solo in produzione, provare `useCustomPropsPlugin = false` per isolare il problema.
+
+
+## Da v3 a v3.1
+
+Novità della v3.1: il chunk `shared` diventa opzionale (`useSharedChunk`), i `sets` del plugin custom properties sono derivati da `projectEntries` e usano regexp al posto dei wildcard, e il plugin rileva le custom properties dei css `?raw` (web components) nei js dei chunk, per cui `extraUsageGlobs` non serve più per i web components.
+
+Riepilogo delle modifiche:
+
+| Cosa | Dove |
+|---|---|
+| Flag `useSharedChunk` (chunk `shared` opzionale), `mainEntry`, `standaloneEntries` | `webpack.config.mjs` |
+| `sets` derivati da `projectEntries`, con regexp (`cssAssetRegexp`) al posto dei wildcard | `webpack.config.mjs` |
+| Scansione dei js dei chunk per i css `?raw`; `extraUsageGlobs: []` | `custom-props-purgecss-plugin.mjs`, `webpack.config.mjs` |
+| Riferimenti a `shared.*` / `runtime.js` commentati come opzionali | `_sf/templates/_main-tpl.html.twig`, pagina di errore e template del progetto |
+| `MiniCssExtractPlugin` presente una sola volta; entry `error-pages`; commenti `NB symfony` | `webpack.config.mjs` |
+
+### 1. Moduli in `webpack-config-modules/`
+
+- **Sostituire** `custom-props-purgecss-plugin.mjs` con la versione v3.1 (`// v.3.1`). Gli altri moduli non cambiano.
+
+### 2. Modifiche a `webpack.config.mjs`
+
+1. Riga 2: `// v.3` → `// v.3.1`.
+2. **Aggiungere** i flag tra le costanti di configurazione (dopo `customPropsFile`):
+
+   ```js
+   ,useSharedChunk = true // false: nessun chunk shared né runtime, per progetti con una sola pagina (più al massimo una pagina di errore)
+   ,mainEntry = 'index' // entry sempre caricata: con useSharedChunk false riceve le definizioni delle custom properties
+   ,standaloneEntries = [] // con useSharedChunk false: entry non `.critical` che non caricano il css di mainEntry (set proprio)
+   ```
+
+3. **`optimization`**: rendere condizionali `runtimeChunk: 'single'` e `splitChunks.cacheGroups.shared`:
+
+   ```js
+   optimization: {
+     // ...
+     ...(useSharedChunk
+       ? {
+         runtimeChunk: 'single',
+         splitChunks: { cacheGroups: { shared: { /* come in v3 */ } } }
+       }
+       : {})
+   },
+   ```
+
+4. **Sets del plugin**: prima di `const config`, definire l'helper `cssAssetRegexp` e i set `customPropsSets`, derivati da `projectEntries` (aggiungendo una entry non serve modificare altro):
+
+   ```js
+   // corrisponde a `nome.css` (dev con WEBPACK_SERVE) e `nome.<hash>.css`, NON a `nome.critical.<hash>.css`
+   const cssAssetRegexp = (entryName) =>
+     new RegExp(`^${entryName.replace(/[.+?^${}()|[\]\\]/g, '\\$&')}(\\.[^./]+)?\\.css$`);
+
+   const cssEntries = Object.keys(projectEntries).filter(name => !/\.critical/.test(name))
+     ,criticalEntries = Object.keys(projectEntries).filter(name => /\.critical/.test(name))
+     ,customPropsSets = [
+       // i critical css sono inline nei template: restano autosufficienti
+       ...criticalEntries.map(name => ({ sources: [cssAssetRegexp(name)] })),
+       ...(useSharedChunk
+         // shared.css è linkato in tutte le pagine e contiene le definizioni per tutti i css delle entry
+         ? [{
+           sources: [cssAssetRegexp('shared'), ...cssEntries.map(cssAssetRegexp)],
+           target: cssAssetRegexp('shared')
+         }]
+         // senza shared: definizioni solo nel css di `mainEntry`; le entry che non lo caricano hanno un set proprio
+         : [
+           {
+             sources: cssEntries.filter(name => !standaloneEntries.includes(name)).map(cssAssetRegexp),
+             target: cssAssetRegexp(mainEntry)
+           },
+           ...standaloneEntries.map(name => ({ sources: [cssAssetRegexp(name)] }))
+         ]
+       )
+     ];
+   ```
+
+   Nel plugin sostituire i `sets` con `sets: customPropsSets`. Si usano RegExp e non i wildcard `*`: `'index.*.css'` non corrisponde a `index.css` (dev con `WEBPACK_SERVE`) e corrisponde invece a `index.critical.<hash>.css`.
+5. **`extraUsageGlobs`**: sostituire i glob dei web components con `extraUsageGlobs: []` (i glob precedenti possono restare commentati). `minimo_path` resta, perché è usato anche nei `contentGlobs` di PurgeCSS.
+
+6. **`MiniCssExtractPlugin`**: nell'array `plugins` deve comparire **una sola volta**. Se il config ne contiene due, eliminare quello con `filename: '[name].[contenthash].css'` e tenere quello con la logica `process.env.WEBPACK_SERVE ? '[name].css' : '[name].[contenthash].css'` (e il corrispondente `chunkFilename`).
+7. **Entry `error-pages`**: nel template di base `projectEntries` include `'error-pages': './app/error-pages/error-pages.js'` (pagina di errore, che carica anche il css di `index`). Nei progetti con pagina di errore va aggiunta; non serve altro per i `sets`, perché derivano da `projectEntries`.
+8. **Commenti `NB symfony`** (facoltativo, solo leggibilità): le indicazioni per Symfony (`sf:`, `SYMFONY:`) sono state uniformate in commenti `NB symfony` che dicono cosa commentare, decommentare o rimuovere (import di `HtmlWebpackPlugin` / `HtmlWebpackInjectPreload`, `apiPort`, `output_dir`, `WebpackManifestPlugin`, plugin html). `apiPort` nel template è ora commentato. Nessuna modifica di comportamento.
+
+### 3. Template
+
+Con `useSharedChunk = false` i template **non** devono referenziare `shared.css`, `shared.js` e `runtime.js` (preload, link e script): nei template di esempio (`_main-tpl.html.twig` e pagina di errore) un commento Twig indica le righe da rimuovere. Le definizioni delle custom properties sono nel css di `mainEntry`, che deve essere linkato in ogni pagina; le entry elencate in `standaloneEntries` hanno invece le proprie definizioni nel loro css. Con `useSharedChunk = true` i template restano invariati.
+
+### 4. Cambiamenti di comportamento
+
+- **Scansione dei js:** per ogni set il plugin analizza, oltre ai css, i js dei chunk che li contengono (e dei chunk da essi raggiunti). I css importati con `?raw` (shadow DOM dei web components) sono stringhe nel bundle: le loro props entrano nel css solo per i componenti realmente importati. `extraUsageGlobs` va quindi lasciato vuoto salvo css caricati fuori dal bundle: un glob largo (es. `src/web-components/**/*.css` di minimo) porta nel css anche le props di componenti non importati. Una entry solo js, senza css nei `sources`, non viene scansionata.
+- Anche gli usi di `var(--…)` presenti nei js (es. stili generati a runtime) contano come usati.
+
+### 5. Verifica dopo l'aggiornamento
+
+1. `NODE_ENV=production npx webpack --config ./webpack.config.mjs --stats minimal`: nessun errore o warning del plugin.
+2. Nel css con le definizioni non compaiono props di web components non importati (es. `--jt-*`, `--sdt-*`); per un componente importato con `?raw` le sue props sono presenti.
+3. Con `useSharedChunk = false`: in `build/` non esistono `shared.*` né `runtime.*` e le definizioni sono nel solo css di `mainEntry`.

package/package.json

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

package/src/components/unsplash-page/unsplash-page.module.css

@@ -32,11 +32,12 @@ custom propeties:
 
 /* stylelint-disable declaration-no-important */
 
-html, body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-
+html.uspg {
+  &, & body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 *, *::before, *::after {

package/src/minimo.css

@@ -1,9 +1,9 @@
 /* decomment if you want to use layers. see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
 /* @layer reset, base, components, utilities, project, overrides; */
 
-/* @import '@css/fonts.css'; */
+@import '@css/fonts.css';
 /* @import '@css/custom-media.css'; */ /* managed by postcss */
-/* @import '@css/custom-properties.css' layer('base'); */ /* managed by postcss-jit-props */
+/* @import '@css/custom-properties.css'; */ /* layer('base'); */ /* comment if managed by postcss-jit-props */
 
 @import '@minimoSrc/css/reset.css';
 @import '@minimoSrc/css/layout-base.css';

package/src/utilities/better-text.js

@@ -41,6 +41,8 @@ const PARTICLE_CASING_MAP = new Map(PARTICELLE.map(term => [term.toLowerCase(),
  * Improves a text string by fixing punctuation spacing, multiple spaces,
  * typographic quotes, non-breaking spaces after Italian particles/articles,
  * and optionally enforcing the exact casing of custom words.
+ * Particles are forced to their listed casing, except at the start of the text
+ * where their first letter is capitalized.
  *
  * @param {string} str - input string to process
  * @param {string[]} [custom_words] - list of words whose exact casing must be preserved (e.g. `['iPhone', 'macOS']`) (default: [])
@@ -75,8 +77,14 @@ export function betterText(str, custom_words = []) {
       return match.replace(/ +/g, '\u00A0');
     });
 
-    // enforce exact casing of every particle in a single pass
-    str = str.replace(PARTICLE_CASING_REGEX, match => PARTICLE_CASING_MAP.get(match.toLowerCase()) ?? match);
+    // enforce exact casing of every particle in a single pass;
+    // a particle at the very start of the text (optionally after an opening quote) is capitalized
+    str = str.replace(PARTICLE_CASING_REGEX, (match, _p1, offset, whole) => {
+      const exact = PARTICLE_CASING_MAP.get(match.toLowerCase()) ?? match;
+      return /^[“‘]?$/.test(whole.slice(0, offset))
+        ? exact.charAt(0).toUpperCase() + exact.slice(1)
+        : exact;
+    });
 
     if(custom_words.length) {
       custom_words.forEach(item => {