@massimo-cassandro/minimo 1.44.0 → 1.45.0

package/dev-tools/custom-media-builder/README.md

@@ -0,0 +1,11 @@
+# Custom media builder
+
+Genera il file css delle @custom-media a partire da un modulo JS che esporta
+(default) un oggetto { nome: media-query } e un un secondo oggetto breakpoint.js
+per la condivisione dei breakpoiunt in js, vedi `src/custom-media.js`.
+
+Uso da riga di comando (percorsi relativi alla directory corrente):
+
+```bash
+node custom-media-builder.mjs [--src=./app/css/custom-media.js] [--dest=<src con estensione .css>]
+```

package/dev-tools/custom-media-builder/custom-media-builder.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
+import { pathToFileURL } from 'url';
+
+/**
+ * Genera il file css delle @custom-media.
+ * Il file viene riscritto solo se il contenuto è cambiato,
+ * per non attivare inutilmente il watcher di webpack.
+ *
+ * @param {object} [options]
+ * @param {string} [options.src] modulo JS con l'export default delle custom media
+ * @param {string} [options.dest] file css da generare (default: file in `src` con estensione cambiata in `.css`)
+ * @returns {Promise<boolean>} `true` se il file è stato riscritto
+ *
+ * @example
+ * await buildCustomMedia({
+ *   src: './app/css/custom-media.js',
+ *   dest: './app/css/custom-media.css',
+ * });
+ */
+export async function buildCustomMedia({
+  src = './app/css/custom-media.js',
+  dest = null,
+} = {}) {
+
+  const srcPath = path.resolve(src),
+    destPath = path.resolve(dest ?? srcPath.replace(/\.m?js$/, '.css'));
+
+  const { default: customMedia } = await import(pathToFileURL(srcPath).href);
+
+  if (!customMedia || typeof customMedia !== 'object') {
+    throw new Error(`${src}: export default mancante o non valido`);
+  }
+
+  const rows = Object.entries(customMedia).map(([name, query]) => {
+    if (typeof query !== 'string' || !query.trim()) {
+      throw new Error(`${src}: valore non valido per "${name}"`);
+    }
+    return `@custom-media --${name.replace(/^--/, '')} ${query.trim()};`;
+  });
+
+  const content = '/* File generato da custom-media-builder.mjs a partire da ' +
+    `${path.basename(srcPath)}. Eventuali modifich andranno perdute */\n\n` +
+    rows.join('\n') + '\n';
+
+  if (fs.existsSync(destPath) && fs.readFileSync(destPath, 'utf8') === content) {
+    return false;
+  }
+
+  fs.writeFileSync(destPath, content);
+  return true;
+}
+
+// esecuzione da riga di comando
+if (process.argv[1] && import.meta.url === pathToFileURL(path.resolve(process.argv[1])).href) {
+  const args = Object.fromEntries(
+    process.argv.slice(2)
+      .map(arg => arg.match(/^--(src|dest)=(.+)$/))
+      .filter(Boolean)
+      .map(([, key, value]) => [key, value])
+  );
+
+  try {
+    const written = await buildCustomMedia(args);
+    console.log(written ? 'custom media: file aggiornato' : 'custom media: nessuna modifica');
+  } catch (err) {
+    console.error(err.message);
+    process.exit(1);
+  }
+}

package/dev-tools/starter-kit/source_files/root/_sf/templates/_incl/minimo-form-layout.html.twig

