chore(make-styles): migrate to new DX

change/@fluentui-make-styles-412bdd36-065c-4aad-b810-6cfedcb56140.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "migrate to new DX",
+  "packageName": "@fluentui/make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.config.js

@@ -11,5 +11,6 @@ module.exports = {
     '<rootDir>/packages/react-positioning',
     '<rootDir>/packages/react-link',
     '<rootDir>/packages/react-divider',
+    '<rootDir>/packages/make-styles',
   ],
 };

nx.json

@@ -71,7 +71,7 @@
     "@fluentui/jest-serializer-make-styles": { "implicitDependencies": [] },
     "@fluentui/jest-serializer-merge-styles": { "implicitDependencies": [] },
     "@fluentui/keyboard-key": { "implicitDependencies": [] },
-    "@fluentui/make-styles": { "implicitDependencies": [] },
+    "@fluentui/make-styles": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/merge-styles": { "implicitDependencies": [] },
     "@fluentui/monaco-editor": { "implicitDependencies": [] },
     "@fluentui/public-docsite-setup": { "implicitDependencies": [] },

packages/make-styles/config/api-extractor.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
 }

packages/make-styles/config/api-extractor.local.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+}

packages/make-styles/jest.config.js

@@ -1,5 +1,19 @@
-const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
+// @ts-check
 
-const config = createConfig();
-
-module.exports = config;
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'make-styles',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+};

packages/make-styles/package.json

@@ -17,8 +17,10 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "test": "just-scripts test",
-    "test:watch": "just-scripts jest-watch"
+    "test": "jest",
+    "test:watch": "just-scripts jest-watch",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/make-styles/src && yarn docs"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.1",

packages/make-styles/tsconfig.json

@@ -1,21 +1,17 @@
 {
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
+    "target": "ES5",
+    "module": "CommonJS",
+    "lib": ["es5", "dom", "ES2015.Core", "ES2015.Proxy", "ES2015.Symbol", "ES2015.Symbol.WellKnown"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["ES5", "ES2015.Proxy", "ES2015.Symbol", "ES2015.Symbol.WellKnown", "DOM", "ES2015.Core"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["custom-global", "jest", "inline-style-expand-shorthand"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }

workspace.json

@@ -86,7 +86,11 @@
       "projectType": "library"
     },
     "@fluentui/keyboard-key": { "root": "packages/keyboard-key", "projectType": "library" },
-    "@fluentui/make-styles": { "root": "packages/make-styles", "projectType": "library" },
+    "@fluentui/make-styles": {
+      "root": "packages/make-styles",
+      "projectType": "library",
+      "sourceRoot": "packages/make-styles/src"
+    },
     "@fluentui/merge-styles": { "root": "packages/merge-styles", "projectType": "library" },
     "@fluentui/monaco-editor": { "root": "packages/monaco-editor", "projectType": "library" },
     "@fluentui/public-docsite-setup": { "root": "packages/public-docsite-setup", "projectType": "library" },