@massimo-cassandro/minimo 1.11.1 → 1.12.1

package/dev-tools/webpack-setup/webpack-modules/css-rules.mjs

@@ -0,0 +1,177 @@
+// import path from 'path';
+// import { fileURLToPath } from 'url';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
+
+
+
+const postcssLoader = (isDevelopment, postcssConfig_path) => ({
+  loader: 'postcss-loader',
+  options: {
+    sourceMap: isDevelopment,
+    postcssOptions: {
+      // 'config' accetta un percorso assoluto (stringa) o un booleano
+      config: postcssConfig_path,
+    },
+  }
+});
+
+export function cssRules({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true,
+  postcssConfig_path
+}) {
+  const configOptions = { isDevelopment, useSass, inlineCssInDevMode, postcssConfig_path };
+
+
+  return [
+    // CSS modules
+    {
+      test: /\.module\.(sass|scss|css)$/i,
+      oneOf: [
+
+        // inserimento critical css con tag style al momento della build
+        {
+          test: /\.critical\.module\./i,
+          use: css_loaders({ ...configOptions, critical: true, css_modules: true }),
+        },
+
+        // inserimento css con tag style nel runtime
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true, css_modules: true }),
+        },
+        // comportamento standard
+        {
+          use: css_loaders({ ...configOptions, css_modules: true }),
+        },
+      ]
+    },
+    // CSS standard
+    {
+      test: /\.(sass|scss|css)$/i,
+      exclude: /\.module\.(sass|scss|css)$/i,
+      sideEffects: true,
+      oneOf: [
+
+        // raw content per web-components
+        {
+          resourceQuery: /raw/,
+          use: [
+            // exportType: 'string' sostituisce raw-loader deprecato
+            {
+              loader: 'css-loader',
+              options: {
+                exportType: 'string',
+                sourceMap: isDevelopment,
+                importLoaders: useSass? 2 : 1
+              }
+            },
+
+            postcssLoader(isDevelopment, postcssConfig_path),
+
+            ...(useSass ? [{
+              loader: 'sass-loader',
+              options: { sourceMap: isDevelopment }
+            }] : [])
+          ]
+        },
+
+        {
+          test: /\.critical\.(sass|scss|css)$/i,
+          use: css_loaders({ ...configOptions, critical: true }),
+        },
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true }),
+        },
+        {
+
+          use: css_loaders({ ...configOptions }),
+        }
+      ]
+    }
+  ];
+}
+
+function css_loaders({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true,
+  postcssConfig_path = postcssConfig_path,
+  css_modules = false,
+  critical = false,     // Iniezione statica nell'HTML
+  inline = false        // Iniezione dinamica via JS
+}) {
+
+  let mainLoader;
+
+  if (inline) {
+    // usa style-loader per la query string ?inline
+    mainLoader = {
+      loader: 'style-loader',
+      options: {
+        injectType: 'singletonStyleTag',
+        esModule: css_modules
+      }
+    };
+
+  } else if (critical) {
+    // usa MiniCssExtractPlugin per permettere al plugin HTML di leggerlo
+    mainLoader = MiniCssExtractPlugin.loader;
+
+  } else {
+    // compartamento standard
+    mainLoader = (isDevelopment && inlineCssInDevMode)
+      ? {
+        loader: 'style-loader',
+        options: {
+          injectType: 'singletonStyleTag',
+          // esModule: css_modules
+        }
+      }
+      : MiniCssExtractPlugin.loader;
+  }
+
+
+  return [
+    mainLoader,
+
+    {
+      loader: 'css-loader',
+      options: {
+        modules: css_modules
+          ? {
+            auto: true,
+            localIdentName: isDevelopment ? '[local]_[hash:base64:6]' : '[hash:base64:10]',
+            exportLocalsConvention: 'as-is',
+
+            // namedExport: false,
+            // exportOnlyLocals: false
+          }
+          : false,
+        sourceMap: isDevelopment,
+        importLoaders: useSass ? 2 : 1,
+      }
+    },
+
+    postcssLoader(isDevelopment, postcssConfig_path),
+
+    ...(useSass
+      ? [ {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: isDevelopment,
+          sassOptions: {
+            quietDeps: true,
+            silenceDeprecations: [ 'legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import' ],
+          }
+        }
+      } ]
+      : []
+    )
+  ];
+}

