fix: (preset-style) font-family fallback and notf.

outpostHQ · Jul 30, 2022 · fb65272 · fb65272
1 parent 3f798e8
commit fb65272
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 11 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) Breadcrumb Private Limited and its affiliates.
+Copyright (c) Outpost Innovations, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -89,6 +89,6 @@ Please follow our [contributing guidelines](CONTRIBUTING.md).
 
 ## License
 
-TastyCSS is a project by [Forneu](https://forneu.com).
+TastyCSS is a project by [Outpost](https://outpost.run).
 
 Released under the [MIT License](LICENSE).
diff --git a/packages/tastycss/README.md b/packages/tastycss/README.md
@@ -89,6 +89,6 @@ Please follow our [contributing guidelines](CONTRIBUTING.md).
 
 ## License
 
-TastyCSS is a project by [Forneu](https://forneu.com).
+TastyCSS is a project by [Outpost](https://outpost.run).
 
 Released under the [MIT License](LICENSE).
diff --git a/packages/tastycss/src/styles/preset.ts b/packages/tastycss/src/styles/preset.ts
@@ -3,7 +3,15 @@ import { Styles } from './types';
 
 function setCSSValue(styles: Styles, styleName: string, presetName: string, isPropOnly = false) {
 	styles[`--${styleName}`] =
-		presetName === 'inherit' ? 'inherit' : `var(--${presetName}-${styleName}, var(--default-${styleName}, inherit))`;
+		presetName === 'inherit'
+			? 'inherit'
+			: presetName === 'default'
+			? `var(--default-${styleName}, ${styleName === 'font-family' ? 'var(--font, sans-serif)' : ''})${
+					styleName === 'font-family' ? ', var(--font, sans-serif)' : ''
+			  }`
+			: `var(--${presetName}-${styleName}, var(--default-${styleName}, ${
+					styleName === 'font-family' ? 'var(--font, sans-serif)' : ''
+			  }))${styleName === 'font-family' ? ', var(--font, sans-serif)' : ''}`;
 
 	if (!isPropOnly) {
 		styles[styleName] = styles[`--${styleName}`];

diff --git a/packages/tastycss/src/styles/reset.ts b/packages/tastycss/src/styles/reset.ts
@@ -5,7 +5,6 @@ const RESET_MAP = {
 		{
 			css: `
 -webkit-appearance: none;
-font-family: inherit;
 font-weight: inherit;
 word-spacing: initial;
 -webkit-text-fill-color: currentColor;

diff --git a/packages/tastycss/src/tasty.tsx b/packages/tastycss/src/tasty.tsx
@@ -10,6 +10,7 @@ import { Styles, StylesInterface } from './styles/types';
 import { BASE_STYLES } from './styles/list';
 import { ResponsiveStyleValue } from './utils/styles';
 import { mergeStyles } from './utils/mergeStyles';
+import { getDisplayName } from './utils/get-display-name';
 
 type StyleList = readonly (keyof {
 	[key in keyof StylesInterface]: StylesInterface[key];
@@ -110,9 +111,10 @@ function tasty<K extends StyleList, C = Record<string, unknown>>(Component, opti
 			);
 		});
 
-		_WrappedComponent.displayName = `TastyWrappedComponent(${
-			Component.displayName ?? Component.name ?? defaultProps.qa ?? extendTag ?? 'Anonymous'
-		})`;
+		_WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(
+			Component,
+			defaultProps.qa ?? extendTag ?? 'Anonymous',
+		)})`;
 
 		return _WrappedComponent;
 	}

diff --git a/packages/tastycss/src/utils/get-display-name.ts b/packages/tastycss/src/utils/get-display-name.ts
@@ -0,0 +1,11 @@
+import { ElementType } from 'react';
+
+const DEFAULT_NAME = 'Anonymous';
+
+export function getDisplayName<T>(Component: ElementType<T>, fallbackName = DEFAULT_NAME): string {
+	if (typeof Component === 'function') {
+		return Component.displayName ?? Component.name ?? fallbackName;
+	}
+
+	return fallbackName;
+}
diff --git a/packages/tastycss/src/utils/styles.ts b/packages/tastycss/src/utils/styles.ts
@@ -73,7 +73,7 @@ export const CUSTOM_UNITS = {
 	gp: 'var(--column-gap)',
 	// global setting
 	wh: function wh(num) {
-		return `calc(var(--cube-visual-viewport-height) / 100 * ${num})`;
+		return `calc(var(--jenga-visual-viewport-height) / 100 * ${num})`;
 	},
 	// span unit for GridProvider
 	sp: function spanWidth(num) {
@@ -418,7 +418,7 @@ export function parseColor(val, ignoreError = false) {
 
 	if (!name) {
 		if (!ignoreError && devMode) {
-			console.warn('CubeUIKit: incorrect color value:', val);
+			console.warn('JengaUIKit: incorrect color value:', val);
 		}
 
 		return {};
@@ -979,7 +979,7 @@ export function computeState(
 	const func = COMPUTE_FUNC_MAP[computeModel[0]];
 
 	if (!func) {
-		console.warn('CubeUIKit: unexpected compute method in the model', computeModel);
+		console.warn('JengaUIKit: unexpected compute method in the model', computeModel);
 		// return false;
 	}