feat(make-styles): improve types

change/@fluentui-babel-make-styles-b223402d-b9ca-485f-b891-1a373b6d8ba6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use new types from makeStyles core",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-make-styles-98855c54-5025-454e-bd22-06dea7b0e2f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "improve types, add new types",
+  "packageName": "@fluentui/make-styles",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-make-styles-4121b063-1006-41aa-bb07-6d4535ae144d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "re-export base makeStyles types",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use new types from makeStyles core",
+  "packageName": "@fluentui/react-positioning",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use new types from makeStyles core",
+  "packageName": "@fluentui/react-tabster",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-34fcd815-59f2-4832-a391-131236c47c5f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use makeStyles types from proper package",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/babel-make-styles/__fixtures__/function-mixin/mixins.ts

@@ -1,7 +1,7 @@
-import { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
+import { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles';
 import { Theme } from '@fluentui/react-theme';
 
-export const createMixin = (rule: MakeStyles): MakeStylesStyleRule<Theme> => {
+export const createMixin = (rule: MakeStylesStyle): MakeStylesStyleRule<Theme> => {
   return theme => ({
     color: theme.colorBrandBackground,
     ...rule,

packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts

@@ -1,12 +1,12 @@
-import { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
+import { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles';
 import { Theme } from '@fluentui/react-theme';
 
-export const flexStyles: MakeStyles = {
+export const flexStyles: MakeStylesStyle = {
   display: 'flex',
   flexDirection: 'column',
 };
 
-export const gridStyles = (gridGap: string): MakeStyles => ({
+export const gridStyles = (gridGap: string): MakeStylesStyle => ({
   display: 'grid',
   gridRowGap: gridGap,
 });

packages/babel-make-styles/__fixtures__/shared-mixins/mixins.ts

@@ -1,6 +1,6 @@
-import { MakeStyles } from '@fluentui/make-styles';
+import { MakeStylesStyle } from '@fluentui/make-styles';
 
-export const sharedStyles: Record<string, MakeStyles> = {
+export const sharedStyles: Record<string, MakeStylesStyle> = {
   root: { display: 'flex' },
   container: { display: 'grid' },
 };

packages/babel-make-styles/src/plugin.ts

@@ -2,7 +2,7 @@ import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core';
 import { declare } from '@babel/helper-plugin-utils';
 import { Module } from '@linaria/babel-preset';
 import shakerEvaluator from '@linaria/shaker';
-import { resolveStyleRulesForSlots, CSSRulesByBucket, StyleBucketName, MakeStyles } from '@fluentui/make-styles';
+import { resolveStyleRulesForSlots, CSSRulesByBucket, StyleBucketName, MakeStylesStyle } from '@fluentui/make-styles';
 
 import { astify } from './utils/astify';
 import { evaluatePaths } from './utils/evaluatePaths';
@@ -536,7 +536,7 @@ export const plugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPlugin
                 );
               }
 
-              const stylesBySlots: Record<string /* slot*/, MakeStyles> = evaluationResult.value;
+              const stylesBySlots: Record<string /* slot*/, MakeStylesStyle> = evaluationResult.value;
 
               nodePath.replaceWithMultiple((astify(stylesBySlots) as t.ObjectExpression).properties);
             }
@@ -558,7 +558,7 @@ export const plugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPlugin
               );
             }
 
-            const stylesBySlots: Record<string /* slot */, MakeStyles> = evaluationResult.value;
+            const stylesBySlots: Record<string /* slot */, MakeStylesStyle> = evaluationResult.value;
             const [classnamesMapping, cssRules] = resolveStyleRulesForSlots(stylesBySlots, 0);
 
             // TODO: find a better way to replace arguments

packages/make-styles/etc/make-styles.api.md

@@ -7,8 +7,8 @@
 import type { BorderColorProperty } from 'csstype';
 import type { BorderStyleProperty } from 'csstype';
 import type { BorderWidthProperty } from 'csstype';
+import * as CSS_2 from 'csstype';
 import type { OverflowProperty } from 'csstype';
-import { Properties } from 'csstype';
 
 // @internal
 export function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): (options: Pick<MakeStylesOptions, 'dir' | 'renderer'>) => Record<Slots, string>;
@@ -24,15 +24,16 @@ export function createDOMRenderer(target?: Document | undefined): MakeStylesRend
 // @public (undocumented)
 export type CSSClasses = /* ltrClassName */ string | [/* ltrClassName */ string, /* rtlClassName */ string];
 
-// @public (undocumented)
-export type CSSClassesMap = Record<PropertyHash, CSSClasses>;
-
+// Warning: (ae-forgotten-export) The symbol "CSSClassesMap" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export type CSSClassesMapBySlot<Slots extends string | number> = Record<Slots, CSSClassesMap>;
 
 // @public (undocumented)
 export type CSSRulesByBucket = Partial<Record<StyleBucketName, string[]>>;
 
+// Warning: (ae-forgotten-export) The symbol "SequenceHash" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "LookupItem" needs to be exported by the entry point index.d.ts
 // Warning: (ae-internal-missing-underscore) The name "DEFINITION_LOOKUP_TABLE" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
@@ -54,11 +55,20 @@ export const LOOKUP_DEFINITIONS_INDEX = 0;
 export const LOOKUP_DIR_INDEX = 1;
 
 // @public (undocumented)
-export type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
+export type MakeStaticStyles = MakeStaticStylesStyle | string;
+
+// @public
+export function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;
 
 // @public (undocumented)
-export type MakeStaticStyles = ({
-    [key: string]: Properties & Record<string, any>;
+export interface MakeStaticStylesOptions {
+    // (undocumented)
+    renderer: MakeStylesRenderer;
+}
+
+// @public (undocumented)
+export type MakeStaticStylesStyle = {
+    [key: string]: CSS_2.Properties & Record<string, any>;
 } & {
     '@font-face'?: {
         fontFamily: string;
@@ -71,30 +81,17 @@ export type MakeStaticStyles = ({
         fontWeight?: number | string;
         unicodeRange?: string;
     };
-}) | string;
-
-// @public
-export function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;
-
-// @public (undocumented)
-export interface MakeStaticStylesOptions {
-    // (undocumented)
-    renderer: MakeStylesRenderer;
-}
-
-// @public (undocumented)
-export interface MakeStyles extends Omit<Properties<MakeStylesCSSValue>, 'animationName'> {
-    // (undocumented)
-    [key: string]: any;
-    // (undocumented)
-    animationName?: object | string;
-}
+};
 
+// Warning: (ae-forgotten-export) The symbol "StylesBySlots" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
 
+// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustom" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export type MakeStylesCSSValue = string | 0;
+export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>;
 
 // @public (undocumented)
 export interface MakeStylesOptions {
@@ -116,18 +113,20 @@ export interface MakeStylesRenderer {
     styleElements: Partial<Record<StyleBucketName, HTMLStyleElement>>;
 }
 
+// Warning: (ae-forgotten-export) The symbol "MakeStylesStrictCSSObject" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom;
+
 // @public (undocumented)
-export type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStyles;
+export type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
 
 // @public (undocumented)
-export type MakeStylesStyleRule<Tokens> = MakeStyles | MakeStylesStyleFunctionRule<Tokens>;
+export type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
 
 // @public
 export function mergeClasses(...classNames: (string | false | undefined)[]): string;
 
-// @public (undocumented)
-export type PropertyHash = string;
-
 // @public
 export function rehydrateRendererCache(renderer: MakeStylesRenderer, target?: Document | undefined): void;
 
@@ -139,7 +138,7 @@ export function resolveProxyValues<T>(value: T): T;
 // Warning: (ae-internal-missing-underscore) The name "resolveStyleRules" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
-export function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
 
 // @public
 export function resolveStyleRulesForSlots<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority: number): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
@@ -154,9 +153,6 @@ export const SEQUENCE_HASH_LENGTH = 7;
 // @internal (undocumented)
 export const SEQUENCE_PREFIX = "___";
 
-// @public (undocumented)
-export type SequenceHash = string;
-
 // @public (undocumented)
 export const shorthands: {
     border: typeof border;
@@ -180,9 +176,6 @@ export type StyleBucketName = 'd' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'k
 // @public
 export const styleBucketOrdering: StyleBucketName[];
 
-// @public (undocumented)
-export type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
-
 // Warnings were encountered during analysis:
 //
 // lib/index.d.ts:3:5 - (ae-forgotten-export) The symbol "border" needs to be exported by the entry point index.d.ts

packages/make-styles/src/index.ts

@@ -46,5 +46,23 @@ export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSS
 export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { __styles } from './__styles';
 
-export * from './types';
 export * from './constants';
+export type {
+  // Static styles
+  MakeStaticStylesStyle,
+  MakeStaticStyles,
+  // Styles
+  MakeStylesAnimation,
+  MakeStylesStyle,
+  MakeStylesStyleRule,
+  MakeStylesStyleFunctionRule,
+  // Internal types
+  CSSClasses,
+  CSSClassesMapBySlot,
+  CSSRulesByBucket,
+  StyleBucketName,
+  // Util
+  MakeStaticStylesOptions,
+  MakeStylesOptions,
+  MakeStylesRenderer,
+} from './types';

packages/make-styles/src/resolveStyleRulesForSlots.ts

@@ -3,7 +3,7 @@ import { resolveStyleRules } from './runtime/resolveStyleRules';
 import {
   CSSClassesMapBySlot,
   CSSRulesByBucket,
-  MakeStyles,
+  MakeStylesStyle,
   MakeStylesStyleFunctionRule,
   StyleBucketName,
   StylesBySlots,
@@ -28,10 +28,10 @@ export function resolveStyleRulesForSlots<Slots extends string | number, Tokens>
 
   // eslint-disable-next-line guard-for-in
   for (const slotName in stylesBySlots) {
-    const slotStyles: MakeStyles =
+    const slotStyles: MakeStylesStyle =
       typeof stylesBySlots[slotName] === 'function'
         ? (stylesBySlots[slotName] as MakeStylesStyleFunctionRule<Tokens>)(tokensProxy)
-        : stylesBySlots[slotName];
+        : (stylesBySlots[slotName] as MakeStylesStyle);
     const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, unstable_cssPriority);
 
     classesMapBySlot[slotName] = cssClassMap;

packages/make-styles/src/runtime/compileKeyframeCSS.test.ts

@@ -1,9 +1,9 @@
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
-import { MakeStyles } from '../types';
+import { MakeStylesAnimation } from '../types';
 
 describe('compileKeyframeRule', () => {
   it('stringifies an object with keyframes', () => {
-    const keyframes: MakeStyles = {
+    const keyframes: MakeStylesAnimation = {
       from: {
         transform: 'rotate(0deg)',
       },
@@ -19,7 +19,7 @@ describe('compileKeyframeRule', () => {
 
 describe('compileKeyframeCSS', () => {
   it('creates CSS from strings with keyframes', () => {
-    const keyframes: MakeStyles = {
+    const keyframes: MakeStylesAnimation = {
       from: {
         height: '10px',
       },

packages/make-styles/src/runtime/compileKeyframeCSS.ts

@@ -1,8 +1,8 @@
-import { MakeStyles } from '../types';
+import { MakeStylesAnimation } from '../types';
 import { compile, middleware, serialize, rulesheet, stringify, prefixer } from 'stylis';
 import { cssifyObject } from './utils/cssifyObject';
 
-export function compileKeyframeRule(keyframeObject: MakeStyles): string {
+export function compileKeyframeRule(keyframeObject: MakeStylesAnimation): string {
   let css: string = '';
 
   // eslint-disable-next-line guard-for-in

packages/make-styles/src/runtime/compileStaticCSS.ts

@@ -1,8 +1,8 @@
-import { MakeStyles } from '../types';
+import { MakeStaticStylesStyle } from '../types';
 import { compileCSSRules } from './compileCSS';
 import { cssifyObject } from './utils/cssifyObject';
 
-export function compileStaticCSS(property: string, value: MakeStyles): string {
+export function compileStaticCSS(property: string, value: MakeStaticStylesStyle): string {
   const cssRule = `${property} {${cssifyObject(value)}}`;
   return compileCSSRules(cssRule)[0];
 }

packages/make-styles/src/runtime/expandShorthand.ts

@@ -1,30 +1,30 @@
 import { expandProperty } from 'inline-style-expand-shorthand';
-import { MakeStyles } from '../types';
+import { MakeStylesStyle } from '../types';
 
 /**
  * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.).
  * Follows CSS-like order in expansion i.e. last defined property wins.
  */
-export function expandShorthand(style: MakeStyles, result: MakeStyles = {}): MakeStyles {
+export function expandShorthand(style: MakeStylesStyle, result: MakeStylesStyle = {}): MakeStylesStyle {
   // eslint-disable-next-line guard-for-in
   for (const property in style) {
-    const value = style[property];
+    const value = style[property as keyof MakeStylesStyle];
 
     if (typeof value === 'string' || typeof value === 'number') {
       const expansion = expandProperty(property, value);
 
       if (expansion) {
         Object.assign(result, expansion);
       } else {
-        result[property] = value;
+        result[property as keyof MakeStylesStyle] = value;
       }
       // eslint-disable-next-line eqeqeq
     } else if (value == null) {
       // should skip
     } else if (Array.isArray(value)) {
-      result[property] = value;
+      result[property as 'animationName'] = value;
     } else if (typeof value === 'object') {
-      result[property] = expandShorthand(value);
+      result[property as keyof MakeStylesStyle] = expandShorthand(value as MakeStylesStyle);
     }
   }
 

packages/make-styles/src/runtime/resolveStyleRules.test.ts

@@ -599,10 +599,10 @@ describe('resolveStyleRules', () => {
             },
             {
               from: {
-                opacity: 0,
+                opacity: '0',
               },
               to: {
-                opacity: 1,
+                opacity: '1',
               },
             },
           ],