package/dev-tools/webpack-setup/webpack-modules/get-jsConfig-aliases.mjs

@@ -0,0 +1,33 @@
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Funzione per ottenere gli alias direttamente leggendo il file jsconfig.json
+ * @param {string} jsconfigAbsPath - Il percorso assoluto del file jsconfig.json
+ * @returns {Record<string, string>}
+ */
+
+export function getJsConfigAliases(jsconfigAbsPath) {
+
+  const baseDir = path.dirname(jsconfigAbsPath);
+
+  const fileContent = fs.readFileSync(jsconfigAbsPath, 'utf-8');
+  const jsconfig = JSON.parse(fileContent);
+
+  const aliases = {};
+  const paths = jsconfig.compilerOptions?.paths || {};
+
+  for (const item in paths) {
+    // Rimuove la wildcard /* alla fine della chiave (alias)
+    const key = item.replace(/(\/\*)$/, '');
+
+    // Prende il primo valore (path) e rimuove la wildcard /*
+    const targetPath = paths[item][0].replace(/(\/\*)$/, '');
+
+    const absolutePath = path.resolve(baseDir, targetPath);
+
+    aliases[key] = absolutePath;
+  }
+
+  return aliases;
+}

package/dev-tools/webpack-setup/webpack-modules/mini-svg-data-uri-loader.cjs

@@ -0,0 +1,25 @@
+// ./loaders/mini-svg-data-uri-loader.cjs
+// Questo file USA la libreria 'mini-svg-data-uri', ma è un wrapper specifico per Webpack.
+
+/* eslint-env node */
+// Nota: require perché i Webpack Loaders sono tradizionalmente CommonJS,
+// e Node.js li gestisce correttamente con l'estensione .cjs.
+const svgToMiniDataURI = require('mini-svg-data-uri');
+
+/**
+ * Webpack Loader che prende una stringa SVG e la converte in un
+ * Data URI compatto usando la libreria mini-svg-data-uri.
+ * @param {string} source - Contenuto SVG (già ottimizzato da svgo-loader)
+ * @returns {string} Il Data URI SVG compatto (formato stringa)
+ */
+module.exports = function (source) {
+
+  // rimuove height e width nel svgo non fosse attivato
+  source = source.replace(/ width="\d+"/, '').replace(/ height="\d+"/, '');
+  
+  // Richiama la funzione per ottenere l'URI compatto
+  const dataUri = svgToMiniDataURI(source);
+
+  // Ritorna la stringa Data URI
+  return dataUri;
+};

package/dev-tools/webpack-setup/webpack-modules/postcss.config.mjs

@@ -0,0 +1,77 @@
+// webpack-modules/postcss.config.mjs
+import path from 'path';
+import { fileURLToPath } from 'url';
+import globalData from '@csstools/postcss-global-data';
+import customMedia from 'postcss-custom-media';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import jitProps from 'postcss-jit-props';
+// import openProps from './modulo_cjs.cjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default (loaderContext) => {
+  const isDevelopment = loaderContext.mode === 'development';
+
+  const plugins = [
+    globalData({
+      files: [
+        // openProps.
+        path.resolve(__dirname, '../src/css/custom-properties.css'),
+        path.resolve(__dirname, '../src/css/custom-media.css'),
+      ]
+    }),
+
+    // https://github.com/GoogleChromeLabs/postcss-jit-props
+    // https://github.com/argyleink/open-props
+    // require('postcss-jit-props')(require('open-props')),
+    // require('postcss-jit-props')({
+    //   ...require('open-props'),
+    //   custom_selector: ':where(html)'
+    // }),
+    jitProps({
+      files: [
+        // ...openProps,
+        path.resolve(__dirname, '../src/css/custom-properties.css')
+      ],
+      custom_selector: ':where(html)'
+    }),
+
+    // per IOS < 17 (test)
+    // https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
+    // https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function#readme
+    // require('postcss-nesting')({
+    //  edition: '2021',
+    //  noIsPseudoSelector: true
+    //}),
+    // require('@csstools/postcss-light-dark-function')({preserve: false}), /* NB non funziona benissimo... */
+
+
+    // https://github.com/csstools/postcss-plugins/
+
+    customMedia({
+      preserve: isDevelopment
+    }),
+
+    // https://github.com/postcss/autoprefixer?tab=readme-ov-file#options
+    autoprefixer(),
+  ];
+
+  if (!isDevelopment) {
+    // per IOS < 17
+    // require('postcss-nesting')({
+    //  edition: '2021',
+    //  noIsPseudoSelector: true
+    //}),
+    // require('@csstools/postcss-light-dark-function'), /* NB non funziona benissimo... */
+
+
+    plugins.push(cssnano({ preset: 'default' }));
+  }
+
+
+  return {
+    plugins: plugins
+  };
+};

