main: reload postcss when editing mustache

main/styleguide/gulpfile.js

@@ -230,6 +230,8 @@ function watch () {
     resolvePath(paths().source.js) + "/**/*.vue",
   ];
   const postcssPaths = [
+    // resolvePath(paths().source._patterns) + "/**/*.mustache",
+    // resolvePath(paths().source._patterns) + "/**/**/*.mustache",
     resolvePath(paths().source.css) + "/*.pcss",
     resolvePath(paths().source.css) + "/**/*.pcss",
   ];
@@ -264,7 +266,7 @@ function watch () {
       resolvePath(paths().source.styleguide) + "/**/*.*",
     ],
     {useFsEvents: false},
-    gulp.series("pl-copy:styleguide", "pl-copy:styleguide-css", reloadCSS)
+    gulp.series("pl-copy:styleguide", "pl-copy:styleguide-css", reloadCSS),
   );
 
   var patternWatches = [
@@ -279,7 +281,9 @@ function watch () {
 
   console.log("Watching following Pattern Lab files:", patternWatches);
 
-  gulp.watch(patternWatches, {useFsEvents: false}, gulp.series(build, reload));
+  gulp.watch(patternWatches, {useFsEvents: false},
+    gulp.series(build, reload, "tailwind-postcss", reloadCSS)
+  );
 }
 
 gulp.task(

main/styleguide/package.json

@@ -21,7 +21,6 @@
     "make-version": "scripts/make-version.sh",
     "update-iconset": "scripts/update-iconset.js"
   },
-  "license": "MIT",
   "engines": {
     "node": ">=16.0"
   },

main/styleguide/source/_patterns/molecules/photo_header.mustache

+<header
+  class="bg-black flex items-center header-clip photo-header mb-36 w-full"
+  style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
+>
+  <div class="container--narrow flex items-center pt-40">
+    <h1 class="font-alt text-white">
+      <span class="text-2xl">Ing.</span><br>
+      <span class="font-alt text-7xl">Ivan Bartoš</span>
+      <span class="text-2xl">,PhDr. et PhD</span><br>
+      <span class="font-alt">Prezident České republiky</span>
+    </h1>
+  </div>
+</header>

main/styleguide/source/_patterns/pages/person.mustache

+{{> templates-person }}

main/styleguide/source/_patterns/templates/person.mustache

+{{> organisms-header }}
+
+{{> molecules-photo_header }}
+
+<main role="main">
+  <div class="container--narrow">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada.</p>
+  </div>
+</main>
+{{> organisms-footer }}

main/styleguide/source/css/molecules/photo_header.pcss

+.photo-header {
+  height: 36rem;
+}

main/styleguide/source/css/style.pcss

@@ -25,6 +25,7 @@
 
 @import "./molecules/contact_box.pcss";
 @import "./molecules/person_box.pcss";
+@import "./molecules/photo_header.pcss";
 @import "./molecules/sliding_button.pcss";
 
 @import "./organisms/footer.pcss";