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.6",
     "@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": "fixme",
+  "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": "fixme",
+  "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": "fixme",
+  "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.6",
     "@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/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.6"
   },
   "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.6",
     "@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);

yarn.lock

@@ -1639,6 +1639,16 @@
   resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.154-beta.5.tgz#6266d5fa1048bf9b3bffc461dc40e02862ac5cd3"
   integrity sha512-U+bdvX1BZELUEN5MK4BX7H35p92Kyt/M+26PWJG/gvc2KCgpfFTFedBXjABKEf1Jo8wIcQl8VWciKSkpzhUaQw==
 
+"@griffel/core@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@griffel/core/-/core-1.0.6.tgz#e582d19449619f7a43d861489bbce4429f929f9d"
+  integrity sha512-yliAuog/AugYK5WDGAM8z4y+JFFkFuj0zrGXr4uTeG9wnbZaPKKAN55axBTbK5/rN1ecMSuDwdb4U3pZLyCQNQ==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    csstype "^2.6.19"
+    rtl-css-js "^1.15.0"
+    stylis "^4.0.13"
+
 "@gulp-sourcemaps/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9"
@@ -9523,10 +9533,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0, csstype@^2.5.5, csstype@^2.5.7, csstype@^2.6.7:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
-  integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
+csstype@^2.2.0, csstype@^2.5.5, csstype@^2.5.7, csstype@^2.6.19, csstype@^2.6.7:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
 csstype@^3.0.2:
   version "3.0.8"
@@ -22220,10 +22230,10 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-rtl-css-js@^1.1.3, rtl-css-js@^1.14.5:
-  version "1.14.5"
-  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.14.5.tgz#fd92685acd024e688dda899a28c5fb9270b79974"
-  integrity sha512-+ng7LWVvPjQUdgDVviR6vKi2X4JiBtlw5rdY0UM5/Cj39c2/KDUsY/VxEzGE25m4KR5g0dvuKfrDq7DaoDooIA==
+rtl-css-js@^1.1.3, rtl-css-js@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.15.0.tgz#680ed816e570a9ebccba9e1cd0f202c6a8bb2dc0"
+  integrity sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==
   dependencies:
     "@babel/runtime" "^7.1.2"
 
@@ -23776,15 +23786,10 @@ stylis@^3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
-stylis@^4.0.3:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
-
-stylis@^4.0.6:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.7.tgz#412a90c28079417f3d27c028035095e4232d2904"
-  integrity sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==
+stylis@^4.0.13, stylis@^4.0.3, stylis@^4.0.6:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
 [email protected]:
   version "6.0.0"