🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@react-email/font

Package Overview
Dependencies
Maintainers
3
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-email/font - npm Package Compare versions

Comparing version
0.0.9
 to
0.0.10
+1
dist/index.d.mts.map
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/font.tsx"],"sourcesContent":[],"mappings":";;;KAEK,YAAA;KAYA,UAAA;AAd+B,KAsB/B,UAAA,GAAa,KAAA,CAAM,aApBP,CAAA,YAAA,CAAA;AAAA,KAqBZ,SAAA,GAAY,KAAA,CAAM,aATR,CAAA,WAAA,CAAA;AAQV,UAGY,SAAA,CAHF;EACV;EAEY,UAAA,EAAS,MAAA;EAIJ;EAAe,kBAAA,EAAf,YAAe,GAAA,YAAA,EAAA;EAIzB;EAGE,OAAA,CAAA,EAAA;IAEC,GAAA,EAAA,MAAA;IAAU,MAAA,EALb,UAKa;EAIZ,CAAA;EAAwB;EAAT,SAAA,CAAA,EANd,SAMc;EAAT;EAAQ,UAAA,CAAA,EAJZ,UAIY;;;cAAd,MAAM,KAAA,CAAM,GAAG,SAAS"}
+1
dist/index.d.ts.map
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/font.tsx"],"sourcesContent":[],"mappings":";;;KAEK,YAAA;KAYA,UAAA;AAd+B,KAsB/B,UAAA,GAAa,KAAA,CAAM,aApBP,CAAA,YAAA,CAAA;AAAA,KAqBZ,SAAA,GAAY,KAAA,CAAM,aATR,CAAA,WAAA,CAAA;AAQV,UAGY,SAAA,CAHF;EACV;EAEY,UAAA,EAAS,MAAA;EAIJ;EAAe,kBAAA,EAAf,YAAe,GAAA,YAAA,EAAA;EAIzB;EAGE,OAAA,CAAA,EAAA;IAEC,GAAA,EAAA,MAAA;IAAU,MAAA,EALb,UAKa;EAIZ,CAAA;EAAwB;EAAT,SAAA,CAAA,EANd,SAMc;EAAT;EAAQ,UAAA,CAAA,EAJZ,UAIY;;;cAAd,MAAM,KAAA,CAAM,GAAG,SAAS"}
+1
dist/index.mjs.map
{"version":3,"file":"index.mjs","names":["Font: React.FC<Readonly<FontProps>>"],"sources":["../src/font.tsx"],"sourcesContent":["import type * as React from 'react';\n\ntype FallbackFont =\n | 'Arial'\n | 'Helvetica'\n | 'Verdana'\n | 'Georgia'\n | 'Times New Roman'\n | 'serif'\n | 'sans-serif'\n | 'monospace'\n | 'cursive'\n | 'fantasy';\n\ntype FontFormat =\n | 'woff'\n | 'woff2'\n | 'truetype'\n | 'opentype'\n | 'embedded-opentype'\n | 'svg';\n\ntype FontWeight = React.CSSProperties['fontWeight'];\ntype FontStyle = React.CSSProperties['fontStyle'];\n\nexport interface FontProps {\n /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */\n fontFamily: string;\n /** An array is possible, but the order of the array is the priority order */\n fallbackFontFamily: FallbackFont | FallbackFont[];\n /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */\n webFont?: {\n url: string;\n format: FontFormat;\n };\n /** Default: 'normal' */\n fontStyle?: FontStyle;\n /** Default: 400 */\n fontWeight?: FontWeight;\n}\n\n/** The component MUST be place inside the <head> tag */\nexport const Font: React.FC<Readonly<FontProps>> = ({\n fontFamily,\n fallbackFontFamily,\n webFont,\n fontStyle = 'normal',\n fontWeight = 400,\n}) => {\n const src = webFont\n ? `src: url(${webFont.url}) format('${webFont.format}');`\n : '';\n\n const style = `\n @font-face {\n font-family: '${fontFamily}';\n font-style: ${fontStyle};\n font-weight: ${fontWeight};\n mso-font-alt: '${\n Array.isArray(fallbackFontFamily)\n ? fallbackFontFamily[0]\n : fallbackFontFamily\n }';\n ${src}\n }\n\n * {\n font-family: '${fontFamily}', ${\n Array.isArray(fallbackFontFamily)\n ? fallbackFontFamily.join(', ')\n : fallbackFontFamily\n };\n }\n `;\n return <style dangerouslySetInnerHTML={{ __html: style }} />;\n};\n"],"mappings":";;;;AA0CA,MAAaA,QAAuC,EAClD,YACA,oBACA,SACA,YAAY,UACZ,aAAa,UACT;CACJ,MAAM,MAAM,UACR,YAAY,QAAQ,IAAI,YAAY,QAAQ,OAAO,OACnD;AAuBJ,QAAO,oBAAC,WAAM,yBAAyB,EAAE,QArB3B;;sBAEM,WAAW;oBACb,UAAU;qBACT,WAAW;uBAExB,MAAM,QAAQ,mBAAmB,GAC7B,mBAAmB,KACnB,mBACL;QACC,IAAI;;;;sBAIU,WAAW,KACzB,MAAM,QAAQ,mBAAmB,GAC7B,mBAAmB,KAAK,KAAK,GAC7B,mBACL;;KAGmD,GAAI"}
+22
-20
dist/index.d.mts

@@ -1,25 +0,27 @@