package/dev-tools/webpack-setup/webpack-modules/svg-rules.mjs

@@ -0,0 +1,154 @@
+/**
+ * Funzione per definire le regole per SVG
+ * @returns {import('webpack').RuleSetRule[]}
+ */
+
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+
+export function svgRules({
+  useSvgo = true,
+  useSvgr = false,
+  svgoConfig = null,
+  favicons_path_regexp = null,
+}) {
+
+  const this_filename = fileURLToPath(import.meta.url)
+    ,this_dirname = path.dirname(this_filename);
+
+  if(svgoConfig == null) {
+    useSvgo = false;
+  }
+
+  /**
+   * Restituisce i loader SVGO tenendo conto sia dell'opzione globale `useSvgo`
+   * sia delle modalità di opt-out per singolo file/import:
+   *
+   *  1. resourceQuery `?noSVGO` (combinabile con altre query):
+   *       import icon from './icon.svg?noSVGO';
+   *       import icon from './icon.svg?cssInline&noSVGO';
+   *
+   *  2. Suffisso `-noSVGO` nel nome file (si applica a tutti gli import di quel file):
+   *       import icon from './icon-noSVGO.svg';
+   *
+   * Il parametro `resourceQuery` è la stringa raw della query dell'import corrente
+   * (es. "?cssInline&noSVGO"). Quando non disponibile a compile-time, la verifica
+   * sul suffisso del file viene delegata a `test: /-noSVGO\.svg$/i` sulla regola.
+   *
+   * @param {boolean} [skipSvgo=false] - true se la regola ha già rilevato noSVGO
+   */
+  const svgoLoaders = (skipSvgo = false) =>
+    (useSvgo && !skipSvgo) ? [ { loader: 'svgo-loader', options: svgoConfig } ] : [];
+
+  /**
+   * Dato un set di condizioni (resourceQuery, test, ...) e i loader "core" della regola,
+   * restituisce una coppia di regole: una normale e una con `?noSVGO` che bypassa SVGO.
+   * Questo permette di combinare liberamente ?noSVGO con qualsiasi altra query.
+   *
+   * @param {object} baseRule  - la regola senza i loader SVGO
+   * @param {function} makeUse - funzione (skipSvgo: bool) => loader array
+   */
+  const withNoSVGOVariant = (baseRule, makeUse) => [
+    // Variante con ?noSVGO: stessa regola ma senza SVGO.
+    // La resourceQuery combina il match originale con la presenza di noSVGO.
+    {
+      ...baseRule,
+      resourceQuery: {
+        and: [ baseRule.resourceQuery, /noSVGO/ ],
+      },
+      use: makeUse(true),
+    },
+    // Variante normale (senza ?noSVGO).
+    {
+      ...baseRule,
+      use: makeUse(false),
+    },
+  ];
+
+  return [{
+    test: /(\.svg)$/i,
+    exclude: favicons_path_regexp?? undefined,
+    oneOf: [
+
+      // 1. svg inline dataUri per css (con `?cssInline`)
+      //    Supporta anche `?cssInline&noSVGO` per saltare SVGO su quel singolo import.
+      ...withNoSVGOVariant(
+        {
+          resourceQuery: /cssInline/, // ex inline-dataURI
+          type: 'asset/source',
+        },
+        (skipSvgo) => [
+          // Loader wrapper per Data URI compatto (Mini-SVG-Data-URI-Loader)
+          {
+            loader: path.resolve(this_dirname, './mini-svg-data-uri-loader.cjs'),
+          },
+          // Loader di ottimizzazione SVGO
+          ...svgoLoaders(skipSvgo),
+        ],
+      ),
+
+      // 2. as react component -> https://react-svgr.com/docs/webpack/
+      //    Supporta anche `?react&noSVGO`.
+      ...(useSvgr
+        ? withNoSVGOVariant(
+          {
+            resourceQuery: /react/,
+            issuer: /\.[jt]sx?$/,
+          },
+          (skipSvgo) => [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                ...((useSvgo && !skipSvgo)
+                  ? {
+                    svgo: true,
+                    svgoConfig: svgoConfig,
+                  }
+                  : {
+                    svgo: false,
+                  }
+                ),
+                // Altre opzioni utili di SVGR
+                // titleProp: true,
+                // ref: true,
+              },
+            },
+          ],
+        )
+        : []
+      ),
+
+      // 3. svg inline (con `?inline`)
+      //    Supporta anche `?inline&noSVGO`.
+      ...withNoSVGOVariant(
+        {
+          resourceQuery: /inline/,
+          type: 'asset/source',
+        },
+        (skipSvgo) => svgoLoaders(skipSvgo),
+      ),
+
+      // 4. svg file con suffisso `-noSVGO` nel nome (es. `icon-noSVGO.svg`).
+      //    Si applica a tutti gli import di quel file, senza bisogno di ?noSVGO.
+      {
+        test: /-noSVGO\.svg$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'imgs/[name].[contenthash][ext]'
+        },
+      },
+
+      // 5. svg file (copy image files to build folder)
+      {
+        type: 'asset/resource',
+        exclude: [ /cssInline/, /inline/ ],
+        sideEffects: true,
+        generator: {
+          filename: 'imgs/[name].[contenthash][ext]'
+        },
+      }
+    ]
+  }];
+}

