@massimo-cassandro/minimo 1.11.1 → 1.12.0

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>