fontFace.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = fontFace;
  4. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. var dataURIRegex = /^\s*data:([a-z]+\/[a-z-]+(;[a-z-]+=[a-z-]+)?)?(;charset=[a-z0-9-]+)?(;base64)?,[a-z0-9!$&',()*+,;=\-._~:@/?%\s]*\s*$/i;
  7. var formatHintMap = {
  8. woff: 'woff',
  9. woff2: 'woff2',
  10. ttf: 'truetype',
  11. otf: 'opentype',
  12. eot: 'embedded-opentype',
  13. svg: 'svg',
  14. svgz: 'svg'
  15. };
  16. function generateFormatHint(format, formatHint) {
  17. if (!formatHint) return '';
  18. return " format(\"" + formatHintMap[format] + "\")";
  19. }
  20. function isDataURI(fontFilePath) {
  21. return !!fontFilePath.replace(/\s+/g, ' ').match(dataURIRegex);
  22. }
  23. function generateFileReferences(fontFilePath, fileFormats, formatHint) {
  24. if (isDataURI(fontFilePath)) {
  25. return "url(\"" + fontFilePath + "\")" + generateFormatHint(fileFormats[0], formatHint);
  26. }
  27. var fileFontReferences = fileFormats.map(function (format) {
  28. return "url(\"" + fontFilePath + "." + format + "\")" + generateFormatHint(format, formatHint);
  29. });
  30. return fileFontReferences.join(', ');
  31. }
  32. function generateLocalReferences(localFonts) {
  33. var localFontReferences = localFonts.map(function (font) {
  34. return "local(\"" + font + "\")";
  35. });
  36. return localFontReferences.join(', ');
  37. }
  38. function generateSources(fontFilePath, localFonts, fileFormats, formatHint) {
  39. var fontReferences = [];
  40. if (localFonts) fontReferences.push(generateLocalReferences(localFonts));
  41. if (fontFilePath) {
  42. fontReferences.push(generateFileReferences(fontFilePath, fileFormats, formatHint));
  43. }
  44. return fontReferences.join(', ');
  45. }
  46. /**
  47. * CSS for a @font-face declaration. Defaults to check for local copies of the font on the user's machine. You can disable this by passing `null` to localFonts.
  48. *
  49. * @example
  50. * // Styles as object basic usage
  51. * const styles = {
  52. * ...fontFace({
  53. * 'fontFamily': 'Sans-Pro',
  54. * 'fontFilePath': 'path/to/file'
  55. * })
  56. * }
  57. *
  58. * // styled-components basic usage
  59. * const GlobalStyle = createGlobalStyle`${
  60. * fontFace({
  61. * 'fontFamily': 'Sans-Pro',
  62. * 'fontFilePath': 'path/to/file'
  63. * }
  64. * )}`
  65. *
  66. * // CSS as JS Output
  67. *
  68. * '@font-face': {
  69. * 'fontFamily': 'Sans-Pro',
  70. * 'src': 'url("path/to/file.eot"), url("path/to/file.woff2"), url("path/to/file.woff"), url("path/to/file.ttf"), url("path/to/file.svg")',
  71. * }
  72. */
  73. function fontFace(_ref) {
  74. var fontFamily = _ref.fontFamily,
  75. fontFilePath = _ref.fontFilePath,
  76. fontStretch = _ref.fontStretch,
  77. fontStyle = _ref.fontStyle,
  78. fontVariant = _ref.fontVariant,
  79. fontWeight = _ref.fontWeight,
  80. _ref$fileFormats = _ref.fileFormats,
  81. fileFormats = _ref$fileFormats === void 0 ? ['eot', 'woff2', 'woff', 'ttf', 'svg'] : _ref$fileFormats,
  82. _ref$formatHint = _ref.formatHint,
  83. formatHint = _ref$formatHint === void 0 ? false : _ref$formatHint,
  84. _ref$localFonts = _ref.localFonts,
  85. localFonts = _ref$localFonts === void 0 ? [fontFamily] : _ref$localFonts,
  86. unicodeRange = _ref.unicodeRange,
  87. fontDisplay = _ref.fontDisplay,
  88. fontVariationSettings = _ref.fontVariationSettings,
  89. fontFeatureSettings = _ref.fontFeatureSettings;
  90. // Error Handling
  91. if (!fontFamily) throw new _errors["default"](55);
  92. if (!fontFilePath && !localFonts) {
  93. throw new _errors["default"](52);
  94. }
  95. if (localFonts && !Array.isArray(localFonts)) {
  96. throw new _errors["default"](53);
  97. }
  98. if (!Array.isArray(fileFormats)) {
  99. throw new _errors["default"](54);
  100. }
  101. var fontFaceDeclaration = {
  102. '@font-face': {
  103. fontFamily: fontFamily,
  104. src: generateSources(fontFilePath, localFonts, fileFormats, formatHint),
  105. unicodeRange: unicodeRange,
  106. fontStretch: fontStretch,
  107. fontStyle: fontStyle,
  108. fontVariant: fontVariant,
  109. fontWeight: fontWeight,
  110. fontDisplay: fontDisplay,
  111. fontVariationSettings: fontVariationSettings,
  112. fontFeatureSettings: fontFeatureSettings
  113. }
  114. };
  115. // Removes undefined fields for cleaner css object.
  116. return JSON.parse(JSON.stringify(fontFaceDeclaration));
  117. }
  118. module.exports = exports.default;