@@ -1,8 +1,8 @@
 {#
-  Bootstrap 5 Symfony form layout
+  minimo form layout (ex bs5)
   =======================================
   Massimo Cassandro
-  https://github.com/massimo-cassandro/symfony-bootstrap-form-theme
+  v. 2.1
 #}
 
 {#
@@ -112,11 +112,17 @@
     {% set params = {} %}
   {%- endif -%}
   {%- if params.container_attr is not defined %}
-    {% set params = params|merge({container_attr: {}}) %}
+    {% set params = params|merge({container_attr: {} }) %}
   {%- endif -%}
 
   {% set params = params|merge({
-    container_attr: params.container_attr|merge({ class: (params.container_attr.class|default('') ~ (compound|default()? ' form-collection-fset form-group' : ' form-group'))|trim })
+    container_attr: params.container_attr
+      |merge({
+        class: (
+          container_class|default('') ~ ' ' ~
+          params.container_attr.class|default('') ~
+            (compound|default()? ' form-collection-fset form-group' : ' form-group')
+        )|trim })
   }) %}
 
   {%- if disabled is defined and disabled %}

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

@@ -31,6 +31,7 @@
     "create-favicons": "npx create-favicons --dir=./app/favicons",
     "python server": "python3 -m http.server [[port8000]] # --directory __dirname__ # 8000 = default port",
     "node server": "node serve # richiede ‘npm i serve’",
+    "build custom media": "npx custom-media-builder --src=./app/css/custom-media.js",
     "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",

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

@@ -458,6 +458,7 @@ done
 MINIMO_PKG_DIR=./node_modules/@massimo-cassandro/minimo
 
 force_cat "${MINIMO_PKG_DIR}/src/custom-properties.css" "${FRONTEND_INSTALL_PATH}/css/minimo-custom-properties.css"
+force_cat "${MINIMO_PKG_DIR}/src/custom-media.js" "${FRONTEND_INSTALL_PATH}/css/custom-media.js"
 force_cat "${MINIMO_PKG_DIR}/src/custom-media.css" "${FRONTEND_INSTALL_PATH}/css/custom-media.css"
 
 # entry css principale del progetto: copia diretta di minimo.css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./src/index.js",
@@ -34,6 +34,7 @@
     "upd@m": "dev-tools/upd@m/index.mjs",
     "svgIconsTools": "dev-tools/svg-icons-tools/index.mjs",
     "create-favicons": "dev-tools/create-favicons/index.mjs",
+    "custom-media-builder": "dev-tools/custom-media-builder/custom-media-builder.mjs",
     "starter-kit": "dev-tools/starter-kit/starter-install.sh"
   },
   "repository": {
@@ -47,6 +48,7 @@
     "build-margin-padding-css": "node ./scripts/build-margin-padding-css.mjs",
     "generate:types": "node ./scripts/generate-class-types.mjs",
     "prepublishOnly": "npm run generate:types",
+    "build custom media": "node ./dev-tools/custom-media-builder/custom-media-builder.mjs --src=./src/custom-media.js",
     "check unresolved props": "node ./dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs",
     "test": "node --test \"test/**/*.test.mjs\"",
     "test sideEffects tree-shaking": "node ./test/sideEffects-tree-shaking/run-test.mjs",

package/src/css/forms/forms.css

@@ -151,6 +151,7 @@ input[type='checkbox'] {
   display: block;
   padding-left: 1.5em;
   margin-block-start: var(--size-sm);
+  break-inside: avoid;
 
   .form-check-input {
     float: left;

package/src/custom-media.css

@@ -1,40 +1,17 @@
-/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
-   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
-   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
-   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
-   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
-   "large" = "small desktop") e non si riducono in modo pulito a poche
-   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
-   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
-   file margin-padding-*-media.css) ed è parte di un template pensato per
-   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
-   già in uso nei progetti che lo hanno importato. */
-
-/*
-90rem    : 1440px xxlarge (large desktop)
-80rem    : 1280px xlarge (desktop)
-64rem    : 1024px large (small desktop)
-47.5rem  : 760px  medium (tablet)
-25rem    : 400px  small (phone)
-
-tablet alt:
-53.75rem : 860px  medium (tablet)
-*/
+/* File generato da custom-media-builder.mjs a partire da custom-media.js: NON MODIFICARE DIRETTAMENTE */
 
 @custom-media --media-xxlarge-viewport-up (width >= 90rem);
 @custom-media --media-xlarge-viewport-up (width >= 80rem);
 @custom-media --media-large-viewport-up (width >= 64rem);
 @custom-media --media-medium-viewport-up (width >= 47.5rem);
 @custom-media --media-small-viewport-up (width >= 25rem);
-
 @custom-media --media-xxlarge-viewport-only (width >= 90rem);
-@custom-media --media-xlarge-viewport-only (64rem < width <= 80rem);
-@custom-media --media-large-viewport-only (64rem < width <= 80rem);
-@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
-@custom-media --media-small-viewport-only (width <= 47.5rem);
-
-@custom-media --media-xxlarge-viewport-down (max-width: 90rem);
-@custom-media --media-xlarge-viewport-down (max-width: 80rem);
-@custom-media --media-large-viewport-down (max-width: 64rem);
-@custom-media --media-medium-viewport-down (max-width: 47.5rem);
-@custom-media --media-small-viewport-down (max-width: 25rem);
+@custom-media --media-xlarge-viewport-only (80rem <= width < 90rem);
+@custom-media --media-large-viewport-only (64rem <= width < 80rem);
+@custom-media --media-medium-viewport-only (47.5rem <= width < 64rem);
+@custom-media --media-small-viewport-only (width < 47.5rem);
+@custom-media --media-xxlarge-viewport-down (width < 90rem);
+@custom-media --media-xlarge-viewport-down (width < 80rem);
+@custom-media --media-large-viewport-down (width < 64rem);
+@custom-media --media-medium-viewport-down (width < 47.5rem);
+@custom-media --media-small-viewport-down (width < 25rem);

package/src/custom-media.js

@@ -0,0 +1,72 @@
+/*
+Definizioni delle custom media del progetto: unica fonte dei breakpoint,
+usata sia per generare custom-media.css (vedi custom-media-builder.mjs,
+`npm run "build custom media"`) sia direttamente in JS.
+
+NB: dopo ogni modifica rigenerare custom-media.css (la generazione è
+comunque eseguita all'avvio delle build webpack DEV e PROD).
+
+I valori sono duplicati nei `media` scritti a mano dei template Twig
+(home.html.twig e home_incl/hero.incl.html.twig): vanno aggiornati a mano.
+
+90rem    : 1440px xxlarge (large desktop)
+80rem    : 1280px xlarge (desktop)
+64rem    : 1024px large (small desktop)
+47.5rem  : 760px  medium (tablet)
+25rem    : 400px  small (phone)
+
+tablet alt:
+53.75rem : 860px  medium (tablet)
+*/
+
+/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
+   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
+   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
+   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
+   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
+   "large" = "small desktop") e non si riducono in modo pulito a poche
+   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
+   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
+   file margin-padding-*-media.css) ed è parte di un template pensato per
+   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
+   già in uso nei progetti che lo hanno importato. */
+
+export const breakpoints = {
+  xxlarge: '90rem',
+  xlarge: '80rem',
+  large: '64rem',
+  medium: '47.5rem',
+  small: '25rem',
+};
+
+const bp = breakpoints;
+
+/**
+ * Custom media del progetto: chiave = nome della custom media (senza `--`),
+ * valore = media query.
+ *
+ * @example
+ * import customMedia from './custom-media.js';
+ * const mql = matchMedia(customMedia['media-medium-viewport-up']); // '(width >= 47.5rem)'
+ */
+const customMedia = {
+  'media-xxlarge-viewport-up': `(width >= ${bp.xxlarge})`,
+  'media-xlarge-viewport-up': `(width >= ${bp.xlarge})`,
+  'media-large-viewport-up': `(width >= ${bp.large})`,
+  'media-medium-viewport-up': `(width >= ${bp.medium})`,
+  'media-small-viewport-up': `(width >= ${bp.small})`,
+
+  'media-xxlarge-viewport-only': `(width >= ${bp.xxlarge})`,
+  'media-xlarge-viewport-only': `(${bp.xlarge} <= width < ${bp.xxlarge})`,
+  'media-large-viewport-only': `(${bp.large} <= width < ${bp.xlarge})`,
+  'media-medium-viewport-only': `(${bp.medium} <= width < ${bp.large})`,
+  'media-small-viewport-only': `(width < ${bp.medium})`,
+
+  'media-xxlarge-viewport-down': `(width < ${bp.xxlarge})`,
+  'media-xlarge-viewport-down': `(width < ${bp.xlarge})`,
+  'media-large-viewport-down': `(width < ${bp.large})`,
+  'media-medium-viewport-down': `(width < ${bp.medium})`,
+  'media-small-viewport-down': `(width < ${bp.small})`,
+};
+
+export default customMedia;