chore: replace @fluentui/make-styles with @griffel/core

apps/perf-test/package.json

@@ -15,7 +15,7 @@
     "@fluentui/eslint-plugin": "*"
   },
   "dependencies": {
-    "@fluentui/make-styles": "9.0.0-beta.3",
+    "@griffel/core": "1.0.7",
     "@fluentui/react": "^8.49.7",
     "@fluentui/react-avatar": "9.0.0-beta.4",
     "@fluentui/react-button": "9.0.0-beta.5",

apps/perf-test/src/scenarios/MakeStyles.tsx

@@ -1,4 +1,4 @@
-import { mergeClasses, makeStyles, createDOMRenderer } from '@fluentui/make-styles';
+import { mergeClasses, makeStyles, createDOMRenderer } from '@griffel/core';
 import * as React from 'react';
 
 const renderer = createDOMRenderer(document);

change/@fluentui-babel-make-styles-ee9b3856-f3d4-4861-b40a-5d8804aed9a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "migrate to use @griffel/core",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-jest-serializer-make-styles-922bd6c1-bf07-40bf-9ee2-78f5c9e44260.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "migrate to use @griffel/core",
+  "packageName": "@fluentui/jest-serializer-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-make-styles-cdadc702-0cf1-4498-83d0-a686f679f21f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "migrate to use @griffel/core",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,7 +1,7 @@
-import { MakeStylesStyle } from '@fluentui/make-styles';
+import { GriffelStyle } from '@griffel/core';
 import { tokens } from '@fluentui/react-theme';
 
-export const createMixin = (rule: MakeStylesStyle): MakeStylesStyle => ({
+export const createMixin = (rule: GriffelStyle): GriffelStyle => ({
   color: tokens.colorBrandBackground,
   ...rule,
 });

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

@@ -1,17 +1,17 @@
-import { MakeStylesStyle } from '@fluentui/make-styles';
+import { GriffelStyle } from '@griffel/core';
 import { tokens } from '@fluentui/react-theme';
 
-export const flexStyles: MakeStylesStyle = {
+export const flexStyles: GriffelStyle = {
   display: 'flex',
   flexDirection: 'column',
 };
 
-export const gridStyles = (gridGap: string): MakeStylesStyle => ({
+export const gridStyles = (gridGap: string): GriffelStyle => ({
   display: 'grid',
   gridRowGap: gridGap,
 });
 
-export const typography: Record<'text' | 'header', MakeStylesStyle> = {
+export const typography: Record<'text' | 'header', GriffelStyle> = {
   text: { fontWeight: tokens.fontWeightRegular },
   header: { fontWeight: 'bold' },
 };

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

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

packages/babel-make-styles/package.json

@@ -33,7 +33,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@babel/template": "^7.12.13",
     "@babel/traverse": "^7.12.13",
-    "@fluentui/make-styles": "9.0.0-beta.3",
+    "@griffel/core": "1.0.7",
     "@linaria/babel-preset": "^3.0.0-beta.14",
     "@linaria/shaker": "^3.0.0-beta.14",
     "ajv": "^8.4.0",

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, MakeStylesStyle } from '@fluentui/make-styles';
+import { resolveStyleRulesForSlots, CSSRulesByBucket, StyleBucketName, GriffelStyle } from '@griffel/core';
 
 import { astify } from './utils/astify';
 import { evaluatePaths } from './utils/evaluatePaths';
@@ -159,7 +159,7 @@ export const plugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPlugin
                 );
               }
 
-              const stylesBySlots: Record<string /* slot */, MakeStylesStyle> = evaluationResult.value;
+              const stylesBySlots: Record<string /* slot */, GriffelStyle> = evaluationResult.value;
               const [classnamesMapping, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
 
               // TODO: find a better way to replace arguments

packages/fluentui/docs/src/examples/components/Popup/Visual/PopperExamplePositioning.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
-import { createReferenceFromClick, Box, Portal, PositioningProps, usePopper } from '@fluentui/react-northstar';
+import {
+  ICSSInJSStyle,
+  createReferenceFromClick,
+  Box,
+  Portal,
+  PositioningProps,
+  usePopper,
+} from '@fluentui/react-northstar';
 
-const boxStyles: React.CSSProperties = {
+const boxStyles: ICSSInJSStyle = {
   border: '1px dashed #ccc',
   color: 'blue',
   textAlign: 'center',

packages/fluentui/react-northstar-emotion-renderer/test/__snapshots__/emotionRenderer-test.ts.snap

@@ -104,7 +104,6 @@ exports[`emotionRenderer prefixes required styles 1`] = `
   -webkit-filter: blur(5px);
   filter: blur(5px);
   height: min-content;
-  -webkit-position: sticky;
   position: sticky;
   -webkit-transition: width 2s, height 2s, background-color 2s,
     -webkit-transform 2s;

packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx

@@ -6,6 +6,7 @@ import {
   useTelemetry,
   useUnhandledProps,
 } from '@fluentui/react-bindings';
+import { ICSSInJSStyle } from '@fluentui/styles';
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -43,15 +44,15 @@ export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps
   renderHeaderArea?: (props: ItemLayoutProps, classes: ComponentSlotClasses) => React.ReactNode;
   renderMainArea?: (props: ItemLayoutProps, classes: ComponentSlotClasses) => React.ReactNode;
   /** Styled applied to the root element of the rendered component. */
-  rootCSS?: React.CSSProperties;
+  rootCSS?: ICSSInJSStyle;
   /** Styled applied to the media element of the rendered component. */
   mediaCSS?: React.CSSProperties;
   /** Styled applied to the header element of the rendered component. */
-  headerCSS?: React.CSSProperties;
+  headerCSS?: ICSSInJSStyle;
   /** Styled applied to the header media element of the rendered component. */
   headerMediaCSS?: React.CSSProperties;
   /** Styled applied to the content element of the rendered component. */
-  contentCSS?: React.CSSProperties;
+  contentCSS?: ICSSInJSStyle;
   /** Styled applied to the content element of the rendered component. */
   contentMediaCSS?: React.CSSProperties;
   /** Styled applied to the end media element of the rendered component. */

packages/jest-serializer-make-styles/package.json

@@ -34,7 +34,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/make-styles": "9.0.0-beta.3"
+    "@griffel/core": "1.0.7"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/jest-serializer-make-styles/src/index.ts

@@ -1,4 +1,4 @@
-import { DEFINITION_LOOKUP_TABLE, CSSClasses } from '@fluentui/make-styles';
+import { DEFINITION_LOOKUP_TABLE, CSSClasses } from '@griffel/core';
 
 export function print(val: unknown) {
   /**

packages/react-conformance-make-styles/src/matchers/toContainClassNameLastInCalls.test.ts

@@ -1,4 +1,4 @@
-import { mergeClasses } from '@fluentui/make-styles';
+import { mergeClasses } from '@fluentui/react-make-styles';
 import './index';
 
 type MergeClassesParams = Parameters<typeof mergeClasses>;

packages/react-conformance-make-styles/src/matchers/toHaveMergeClassesCalledTimesWithClassName.test.ts

@@ -1,4 +1,4 @@
-import { mergeClasses } from '@fluentui/make-styles';
+import { mergeClasses } from '@fluentui/react-make-styles';
 import './index';
 
 type MergeClassesParams = Parameters<typeof mergeClasses>;

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

@@ -4,23 +4,23 @@
 
 ```ts
 
-import { createDOMRenderer } from '@fluentui/make-styles';
-import type { CSSClassesMapBySlot } from '@fluentui/make-styles';
-import type { CSSRulesByBucket } from '@fluentui/make-styles';
-import type { MakeStaticStyles } from '@fluentui/make-styles';
-import type { MakeStylesRenderer } from '@fluentui/make-styles';
-import { MakeStylesStyle } from '@fluentui/make-styles';
-import { mergeClasses } from '@fluentui/make-styles';
+import { createDOMRenderer } from '@griffel/core';
+import type { CSSClassesMapBySlot } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
+import type { GriffelRenderer } from '@griffel/core';
+import type { GriffelStaticStyles } from '@griffel/core';
+import { GriffelStyle as MakeStylesStyle } from '@griffel/core';
+import { mergeClasses } from '@griffel/core';
 import * as React_2 from 'react';
-import { shorthands } from '@fluentui/make-styles';
+import { shorthands } from '@griffel/core';
 
 // @internal
 export function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): () => Record<Slots, string>;
 
 export { createDOMRenderer }
 
 // @public (undocumented)
-export function makeStaticStyles<Selectors>(styles: MakeStaticStyles | MakeStaticStyles[]): () => void;
+export function makeStaticStyles<Selectors>(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;
 
 // @public (undocumented)
 export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, MakeStylesStyle>): () => Record<Slots, string>;
@@ -30,24 +30,24 @@ export { MakeStylesStyle }
 export { mergeClasses }
 
 // @public (undocumented)
-export const RendererContext: React_2.Context<MakeStylesRenderer>;
+export const RendererContext: React_2.Context<GriffelRenderer>;
 
 // @public (undocumented)
 export const RendererProvider: React_2.FC<RendererProviderProps>;
 
 // @public (undocumented)
 export interface RendererProviderProps {
-    renderer: MakeStylesRenderer;
+    renderer: GriffelRenderer;
     targetDocument?: Document;
 }
 
 // @public
-export function renderToStyleElements(renderer: MakeStylesRenderer): React_2.ReactElement[];
+export function renderToStyleElements(renderer: GriffelRenderer): React_2.ReactElement[];
 
 export { shorthands }
 
 // @public
-export function useRenderer(): MakeStylesRenderer;
+export function useRenderer(): GriffelRenderer;
 
 // (No @packageDocumentation comment for this package)
 

packages/react-make-styles/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "9.0.0-beta.4",
-    "@fluentui/make-styles": "9.0.0-beta.3",
+    "@griffel/core": "1.0.7",
     "@fluentui/react-theme": "9.0.0-beta.4",
     "@fluentui/react-utilities": "9.0.0-beta.4",
     "tslib": "^2.1.0"

packages/react-make-styles/src/RendererContext.tsx

@@ -1,11 +1,11 @@
-import { createDOMRenderer, rehydrateRendererCache } from '@fluentui/make-styles';
+import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
 import { canUseDOM } from '@fluentui/react-utilities';
 import * as React from 'react';
-import type { MakeStylesRenderer } from '@fluentui/make-styles';
+import type { GriffelRenderer } from '@griffel/core';
 
 export interface RendererProviderProps {
   /** An instance of makeStyles() renderer. */
-  renderer: MakeStylesRenderer;
+  renderer: GriffelRenderer;
 
   /**
    * Document used to insert CSS variables to head
@@ -16,7 +16,7 @@ export interface RendererProviderProps {
 /**
  * @private
  */
-export const RendererContext = React.createContext<MakeStylesRenderer>(createDOMRenderer());
+export const RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());
 
 /**
  * @public
@@ -41,6 +41,6 @@ export const RendererProvider: React.FC<RendererProviderProps> = ({ children, re
  *
  * @private
  */
-export function useRenderer(): MakeStylesRenderer {
+export function useRenderer(): GriffelRenderer {
   return React.useContext(RendererContext);
 }

packages/react-make-styles/src/__styles.ts

@@ -1,8 +1,8 @@
-import { __styles as vanillaStyles } from '@fluentui/make-styles';
+import { __styles as vanillaStyles } from '@griffel/core';
 import { useFluent } from '@fluentui/react-shared-contexts';
 
 import { useRenderer } from './RendererContext';
-import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@fluentui/make-styles';
+import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
 
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.

packages/react-make-styles/src/createDOMRenderer.test.tsx

@@ -1,4 +1,4 @@
-import { createDOMRenderer } from '@fluentui/make-styles';
+import { createDOMRenderer } from '@griffel/core';
 import * as React from 'react';
 import { hydrate } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';

packages/react-make-styles/src/index.ts

@@ -1,5 +1,5 @@
-export { shorthands, mergeClasses, createDOMRenderer } from '@fluentui/make-styles';
-export type { MakeStylesStyle } from '@fluentui/make-styles';
+export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
+export type { GriffelStyle as MakeStylesStyle } from '@griffel/core';
 
 export { makeStyles } from './makeStyles';
 export { makeStaticStyles } from './makeStaticStyles';

packages/react-make-styles/src/makeStaticStyles.ts

@@ -1,9 +1,9 @@
-import { makeStaticStyles as vanillaMakeStaticStyles } from '@fluentui/make-styles';
+import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';
 
 import { useRenderer } from './RendererContext';
-import type { MakeStaticStyles, MakeStaticStylesOptions } from '@fluentui/make-styles';
+import type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';
 
-export function makeStaticStyles<Selectors>(styles: MakeStaticStyles | MakeStaticStyles[]) {
+export function makeStaticStyles<Selectors>(styles: GriffelStaticStyles | GriffelStaticStyles[]) {
   const getStyles = vanillaMakeStaticStyles(styles);
 
   if (process.env.NODE_ENV === 'test') {

packages/react-make-styles/src/makeStyles.ts

@@ -1,9 +1,9 @@
-import { makeStyles as vanillaMakeStyles } from '@fluentui/make-styles';
+import { makeStyles as vanillaMakeStyles } from '@griffel/core';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import * as React from 'react';
 
 import { useRenderer } from './RendererContext';
-import type { MakeStylesOptions, MakeStylesStyle } from '@fluentui/make-styles';
+import type { MakeStylesOptions, GriffelStyle } from '@griffel/core';
 
 function isInsideComponent() {
   try {
@@ -15,7 +15,7 @@ function isInsideComponent() {
   }
 }
 
-export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, MakeStylesStyle>) {
+export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
   const getStyles = vanillaMakeStyles(stylesBySlots);
 
   if (process.env.NODE_ENV !== 'production') {

packages/react-make-styles/src/renderToStyleElements-node.test.tsx

@@ -4,7 +4,7 @@
 
 // 👆 this is intentionally to test in SSR like environment
 
-import { createDOMRenderer } from '@fluentui/make-styles';
+import { createDOMRenderer } from '@griffel/core';
 import * as prettier from 'prettier';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';

packages/react-make-styles/src/renderToStyleElements.ts

@@ -1,6 +1,6 @@
-import { styleBucketOrdering } from '@fluentui/make-styles';
+import { styleBucketOrdering } from '@griffel/core';
 import * as React from 'react';
-import type { MakeStylesRenderer, StyleBucketName } from '@fluentui/make-styles';
+import type { GriffelRenderer, StyleBucketName } from '@griffel/core';
 
 type CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;
 
@@ -9,7 +9,7 @@ type CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;
  *
  * @public
  */
-export function renderToStyleElements(renderer: MakeStylesRenderer): React.ReactElement[] {
+export function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {
   const styles = styleBucketOrdering.reduce<CSSRulesGroupedByStyleBucket>((acc, bucketName) => {
     return { ...acc, [bucketName]: [] };
   }, {} as CSSRulesGroupedByStyleBucket);