css-engine-test-pb 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export { makeStyles } from './makeStyles';
 export { makeResetStyles } from './makeResetStyles';
 export { mergeClasses } from './mergeClasses';
 export { makeStaticStyles } from './makeStaticStyles';
-export type { StyleRule, CSSProperties, GeneratedClasses, StyleSlots } from './types';
+export { makeFontFace } from './makeFontFace';
+export type { StyleRule, CSSProperties, GeneratedClasses, StyleSlots, FontFaceDefinition } from './types';

package/dist/index.js

@@ -6,3 +6,4 @@ export { makeStyles } from './makeStyles';
 export { makeResetStyles } from './makeResetStyles';
 export { mergeClasses } from './mergeClasses';
 export { makeStaticStyles } from './makeStaticStyles';
+export { makeFontFace } from './makeFontFace';

package/dist/makeFontFace.d.ts

@@ -0,0 +1,2 @@
+import type { FontFaceDefinition } from './types';
+export declare function makeFontFace(fonts: FontFaceDefinition | FontFaceDefinition[]): () => void;

package/dist/makeFontFace.js

@@ -0,0 +1,70 @@
+import { getGlobalEngine } from './engine';
+import { StyleBucket } from './types';
+export function makeFontFace(fonts) {
+    const engine = getGlobalEngine();
+    const fontsArray = Array.isArray(fonts) ? fonts : [fonts];
+    let inserted = false;
+    return function useFontFace() {
+        if (inserted) {
+            return;
+        }
+        fontsArray.forEach(font => {
+            const properties = [];
+            // Required properties
+            properties.push(`font-family: ${quoteIfNeeded(font.fontFamily)}`);
+            properties.push(`src: ${font.src}`);
+            // Optional properties
+            if (font.fontWeight !== undefined) {
+                properties.push(`font-weight: ${font.fontWeight}`);
+            }
+            if (font.fontStyle !== undefined) {
+                properties.push(`font-style: ${font.fontStyle}`);
+            }
+            if (font.fontDisplay !== undefined) {
+                properties.push(`font-display: ${font.fontDisplay}`);
+            }
+            if (font.unicodeRange !== undefined) {
+                properties.push(`unicode-range: ${font.unicodeRange}`);
+            }
+            if (font.fontStretch !== undefined) {
+                properties.push(`font-stretch: ${font.fontStretch}`);
+            }
+            if (font.fontVariant !== undefined) {
+                properties.push(`font-variant: ${font.fontVariant}`);
+            }
+            if (font.fontFeatureSettings !== undefined) {
+                properties.push(`font-feature-settings: ${font.fontFeatureSettings}`);
+            }
+            if (font.fontVariationSettings !== undefined) {
+                properties.push(`font-variation-settings: ${font.fontVariationSettings}`);
+            }
+            if (font.ascentOverride !== undefined) {
+                properties.push(`ascent-override: ${font.ascentOverride}`);
+            }
+            if (font.descentOverride !== undefined) {
+                properties.push(`descent-override: ${font.descentOverride}`);
+            }
+            if (font.lineGapOverride !== undefined) {
+                properties.push(`line-gap-override: ${font.lineGapOverride}`);
+            }
+            const cssRule = `@font-face { ${properties.join('; ')}; }`;
+            engine['insertion'].insertRule(cssRule, StyleBucket.RESET);
+        });
+        inserted = true;
+    };
+}
+function quoteIfNeeded(fontFamily) {
+    // If already quoted or is a generic family, return as-is
+    if (fontFamily.startsWith('"') || fontFamily.startsWith("'")) {
+        return fontFamily;
+    }
+    const genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui'];
+    if (genericFamilies.includes(fontFamily.toLowerCase())) {
+        return fontFamily;
+    }
+    // Quote font family names with spaces or special characters
+    if (/[\s\-]/.test(fontFamily)) {
+        return `"${fontFamily}"`;
+    }
+    return fontFamily;
+}

package/dist/makeStaticStyles.js

@@ -16,7 +16,14 @@ export function makeStaticStyles(styles) {
                     return `${kebabProp}: ${value};`;
                 })
                     .join(' ');
-                const cssRule = `${selector} { ${cssProperties} }`;
+                let cssRule;
+                // Handle @font-face specially - it's an at-rule, not a selector
+                if (selector === '@font-face') {
+                    cssRule = `@font-face { ${cssProperties} }`;
+                }
+                else {
+                    cssRule = `${selector} { ${cssProperties} }`;
+                }
                 engine['insertion'].insertRule(cssRule, StyleBucket.RESET);
             });
         });

package/dist/makeStyles.d.ts

@@ -1,2 +1,2 @@
 import { StyleSlots } from './types';
-export declare function makeStyles(slots: StyleSlots): () => import("./types").GeneratedClasses;
+export declare function makeStyles(slots: StyleSlots): () => Record<string, string>;

package/dist/types.d.ts

@@ -167,3 +167,18 @@ export type MakeStylesFunction = () => GeneratedClasses;
 export interface StyleSlots {
     [slotName: string]: StyleDefinition;
 }
+export interface FontFaceDefinition {
+    fontFamily: string;
+    src: string;
+    fontWeight?: CSSValue;
+    fontStyle?: 'normal' | 'italic' | 'oblique' | string;
+    fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    unicodeRange?: string;
+    fontStretch?: CSSValue;
+    fontVariant?: CSSValue;
+    fontFeatureSettings?: string;
+    fontVariationSettings?: string;
+    ascentOverride?: string;
+    descentOverride?: string;
+    lineGapOverride?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-engine-test-pb",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",