package/dev-tools/webpack-setup/webpack-modules/svgo.config.mjs

@@ -0,0 +1,26 @@
+// svgo.config.js
+import addViewBox from 'svgo-add-viewbox';
+
+// https://svgo.dev/docs/plugins/
+export default {
+  multipass: true,
+  plugins: [
+    'removeDoctype'
+    , { ...addViewBox, params: { overwrite: false } }
+    , { name: 'cleanupIds', params: { remove: true, minify: true } }
+    , 'removeComments'
+    , 'removeTitle'
+    , 'removeDimensions'
+    , 'collapseGroups'
+    , { name: 'cleanupNumericValues', params: { floatPrecision: 4 } }
+    , { name: 'convertColors', params: { names2hex: true, rgb2hex: true } }
+    , 'removeStyleElement'
+    , 'removeEmptyContainers'
+    , { name: 'removeAttrs', params: { attrs: ['(filter|fill|stroke|class|style|data.*)'/* , 'svg:(width|height)' */] } }
+    // , { name: 'removeAttrs', params: { attrs: [ '(filter|fill|stroke|fill-rule|clip-rule|stroke-linecap|stroke-linejoin|stroke-width|transform|style|class|data.*)', 'svg:(width|height)' ] } }
+    , 'removeUselessDefs',
+    //, { name: 'addAttributesToSVGElement0, params: {attribute: "#{$attr}"}}
+    // , { name: 'addClassesToSVGElement', params: { className: 'line-icon'  } }
+    'removeUselessStrokeAndFill',
+  ]
+};

package/dev-tools/webpack-setup/webpack-template.ejs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <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">
+
+    <!-- favicons -->
+    <%= require('./favicons/output/favicons.incl.ejs')({}) %>
+    <!-- <%= require('./app/favicons/output/favicons.incl.ejs')({}) %> -->
+    <!-- <%= require('./frontend/favicons/output/favicons.incl.ejs')({}) %> -->
+
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <%= htmlWebpackPlugin.tags.headTags %> <!-- opzionale, param `inject: false` -->
+  </head>
+  <body>
+    <div id="root" class="wrapper"></div>
+    <%= htmlWebpackPlugin.tags.bodyTags %> <!-- opzionale, param `inject: false` -->
+  </body>
+</html>