import * as React from 'react';
import * as React from "react";
type FallbackFont = "Arial" | "Helvetica" | "Verdana" | "Georgia" | "Times New Roman" | "serif" | "sans-serif" | "monospace" | "cursive" | "fantasy";
type FontFormat = "woff" | "woff2" | "truetype" | "opentype" | "embedded-opentype" | "svg";
type FontWeight = React.CSSProperties["fontWeight"];
type FontStyle = React.CSSProperties["fontStyle"];
//#region src/font.d.ts
type FallbackFont = 'Arial' | 'Helvetica' | 'Verdana' | 'Georgia' | 'Times New Roman' | 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy';
type FontFormat = 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
type FontWeight = React.CSSProperties['fontWeight'];
type FontStyle = React.CSSProperties['fontStyle'];
interface FontProps {
/** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
fontFamily: string;
/** An array is possible, but the order of the array is the priority order */
fallbackFontFamily: FallbackFont | FallbackFont[];
/** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
webFont?: {
url: string;
format: FontFormat;
};
/** Default: 'normal' */
fontStyle?: FontStyle;
/** Default: 400 */
fontWeight?: FontWeight;
/** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
fontFamily: string;
/** An array is possible, but the order of the array is the priority order */
fallbackFontFamily: FallbackFont | FallbackFont[];
/** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
webFont?: {
url: string;
format: FontFormat;
};
/** Default: 'normal' */
fontStyle?: FontStyle;
/** Default: 400 */
fontWeight?: FontWeight;
}
/** The component MUST be place inside the <head> tag */
declare const Font: React.FC<Readonly<FontProps>>;
export { Font, type FontProps };
//#endregion
export { Font, FontProps };
//# sourceMappingURL=index.d.mts.map
+22
-20
dist/index.d.ts

@@ -1,25 +0,27 @@

import * as React from 'react';
import * as React from "react";
type FallbackFont = "Arial" | "Helvetica" | "Verdana" | "Georgia" | "Times New Roman" | "serif" | "sans-serif" | "monospace" | "cursive" | "fantasy";
type FontFormat = "woff" | "woff2" | "truetype" | "opentype" | "embedded-opentype" | "svg";
type FontWeight = React.CSSProperties["fontWeight"];
type FontStyle = React.CSSProperties["fontStyle"];
//#region src/font.d.ts
type FallbackFont = 'Arial' | 'Helvetica' | 'Verdana' | 'Georgia' | 'Times New Roman' | 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy';
type FontFormat = 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
type FontWeight = React.CSSProperties['fontWeight'];
type FontStyle = React.CSSProperties['fontStyle'];
interface FontProps {
/** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
fontFamily: string;
/** An array is possible, but the order of the array is the priority order */
fallbackFontFamily: FallbackFont | FallbackFont[];
/** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
webFont?: {
url: string;
format: FontFormat;
};
/** Default: 'normal' */
fontStyle?: FontStyle;
/** Default: 400 */
fontWeight?: FontWeight;
/** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
fontFamily: string;
/** An array is possible, but the order of the array is the priority order */
fallbackFontFamily: FallbackFont | FallbackFont[];
/** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
webFont?: {
url: string;
format: FontFormat;
};
/** Default: 'normal' */
fontStyle?: FontStyle;
/** Default: 400 */
fontWeight?: FontWeight;
}
/** The component MUST be place inside the <head> tag */
declare const Font: React.FC<Readonly<FontProps>>;
export { Font, type FontProps };
//#endregion
export { Font, FontProps };
//# sourceMappingURL=index.d.ts.map
+27
-35
dist/index.js

@@ -1,38 +0,32 @@

"use strict";
//#region rolldown:runtime
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
// src/index.ts
var src_exports = {};
__export(src_exports, {
Font: () => Font
});
module.exports = __toCommonJS(src_exports);
//#endregion
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = __toESM(react_jsx_runtime);
// src/font.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Font = ({
fontFamily,
fallbackFontFamily,
webFont,
fontStyle = "normal",
fontWeight = 400
}) => {
const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
const style = `
//#region src/font.tsx
/** The component MUST be place inside the <head> tag */
const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: `
@font-face {

@@ -49,8 +43,6 @@ font-family: '${fontFamily}';

}
`;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: style } });
` } });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Font
});
//#endregion
exports.Font = Font;
+11
-15
dist/index.mjs

@@ -1,12 +0,8 @@

// src/font.tsx
import { jsx } from "react/jsx-runtime";
var Font = ({
fontFamily,
fallbackFontFamily,
webFont,
fontStyle = "normal",
fontWeight = 400
}) => {
const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
const style = `
//#region src/font.tsx
/** The component MUST be place inside the <head> tag */
const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
@font-face {

@@ -23,7 +19,7 @@ font-family: '${fontFamily}';

}
`;
return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } });
` } });
};
export {
Font
};
//#endregion
export { Font };
//# sourceMappingURL=index.mjs.map
+10
-9
package.json
{
"name": "@react-email/font",
"version": "0.0.9",
"version": "0.0.10",
"description": "A React Font component to set your fonts",

@@ -9,2 +9,5 @@ "sideEffects": false,

"types": "./dist/index.d.ts",
"engines": {
"node": ">=20.0.0"
},
"files": [

@@ -30,5 +33,4 @@ "dist/**"

"devDependencies": {
"typescript": "5.1.6",
"@react-email/render": "1.0.3",
"eslint-config-custom": "0.0.0",
"typescript": "5.8.3",
"@react-email/render": "2.0.1",
"tsconfig": "0.0.0"

@@ -40,9 +42,8 @@ },

"scripts": {
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
"build": "tsdown src/index.ts --format esm,cjs --dts --external react",
"build:watch": "tsdown src/index.ts --format esm,cjs --dts --external react --watch",
"clean": "rm -rf dist",
"dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
"lint": "eslint .",
"test:watch": "vitest",
"test": "vitest run"
"test": "vitest run",
"test:watch": "vitest"
}
}