@massimo-cassandro/minimo 1.39.2 → 1.40.1

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

@@ -19,23 +19,24 @@
   "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",
+    "UPD-version": "npx update-version --no-log-v0 --log-file=./changelog.md # --log-patch --pkg=alt/path/to/package.json",
     "email sass": "npx sass ./app/email:./templates/email/css --no-source-map --style=compressed --watch",
     "postcss email": "postcss ./app/email/[!_]*.css --dir ./templates/email/css --no-map --verbose --config ./app/email --watch",
     "eslint-check": "npx eslint app/",
     "stylelint-check": "npx stylelint 'app/**/*.css'",
     "create-favicons INIT": "npx create-favicons init",
     "create-favicons": "npx create-favicons --dir=./app/favicons",
-    "UPD-version": "npx update-version --no-log-v0 --log-file=./changelog.md # --log-patch --pkg=alt/path/to/package.json",
-    "upd@m": "npx upd@m",
-    "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3' # mbn: 1 / mg2: 3",
     "python server": "python3 -m http.server [[port8000]] # --directory __dirname__ # 8000 = default port",
     "node server": "node serve # richiede ‘npm i serve’",
     "build tokens": "npx buildTokens --config ./app/css/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./app/css/tokens-config.mjs",
+    "find orphan css classes": "npx findOrphanCssClasses --config ./app/css/orphan-css-classes.config.mjs",
     "npm-outdated": "npm outdated",
+    "upd@m": "npx upd@m",
     "npm-upd": "npm update --save"
   },
   "allowScripts": {

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,10 +481,10 @@ 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
@@ -418,13 +494,6 @@ const config = {
     //   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 +509,7 @@ const config = {
     //   : [new InlineCriticalCssPlugin({ match: (href) => href?.includes('.critical') })]
     // ),
 
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackPlugin (manifest)
     new HtmlWebpackPlugin({
       filename: 'manifest.webmanifest',
@@ -448,6 +518,7 @@ const config = {
       minify: false //!isDevelopment
     }),
 
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackPlugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
@@ -458,6 +529,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 +543,8 @@ const config = {
     //   }
     // }),
 
+
+    // SETUP symfony (rimuovere)
     // =>> plugins: HtmlWebpackInjectPreload
     // https://github.com/principalstudio/html-webpack-inject-preload
     ...(isDevelopment
@@ -515,8 +589,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 +605,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 +665,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 +780,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 +848,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
@@ -357,14 +367,20 @@ echo -e "\n${GREEN}...creating default folders${NC}"
 mkdir -p \
   "_private" \
   "${FRONTEND_INSTALL_PATH}" \
+  "${FRONTEND_INSTALL_PATH}/api" \
   "${FRONTEND_INSTALL_PATH}/assets" \
-  "${FRONTEND_INSTALL_PATH}/src" \
   "${FRONTEND_INSTALL_PATH}/css" \
-  "${FRONTEND_INSTALL_PATH}/tpl" \
+  "${FRONTEND_INSTALL_PATH}/email" \
+  "${FRONTEND_INSTALL_PATH}/error-pages" \
+  "${FRONTEND_INSTALL_PATH}/favicons" \
   "${FRONTEND_INSTALL_PATH}/icons" \
   "${FRONTEND_INSTALL_PATH}/imgs" \
-  "${FRONTEND_INSTALL_PATH}/favicons" \
-  "${FRONTEND_INSTALL_PATH}/error-pages"
+  "${FRONTEND_INSTALL_PATH}/src" \
+  "${FRONTEND_INSTALL_PATH}/src/components" \
+  "${FRONTEND_INSTALL_PATH}/src/js" \
+  "${FRONTEND_INSTALL_PATH}/src/pages" \
+  "${FRONTEND_INSTALL_PATH}/src/web-components" \
+  "${FRONTEND_INSTALL_PATH}/tpl"
 
 
 
@@ -425,11 +441,6 @@ force_cat "${MINIMO_PKG_DIR}/src/minimo.css" "${FRONTEND_INSTALL_PATH}/css/index
 force_cat "${MINIMO_PKG_DIR}/dev-tools/design-tokens-builder/tokens-config-sample.mjs" "${FRONTEND_INSTALL_PATH}/css/tokens-config.mjs"
 
 
-
-# favicons: config di default per `npx create-favicons`
-force_cat "${MINIMO_PKG_DIR}/dev-tools/create-favicons/src/default-params.mjs" "${FRONTEND_INSTALL_PATH}/favicons/create-favicons-cfg.mjs"
-
-
 if [ ${#selectedOptionalDevPkgs[@]} -gt 0 ] || [ ${#selectedOptionalDepPkgs[@]} -gt 0 ]; then
   echo -e "\n${YELLOW}Pacchetti opzionali installati:${NC}"
   for pkg in "${selectedOptionalDevPkgs[@]}" "${selectedOptionalDepPkgs[@]}"; do