@massimo-cassandro/minimo 1.36.0 → 1.36.2

package/dev-tools/starter-kit/source_files/app/email/_mail-properties.scss

@@ -0,0 +1,18 @@
+$mail-font-size-xs: 13px;
+$mail-font-size-lg: 18px;
+$mail-font-size-2lg: 21px;
+$mail-font-size-3lg: 24px;
+$mail-font-size-xl: 28px;
+
+$mail-body-font: 'Aptos', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+$mail-font-monospace: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+$mail-body-bg: #efefef;
+$mail-text-color: #333;
+$mail-text-color-light: #373737;
+$mail-gray: #4b4a4a;
+
+$mail-content-bg: #fff;
+$mail-spacing: 24px;
+
+$mail-alt-color: #036;
+$mail-darken-alt-color: #010112;

package/dev-tools/starter-kit/source_files/app/email/mail-embed.scss

@@ -0,0 +1,68 @@
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable property-no-vendor-prefix */
+@use './mail-properties' as *;
+
+/* NB: niente selettore universale `*`: inline_css lo inlinerebbe su ogni elemento */
+body,
+table,
+td,
+p,
+a {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+/*
+  gli stili base dei link sono già in mail-inline;
+  qui serve !important perché lo style inline batte l'hover
+*/
+.content.body a:hover {
+  color: $mail-darken-alt-color !important;
+}
+
+@media only screen and (max-width: 640px)  {
+  body {
+    &[class='yahoo-fix'] {
+      .device-width {
+        width: 440px !important;
+      }
+    }
+  }
+
+  .content {
+    &.columns-wrapper {
+      td.column-spacer {
+        height: 0 !important;
+      }
+
+      td.column-width, td.column-spacer  {
+        display: block !important;
+        width: 100% !important;
+      }
+      .column-content {
+        & td {
+          & h2 {
+            font-size: $mail-font-size-3lg !important;
+          }
+          & .text {
+            font-size: $mail-font-size-lg !important;
+          }
+          & .buttons {
+            font-size: $mail-font-size-2lg !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 479px) {
+  body {
+    &[class='yahoo-fix'] {
+      .device-width {
+        width: 280px !important;
+      }
+    }
+  }
+}
+

package/dev-tools/starter-kit/source_files/app/email/mail-inline.scss

@@ -0,0 +1,203 @@
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable selector-max-id */
+/* stylelint-disable property-no-unknown */
+@use './mail-properties' as *;
+
+body {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: $mail-body-font;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  color: $mail-text-color;
+  background-color: $mail-body-bg;
+  -webkit-font-smoothing: antialiased;
+
+  .device-width {
+    width: 600px;
+    padding: 0;
+  }
+
+  /* .full-width {
+    width: 100%;
+    padding: 0;
+  } */
+}
+
+/*
+div.outerWrapper {
+	background-color: $mail-content-bg;
+	//border-radius:20px;
+	overflow: hidden;
+	margin: 0 auto;
+}
+*/
+
+table {
+  border-collapse: collapse;
+}
+
+p {
+  mso-table-lspace: 0;
+  mso-table-rspace: 0;
+  margin-top: $mail-spacing * .5;
+  margin-bottom: $mail-spacing * .5;
+}
+
+#wrapper{
+  width: 100%;
+  margin: 0 auto;
+  border: none;
+
+  /* &.full-page{
+    width: 95%;
+  } */
+
+  > tbody > tr > td {
+    width: 100%;
+    padding-top: 10px;
+    padding-bottom: 20px;
+    background-color: $mail-body-bg;
+    border: none;
+  }
+}
+
+.content {
+  margin: 0 auto;
+
+  &.header {
+    > tbody > tr > td {
+      padding: 10px;
+      text-align: center;
+      background-color: $mail-body-bg;
+
+      > img {
+        display: inline-block;
+        max-width: 100%;
+        height: auto;
+      }
+    }
+    .logo {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+
+  &.body {
+    > tbody > tr > td {
+
+      padding-top: 20px;
+      padding-right: 30px;
+      padding-bottom: 20px;
+      padding-left: 30px;
+      font-size: $mail-font-size-lg;
+      vertical-align: top;
+      color: $mail-text-color;
+      background-color: $mail-content-bg;
+
+
+      a {
+        font-weight: 700;
+        color: $mail-alt-color;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      h1 {
+        margin-top: 0;
+        margin-bottom: $mail-spacing;
+        font-size: $mail-font-size-xl;
+        font-weight: 700;
+      }
+
+      h2 {
+        margin-top: $mail-spacing;
+        margin-bottom: 12px;
+        font-size: $mail-font-size-2lg;
+        font-weight: 700;
+
+      }
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+    }
+  }
+
+
+  &.footer {
+    > tbody > tr > td {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      font-size: 80%;
+      color: $mail-text-color-light;
+      text-align: center;
+      background-color: $mail-body-bg;
+    }
+  }
+}
+
+
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-left {
+  text-align: left;
+}
+.small, small {
+  font-size: $mail-font-size-xs;
+}
+.text-monospace {
+  font-family: $mail-font-monospace;
+}
+.text-muted {
+  color: #666;
+}
+
+
+em, i {
+  font-style: italic;
+}
+strong, b {
+  font-weight: 700;
+}
+
+/* body content table */
+.table {
+  width: 100%;
+  margin: 12px 0 24px;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 6px 10px;
+    font-size: $mail-font-size-lg;
+    vertical-align: top;
+    text-align: left;
+    border-bottom: 1px solid $mail-gray;
+  }
+  th {
+    font-weight: 600;
+  }
+
+  thead {
+    th {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+/* dopo .table, altrimenti il suo margin sovrascrive queste utility */
+.margin-top {
+  margin-top: $mail-spacing;
+}
+.margin-bottom {
+  margin-bottom: $mail-spacing;
+}

package/dev-tools/starter-kit/source_files/app/email/readme.md

@@ -0,0 +1,26 @@
+# CSS email
+
+## Versione SCSS
+
+Richiede `sass`, compilazione in `templates/email/css/`:
+
+```bash
+npm i -D sass
+```
+
+```bash
+npm run 'email sass'
+```
+
+## Versione PostCSS
+
+
+```bash
+npm i -D postcss postcss-cli postcss-import postcss-nested postcss-custom-properties autoprefixer cssnano
+```
+
+```bash
+npm run 'postcss email'
+```
+
+

package/dev-tools/starter-kit/source_files/app/email/{_mail-properties.css → versione postcss/_mail-properties.css }

@@ -1,15 +1,13 @@
-/* @import url(../src/css/custom-properties.css); */
-
 :root {
 
   --mail-font-size-xs: 13px;
-  --mail-font-size: 16px;
   --mail-font-size-lg: 18px;
   --mail-font-size-2lg: 21px;
   --mail-font-size-3lg: 24px;
   --mail-font-size-xl: 28px;
 
-  --mail-body-font: helvetica, arial, sans-serif;
+  --mail-body-font: 'Aptos', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  --mail-font-monospace: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
   --mail-body-bg: #efefef;
   --mail-text-color: #333;
   --mail-text-color-light: #373737;
@@ -21,6 +19,5 @@
 
   --mail-alt-color: #036;
   --mail-darken-alt-color: #010112;
-  --mail-link-color: #036;
 
 }

package/dev-tools/starter-kit/source_files/app/email/{mail-embed.css → versione postcss/mail-embed.css }

@@ -1,22 +1,21 @@
 /* stylelint-disable declaration-no-important */
 @import './_mail-properties.css';
 
-/* NB: niente selettore universale `*`: inline_css inlinerebbe la regola su ogni elemento */
-body, table, td, p, a { text-size-adjust: 100%; }
-
-.content {
-  &.body {
-    a {
-      font-weight: 700;
-      color: var(--mail-alt-color);
-      text-decoration: underline;
-      cursor: pointer;
+/* NB: niente selettore universale `*`: inline_css lo inlinerebbe su ogni elemento */
+body,
+table,
+td,
+p,
+a {
+  text-size-adjust: 100%;
+}
 
-      &:hover {
-        color: var(--mail-darken-alt-color);
-      }
-    }
-  }
+/*
+  gli stili base dei link sono già in mail-inline;
+  qui serve !important perché lo style inline batte l'hover
+*/
+.content.body a:hover {
+  color: var(--mail-darken-alt-color) !important;
 }
 
 @media only screen and (max-width: 640px)  {

package/dev-tools/starter-kit/source_files/app/email/{mail-inline.css → versione postcss/mail-inline.css }

@@ -59,9 +59,7 @@ p {
   > tbody > tr > td {
     width: 100%;
     padding-top: 10px;
-    padding-right: 10px;
     padding-bottom: 20px;
-    padding-left: 10px;
     background-color: var(--mail-body-bg);
     border: none;
   }
@@ -74,7 +72,7 @@ p {
     > tbody > tr > td {
       padding: 10px;
       text-align: center;
-      background: var(--mail-body-bg);
+      background-color: var(--mail-body-bg);
 
       > img {
         display: inline-block;
@@ -89,73 +87,61 @@ p {
   }
 
   &.body {
+    > tbody > tr > td {
+
+      padding-top: 20px;
+      padding-right: 30px;
+      padding-bottom: 20px;
+      padding-left: 30px;
+      font-size: var(--mail-font-size-lg);
+      vertical-align: top;
+      color: var(--mail-text-color);
+      background-color: var(--mail-content-bg);
+
+
+      a {
+        font-weight: 700;
+        color: var(--mail-alt-color);
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      h1 {
+        margin-top: 0;
+        margin-bottom: var(--mail-spacing);
+        font-size: var(--mail-font-size-xl);
+        font-weight: 700;
+      }
+
+      h2 {
+        margin-top: var(--mail-spacing);
+        margin-bottom: 12px;
+        font-size: var(--mail-font-size-2lg);
+        font-weight: 700;
 
-    > tbody > tr {
-      > td {
-
-        padding-top: 20px;
-        padding-right: 30px;
-        padding-bottom: 20px;
-        padding-left: 30px;
-        vertical-align: top;
-        color: var(--mail-text-color);
-        background-color: var(--mail-content-bg);
-
-        a {
-          font-weight: 700;
-          color: var(--mail-alt-color);
-          text-decoration: underline;
-          cursor: pointer;
-
-          &:hover {
-            color: var(--mail-darken-alt-color);
-          }
-        }
-
-        h1 {
-          margin-top: 0;
-          margin-bottom: var(--mail-spacing);
-          font-size: var(--mail-font-size-xl);
-          font-weight: 700;
-        }
-
-        p {
-          font-size: var(--mail-font-size-2lg);
-        }
-
-        img {
-          max-width: 100%;
-          height: auto;
-        }
+      }
 
+      img {
+        max-width: 100%;
+        height: auto;
       }
+
     }
   }
 
+
   &.footer {
-    td {
+    > tbody > tr > td {
       padding-top: 10px;
       padding-bottom: 10px;
       font-size: 80%;
       color: var(--mail-text-color-light);
       text-align: center;
-      background: var(--mail-body-bg);
+      background-color: var(--mail-body-bg);
     }
   }
 }
 
-.logo-network {
-  display: inline-block;
-  padding: 5px;
-  margin: 10px auto;
-  background-color: var(--mail-body-bg);
-}
-.network-info {
-  font-size: var(--mail-font-size-xs);
-  font-style: italic;
-  color: #888;
-}
-
 
 .text-center {
   text-align: center;
@@ -169,14 +155,8 @@ p {
 .small, small {
   font-size: var(--mail-font-size-xs);
 }
-.margin-top {
-  margin-top: var(--mail-spacing);
-}
-.margin-bottom {
-  margin-bottom: var(--mail-spacing);
-}
 .text-monospace {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-family: var(--mail-font-monospace);
 }
 .text-muted {
   color: #666;
@@ -198,6 +178,7 @@ strong, b {
 
   th, td {
     padding: 6px 10px;
+    font-size: var(--mail-font-size-lg);
     vertical-align: top;
     text-align: left;
     border-bottom: 1px solid var(--mail-gray);
@@ -212,3 +193,11 @@ strong, b {
     }
   }
 }
+
+/* dopo .table, altrimenti il suo margin sovrascrive queste utility */
+.margin-top {
+  margin-top: var(--mail-spacing);
+}
+.margin-bottom {
+  margin-bottom: var(--mail-spacing);
+}

package/dev-tools/starter-kit/source_files/app/email/{postcss.config.mjs → versione postcss/postcss.config.mjs }

@@ -1,4 +1,4 @@
-// config postcss per le CSS delle email (npm run "css email")
+// config postcss per le CSS delle email (npm run "postcss email")
 // NB: in ESM perché postcss-nested >= 8 è ESM-only
 //
 // https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#readme

package/{snippets/twig-symfony → dev-tools/starter-kit/source_files/root/_sf/templates}/_main-tpl.html.twig

@@ -12,7 +12,10 @@
     <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) #}
+    <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>
       {%- include '@public_path' ~ asset('layout.critical.css') -%}

package/dev-tools/starter-kit/source_files/root/{sf_templates → _sf/templates}/email/_email-tpl.html.twig

@@ -1,6 +1,6 @@
 {# template base per tutte le email #}
 {% apply inline_css(source('email/css/mail-inline.css')) %}
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="it">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -8,24 +8,23 @@
     <meta name="format-detection" content="telephone=no">
     <title>{% block title %}{% endblock %}</title>
     <style type="text/css">
-      {%- include 'email/css/mail-inline.css' -%}
-      {%- include 'email/css/mail-embed.css' -%}
+      {{- source('email/css/mail-embed.css') -}}
     </style>
   </head>
   <body class="yahoo-fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     {# Wrapper table #}
-    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" id="wrapper">
+    <table width="100%" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" id="wrapper">
       <tbody>
         <tr>
           <td width="100%">
             {# logo #}
-            <table class="content header device-width" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
+            <table class="content header device-width" width="600" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
               <tbody>
                 <tr>
                   <td class="logo" width="100%">
                     {% block logo %}
                       {# immagine allegata inline (cid:), vedi templates/email/imgs #}
-                      <img src="{{ email.image('email/imgs/logo-ict-governance-email.png', 'image/png', 'logo-ict-governance.png') }}" alt="ICT Governance" width="200" height="54" border="0">
+                      <img src="{{ email.image('email/imgs/logo-xxxx.png', 'image/png', 'logo-xxx.png') }}" alt="xxx" width="200" height="54" border="0">
                     {%- endblock %}
                   </td>
                 </tr>
@@ -33,7 +32,7 @@
             </table>
 
             {# content #}
-            <table class="content body device-width" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
+            <table class="content body device-width" width="600" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
               <tbody>
                 <tr>
                   <td>
@@ -47,10 +46,10 @@
             </table>
 
             {# footer #}
-            <table class="content footer device-width" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
+            <table class="content footer device-width" width="600" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
               <tbody>
                 <tr>
-                  <td>{% block footer %}Bluvacanze{%- endblock %}</td>
+                  <td>{% block footer %}xxx{%- endblock %}</td>
                 </tr>
               </tbody>
             </table>

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

@@ -16,7 +16,7 @@
 
       "@app/*": ["app/*"],
 
-      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"],
+      "@minimoSrc/*": ["./node_modules/@massimo-cassandro/minimo/src/*"],
       "@minimoCharts/*": ["./node_modules/@massimo-cassandro/minimo/charts/*"]
     }
   },

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

@@ -17,12 +17,15 @@
     "*.avif"
   ],
   "scripts": {
-    "progetto JS webpack DEV": "NODE_ENV=development webpack serve --config ./webpack.config.mjs #--open-app-name 'Google Chrome'",
+    "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/",
-    "progetto sf webpack DEV": "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`",
     "webpack PROD": "npm run 'UPD-version' && NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
+    "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",

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

@@ -1,3 +1,4 @@
+// v.3
 // import path from 'path';
 // import { fileURLToPath } from 'url';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';