@profitlich/template-toolkit 3.1.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "3.1.0",
+    "version": "4.0.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -20,7 +20,8 @@
         "./utils/ImagesLoaded": "./utils/images-loaded/ImagesLoaded.js",
         "./scripts/copy-files": "./scripts/copy-files.js",
         "./scripts/deploy": "./scripts/deploy.js",
-        "./vite/jsonToScss": "./vite/jsonToScss.js"
+        "./vite/jsonToScss": "./vite/jsonToScss.js",
+        "./vite/capsizeSassFunctions": "./vite/capsizeSassFunctions.js"
     },
     "files": [
         "components/",
@@ -40,9 +41,17 @@
         "lil-gui": "^0.21.0"
     },
     "peerDependencies": {
+        "@capsizecss/core": ">=4.0.0",
+        "@capsizecss/unpack": ">=2.0.0",
         "@mux/mux-player": ">=3.0.0"
     },
     "peerDependenciesMeta": {
+        "@capsizecss/core": {
+            "optional": true
+        },
+        "@capsizecss/unpack": {
+            "optional": true
+        },
         "@mux/mux-player": {
             "optional": true
         }

package/scss/core/layout.scss

@@ -4,6 +4,9 @@
 @use "sass:meta";
 @use "sass:math";
 
+// capsize-trims wird ggf. von Vite via preprocessorOptions.scss.functions bereitgestellt
+// (siehe createCapsizeFunctions in vite/capsizeSassFunctions.js).
+
 // Liest das optionale Top-Level Feld `vwBasis` aus der Konsumenten-config.
 // Default 'viewport' = bisheriges Verhalten (raw vw).
 // 'body' = calc(var(--vw-body, 1vw) * X) — skaliert mit scrollbar-freier Body-Breite.
@@ -81,13 +84,24 @@ $mediaqueries: (
 
 
 // Font
-@mixin font($layout, $fontSize, $lineHeight, $bold:'false') {
+@mixin font($layout, $fontSize, $lineHeight, $capsize: null) {
 
     font-size: size($layout, $fontSize);
     line-height: size($layout, $lineHeight);
 
-    @if ($bold != 'false') {
-        font-weight: $bold;
+    @if ($capsize != null) {
+        // capsize-pseudo-elements() ist eine Sass-Custom-Function aus dem Toolkit-Vite-Plugin.
+        // Ruft intern @capsizecss/core.createStyleObject auf und gibt eine Sass-Map
+        // mit allen Pseudo-Element-Stilen zurück. Inhalte (welche Pseudo-Elemente,
+        // welche Properties) kommen vollständig aus Capsize.
+        $pseudo: capsize-pseudo-elements($capsize, $fontSize, $lineHeight);
+        @each $selector-suffix, $props in $pseudo {
+            &#{$selector-suffix} {
+                @each $prop, $val in $props {
+                    #{$prop}: $val;
+                }
+            }
+        }
     }
 
 }

package/vite/capsizeSassFunctions.js

@@ -0,0 +1,92 @@
+import { fromFile } from '@capsizecss/unpack';
+import { createStyleObject } from '@capsizecss/core';
+import * as sass from 'sass';
+import { OrderedMap } from 'immutable';
+import path from 'path';
+
+/**
+ * Erzeugt ein Sass-functions-Objekt, das die Custom-Function
+ * `capsize-pseudo-elements($name, $fontSize, $lineHeight)` bereitstellt.
+ *
+ * Die Funktion ruft intern @capsizecss/core.createStyleObject auf und gibt
+ * eine Sass-Map mit allen Pseudo-Element-Stilen zurück. Beispiel-Struktur:
+ *
+ *     (
+ *       '::before': (content: '', margin-bottom: -0.123em, display: table),
+ *       '::after':  (content: '', margin-top: -0.456em, display: table),
+ *     )
+ *
+ * SCSS iteriert die Map und emittiert die Pseudo-Element-Regeln. Damit
+ * kommt das CSS-Schema (welche Properties, welche Pseudo-Elemente) komplett
+ * aus Capsize — Updates fliessen direkt durch.
+ *
+ * @param {Object<string,string>} fontFiles - Map: Font-Name → Pfad zur Font-Datei
+ * @returns {Promise<Object>} - functions-Objekt für preprocessorOptions.scss.functions
+ */
+export async function createCapsizeFunctions(fontFiles) {
+    const metrics = {};
+    for (const [name, file] of Object.entries(fontFiles)) {
+        metrics[name] = await fromFile(path.resolve(file));
+    }
+
+    return {
+        'capsize-pseudo-elements($name, $fontSize, $lineHeight)': (args) => {
+            const name = args[0].assertString('name').text;
+            const fontSize = args[1].assertNumber('fontSize').value;
+            const lineHeight = args[2].assertNumber('lineHeight').value;
+
+            const fontMetrics = metrics[name];
+            if (!fontMetrics) {
+                throw new Error(
+                    `capsize-pseudo-elements: Keine Metriken für Font "${name}" geladen. ` +
+                    `Verfügbar: ${Object.keys(metrics).join(', ') || '(keine)'}.`
+                );
+            }
+
+            // createStyleObject liefert font-size, line-height, ::before, ::after.
+            // Wir nehmen nur die Pseudo-Elemente — font-size/line-height
+            // werden im SCSS via size() aus vwBody erzeugt.
+            const styles = createStyleObject({ fontSize, leading: lineHeight, fontMetrics });
+
+            const entries = [];
+            for (const [key, val] of Object.entries(styles)) {
+                if (key.startsWith('::')) {
+                    entries.push([
+                        new sass.SassString(key, { quotes: false }),
+                        _objToSassMap(val),
+                    ]);
+                }
+            }
+            return new sass.SassMap(OrderedMap(entries));
+        }
+    };
+}
+
+// camelCase → kebab-case
+function _toKebab(s) {
+    return s.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+}
+
+// JS-Wert (number | string) → Sass-Wert (SassNumber | SassString)
+function _jsValueToSass(value) {
+    if (typeof value === 'number') {
+        return new sass.SassNumber(value);
+    }
+    if (typeof value === 'string') {
+        const m = value.match(/^(-?\d*\.?\d+)([a-z%]+)$/);
+        if (m) {
+            return new sass.SassNumber(parseFloat(m[1]), m[2]);
+        }
+        return new sass.SassString(value, { quotes: false });
+    }
+    throw new Error(`capsize-pseudo-elements: unerwarteter Wert-Typ ${typeof value}`);
+}
+
+// JS-Objekt {camelCaseKey: value} → Sass-Map (kebab-case-key, SassValue)
+function _objToSassMap(obj) {
+    const entries = Object.entries(obj).map(([key, val]) => [
+        new sass.SassString(_toKebab(key), { quotes: false }),
+        _jsValueToSass(val),
+    ]);
+    return new sass.SassMap(OrderedMap(entries));
+}