Repository: microsoft/griffel
Pull request #221 (2022-09-27 06:16:54)

react: adding missing definition for "children" in props
Fixes https://github.com/microsoft/griffel/issues/214

microsoft-github-policy-service[bot]: <!-- Policy app identification https://img.shields.io/static/v1?label=ContributorLicenseAgreement. -->
@Kerryliu please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

```
@microsoft-github-policy-service agree [company="{your company}"]
```

> Options:
> - (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
> - (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

<details>
    <summary>Contributor License Agreement</summary>
    
### Contribution License Agreement
This Contribution License Agreement (**“Agreement”**) is agreed to by the party signing below (**“You”**),
and conveys certain license rights to Microsoft Corporation and its affiliates (“Microsoft”) for Your
contributions to Microsoft open source projects. This Agreement is effective as of the latest signature
date below.
1. **Definitions**.
**“Code”** means the computer software code, whether in human-readable or machine-executable form,
that is delivered by You to Microsoft under this Agreement.
**“Project”** means any of the projects owned or managed by Microsoft and offered under a license
approved by the Open Source Initiative (www.opensource.org).
**“Submit”** is the act of uploading, submitting, transmitting, or distributing code or other content to any
Project, including but not limited to communication on electronic mailing lists, source code control
systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
discussing and improving that Project, but excluding communication that is conspicuously marked or
otherwise designated in writing by You as “Not a Submission.”
**“Submission”** means the Code and any other copyrightable material Submitted by You, including any
associated comments and documentation.
2. **Your Submission**. You must agree to the terms of this Agreement before making a Submission to any
Project. This Agreement covers any and all Submissions that You, now or in the future (except as
described in Section 4 below), Submit to any Project.
3. **Originality of Work**. You represent that each of Your Submissions is entirely Your original work.
Should You wish to Submit materials that are not Your original work, You may Submit them separately
to the Project if You (a) retain all copyright and license information that was in the materials as You
received them, (b) in the description accompanying Your Submission, include the phrase “Submission
containing materials of a third party:” followed by the names of the third party and any licenses or other
restrictions of which You are aware, and (c) follow any other instructions in the Project’s written
guidelines concerning Submissions.
4. **Your Employer**. References to “employer” in this Agreement include Your employer or anyone else
for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
Submission is made in the course of Your work for an employer or Your employer has intellectual
property rights in Your Submission by contract or applicable law, You must secure permission from Your
employer to make the Submission before signing this Agreement. In that case, the term “You” in this
Agreement will refer to You and the employer collectively. If You change employers in the future and
desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
and secure permission from the new employer before Submitting those Submissions.
5. **Licenses**.
  * **Copyright License**. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the
Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute
the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third
parties.
  * **Patent License**. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under
Your patent claims that are necessarily infringed by the Submission or the combination of the
Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
import or otherwise dispose of the Submission alone or with the Project.
  * **Other Rights Reserved**. Each party reserves all rights not expressly granted in this Agreement.
No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
granted by implication, exhaustion, estoppel or otherwise.
6. **Representations and Warranties**. You represent that You are legally entitled to grant the above
licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
have disclosed under Section 3). You represent that You have secured permission from Your employer to
make the Submission in cases where Your Submission is made in the course of Your work for Your
employer or Your employer has intellectual property rights in Your Submission by contract or applicable
law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
EXPRESSLY STATED IN SECTIONS 3, 4, AND 6, THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.
7. **Notice to Microsoft**. You agree to notify Microsoft in writing of any facts or circumstances of which
You later become aware that would make Your representations in this Agreement inaccurate in any
respect.
8. **Information about Submissions**. You agree that contributions to Projects and information about
contributions may be maintained indefinitely and disclosed publicly, including Your name and other
information that You submit with Your Submission.
9. **Governing Law/Jurisdiction**. This Agreement is governed by the laws of the State of Washington, and
the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County,
Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to
exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all
defenses of lack of personal jurisdiction and forum non-conveniens.
10. **Entire Agreement/Assignment**. This Agreement is the entire agreement between the parties, and
supersedes any and all prior agreements, understandings or communications, written or oral, between
the parties relating to the subject matter hereof. This Agreement may be assigned by Microsoft.

</details>
microsoft-cla[bot]: [![CLA assistant check](https://cla.opensource.microsoft.com/pull/badge/not_signed)](https://cla.opensource.microsoft.com/microsoft/griffel?pullRequest=221) <br/>Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our [Contributor License Agreement](https://cla.opensource.microsoft.com/microsoft/griffel?pullRequest=221) before we can accept your contribution.<br/><br/>:x: Kerryliu [sign now](https://cla.opensource.microsoft.com/microsoft/griffel?pullRequest=221)<br/><sub>You have signed the CLA already but the status is still pending? Let us [recheck](https://cla.opensource.microsoft.com/check/microsoft/griffel?pullRequest=221) it.</sub>
Kerryliu: @microsoft-github-policy-service agree [company="{Microsoft}"]
microsoft-github-policy-service[bot]: <!-- Policy app identification https://img.shields.io/static/v1?label=ContributorLicenseAgreement. -->
@Kerryliu the command you issued was incorrect. Please try again. 

Examples are:

```
@microsoft-github-policy-service agree
```

and

```
@microsoft-github-policy-service agree company="your company"
```
microsoft-github-policy-service[bot]: <!-- Policy app identification https://img.shields.io/static/v1?label=ContributorLicenseAgreement. -->
@Kerryliu the command you issued was incorrect. Please try again. 

Examples are:

```
@microsoft-github-policy-service agree
```

and

```
@microsoft-github-policy-service agree company="your company"
```
Kerryliu: @microsoft-github-policy-service agree company="Microsoft"

Patch:
diff --git a/.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch b/.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch
new file mode 100644
index 0000000..7d8fade
--- /dev/null
+++ b/.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch
@@ -0,0 +1,36 @@
+diff --git a/lib/utils/docsUtils.js b/lib/utils/docsUtils.js
+index 61d72a3300b94904c8809503360206081e1c029c..43d75f84e8fc18e023ebb91afc17bd7354d9be27 100644
+--- a/lib/utils/docsUtils.js
++++ b/lib/utils/docsUtils.js
+@@ -105,13 +105,13 @@ export function isActiveSidebarItem(item, activePath) {
+  * Get the sidebar the breadcrumbs for a given pathname
+  * Ordered from top to bottom
+  */
+-function getSidebarBreadcrumbs({ sidebarItems, pathname, onlyCategories = false, }) {
++function getSidebarBreadcrumbs({ sidebarItems, pathname, hash = '', onlyCategories = false, }) {
+     const breadcrumbs = [];
+     function extract(items) {
+         for (const item of items) {
+             if ((item.type === 'category' &&
+-                (isSamePath(item.href, pathname) || extract(item.items))) ||
+-                (item.type === 'link' && isSamePath(item.href, pathname))) {
++                (isSamePath(item.href, pathname + hash) || extract(item.items))) ||
++                (item.type === 'link' && isSamePath(item.href, pathname + hash))) {
+                 const filtered = onlyCategories && item.type !== 'category';
+                 if (!filtered) {
+                     breadcrumbs.unshift(item);
+@@ -130,12 +130,12 @@ function getSidebarBreadcrumbs({ sidebarItems, pathname, onlyCategories = false,
+  */
+ export function useSidebarBreadcrumbs() {
+     const sidebar = useDocsSidebar();
+-    const { pathname } = useLocation();
++    const { pathname, hash } = useLocation();
+     const breadcrumbsOption = useActivePlugin()?.pluginData.breadcrumbs;
+     if (breadcrumbsOption === false || !sidebar) {
+         return null;
+     }
+-    return getSidebarBreadcrumbs({ sidebarItems: sidebar.items, pathname });
++    return getSidebarBreadcrumbs({ sidebarItems: sidebar.items, hash, pathname });
+ }
+ /**
+  * "Version candidates" are mostly useful for the layout components, which must
diff --git a/apps/benchmark/src/components/Select.tsx b/apps/benchmark/src/components/Select.tsx
index 84b1527..523f265 100644
--- a/apps/benchmark/src/components/Select.tsx
+++ b/apps/benchmark/src/components/Select.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 interface SelectProps {
+  children: React.ReactNode;
   label: string;
 }
 
diff --git a/apps/benchmark/src/implementations/types.ts b/apps/benchmark/src/implementations/types.ts
index 5733752..61e8f41 100644
--- a/apps/benchmark/src/implementations/types.ts
+++ b/apps/benchmark/src/implementations/types.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export interface BoxProps {
   color: 0 | 1 | 2 | 3 | 4 | 5;
   fixed: boolean;
@@ -9,5 +11,6 @@ export interface DotProps {
   size: number;
   x: number;
   y: number;
+  children: React.ReactNode;
   color: string;
 }
diff --git a/apps/website/docs/react/guides/ssr-usage.md b/apps/website/docs/react/guides/ssr-usage.md
index 8fe7693..e756f00 100644
--- a/apps/website/docs/react/guides/ssr-usage.md
+++ b/apps/website/docs/react/guides/ssr-usage.md
@@ -10,7 +10,7 @@ Griffel provides first class support for Server-Side Rendering.
 
 ### Base setup
 
-For basic instructions to setup Next.js, see [Getting Started](https://nextjs.org/docs/getting-started). Please complete following steps:
+For basic instructions to setup Next.js, see [Getting Started](https://nextjs.org/docs/getting-started). Please complete the following steps:
 
 1. Get a basic Next.js setup running, rendering a page from the `pages` folder, as guided by the tutorial.
 2. Add the Griffel to dependencies (`@griffel/react` package), check [Install](/react/install) page.
@@ -84,7 +84,7 @@ function MyApp({ Component, pageProps, renderer }) {
 export default MyApp;
 ```
 
-3. You should now be able to server render components with Griffel styles in any of your pages:
+3. You should now be able to server render components with Griffel styles on any of your pages:
 
 ```js
 import { makeStyles } from '@griffel/react';
@@ -96,6 +96,6 @@ const useClasses = makeStyles({
 export default function Home() {
   const classes = useClasses();
 
-  return <Button classeName={classes.button}>Hello world!</Button>;
+  return <Button className={classes.button}>Hello world!</Button>;
 }
 ```
diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js
index ace6bbe..993fd8a 100644
--- a/apps/website/sidebars.js
+++ b/apps/website/sidebars.js
@@ -6,7 +6,7 @@ function generateTryItOutSidebar() {
   const playgroundTemplatePath = path.join(__dirname, '/src/components/Playground/code/templates');
   const templateFiles = fs.readdirSync(playgroundTemplatePath);
 
-  return templateFiles
+  const items = templateFiles
     .reduce((sidebarItems, templateFile) => {
       const id = path.parse(templateFile).name;
       const templatePath = path.join(playgroundTemplatePath, templateFile);
@@ -54,6 +54,20 @@ function generateTryItOutSidebar() {
       return sidebarItems;
     }, [])
     .filter(Boolean);
+
+  return [
+    {
+      type: 'category',
+      label: 'Try it out',
+      link: {
+        type: 'doc',
+        id: 'try-it-out/try-it-out',
+      },
+      collapsible: false,
+      collapsed: false,
+      items,
+    },
+  ];
 }
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
diff --git a/change/@griffel-react-eb078e75-469e-4056-b2e9-7293b007f909.json b/change/@griffel-react-eb078e75-469e-4056-b2e9-7293b007f909.json
new file mode 100644
index 0000000..81bfce6
--- /dev/null
+++ b/change/@griffel-react-eb078e75-469e-4056-b2e9-7293b007f909.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Adding children to prop type definitions for React 18",
+  "packageName": "@griffel/react",
+  "email": "liukerry@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index be1a0f8..ad0526c 100644
--- a/package.json
+++ b/package.json
@@ -134,6 +134,7 @@
     "@nrwl/workspace": "patch:@nrwl/workspace@npm:13.4.5#.yarn/patches/@nrwl-workspace-npm-13.4.5-233a3ec85c",
     "beachball": "patch:beachball@npm:2.21.0#.yarn/patches/beachball-npm-2.21.0-85c8ba3d6b",
     "monosize@0.0.3": "patch:monosize@npm:0.0.3#.yarn/patches/monosize-npm-0.0.3-9b650c3f51",
-    "source-map-js@1.0.2": "patch:source-map-js@npm:1.0.2#.yarn/patches/source-map-js-npm-1.0.2-ee4f9f9b30.patch"
+    "source-map-js@1.0.2": "patch:source-map-js@npm:1.0.2#.yarn/patches/source-map-js-npm-1.0.2-ee4f9f9b30.patch",
+    "@docusaurus/theme-common@2.1.0": "patch:@docusaurus/theme-common@npm:2.1.0#.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch"
   }
 }
diff --git a/packages/babel-preset/__fixtures__/config-babel-options/options.json b/packages/babel-preset/__fixtures__/config-babel-options/options.json
deleted file mode 100644
index 7258485..0000000
--- a/packages/babel-preset/__fixtures__/config-babel-options/options.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "babelOptions": {
-    "plugins": ["./packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin"]
-  }
-}
diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/options.json b/packages/babel-preset/__fixtures__/config-evaluation-rules/options.json
deleted file mode 100644
index 076f5e0..0000000
--- a/packages/babel-preset/__fixtures__/config-evaluation-rules/options.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "evaluationRules": [
-    {
-      "action": "sampleEvaluator"
-    }
-  ]
-}
diff --git a/packages/babel-preset/__fixtures__/duplicated-imports/options.json b/packages/babel-preset/__fixtures__/duplicated-imports/options.json
deleted file mode 100644
index d8906ae..0000000
--- a/packages/babel-preset/__fixtures__/duplicated-imports/options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "modules": [{ "moduleSource": "custom-package", "importName": "createStylesA" }]
-}
diff --git a/packages/babel-preset/__fixtures__/import-custom-module/options.json b/packages/babel-preset/__fixtures__/import-custom-module/options.json
deleted file mode 100644
index 4d20ffe..0000000
--- a/packages/babel-preset/__fixtures__/import-custom-module/options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
-}
diff --git a/packages/babel-preset/__fixtures__/import-custom-name/options.json b/packages/babel-preset/__fixtures__/import-custom-name/options.json
deleted file mode 100644
index 5bb97d6..0000000
--- a/packages/babel-preset/__fixtures__/import-custom-name/options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "modules": [{ "moduleSource": "custom-package", "importName": "createStyles" }]
-}
diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/code.tsx b/packages/babel-preset/__fixtures__/non-existing-module-call/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/non-existing-module-call/code.tsx
rename to packages/babel-preset/__fixtures__/non-existing-module-call/code.ts
diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/output.tsx b/packages/babel-preset/__fixtures__/non-existing-module-call/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/non-existing-module-call/output.tsx
rename to packages/babel-preset/__fixtures__/non-existing-module-call/output.ts
diff --git a/packages/babel-preset/__fixtures__/require-custom-module/options.json b/packages/babel-preset/__fixtures__/require-custom-module/options.json
deleted file mode 100644
index 4d20ffe..0000000
--- a/packages/babel-preset/__fixtures__/require-custom-module/options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
-}
diff --git a/packages/react/src/RendererContext.tsx b/packages/react/src/RendererContext.tsx
index 2b6251a..62e470e 100644
--- a/packages/react/src/RendererContext.tsx
+++ b/packages/react/src/RendererContext.tsx
@@ -10,6 +10,11 @@ export interface RendererProviderProps {
    * Document used to insert CSS variables to head
    */
   targetDocument?: Document;
+
+  /**
+   * Content wrapped by the RendererProvider
+   */
+  children: React.ReactNode;
 }
 
 /**
diff --git a/packages/react/src/TextDirectionContext.tsx b/packages/react/src/TextDirectionContext.tsx
index 3d4e919..5001c20 100644
--- a/packages/react/src/TextDirectionContext.tsx
+++ b/packages/react/src/TextDirectionContext.tsx
@@ -3,6 +3,11 @@ import * as React from 'react';
 export interface TextDirectionProviderProps {
   /** Indicates the directionality of the element's text. */
   dir: 'ltr' | 'rtl';
+
+  /**
+   * Content wrapped by the TextDirectionProvider.
+   */
+  children: React.ReactNode;
 }
 
 /**
diff --git a/yarn.lock b/yarn.lock
index 51cb06d..1328d84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2519,6 +2519,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@docusaurus/theme-common@patch:@docusaurus/theme-common@npm:2.1.0#.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch::locator=griffel-repository%40workspace%3A.":
+  version: 2.1.0
+  resolution: "@docusaurus/theme-common@patch:@docusaurus/theme-common@npm%3A2.1.0#.yarn/patches/@docusaurus-theme-common-npm-2.1.0-d5ae2a9539.patch::version=2.1.0&hash=9c5bd1&locator=griffel-repository%40workspace%3A."
+  dependencies:
+    "@docusaurus/mdx-loader": 2.1.0
+    "@docusaurus/module-type-aliases": 2.1.0
+    "@docusaurus/plugin-content-blog": 2.1.0
+    "@docusaurus/plugin-content-docs": 2.1.0
+    "@docusaurus/plugin-content-pages": 2.1.0
+    "@docusaurus/utils": 2.1.0
+    "@types/history": ^4.7.11
+    "@types/react": "*"
+    "@types/react-router-config": "*"
+    clsx: ^1.2.1
+    parse-numeric-range: ^1.3.0
+    prism-react-renderer: ^1.3.5
+    tslib: ^2.4.0
+    utility-types: ^3.10.0
+  peerDependencies:
+    react: ^16.8.4 || ^17.0.0
+    react-dom: ^16.8.4 || ^17.0.0
+  checksum: a64130306aa4d5b103d5c613019b7e3d6be3f1226d910e10109eaa21c278e8dc4cea9eee8cfc9d2e8df7e6ada1423ebd1c74119da6139009736b705829f3ecd5
+  languageName: node
+  linkType: hard
+
 "@docusaurus/theme-search-algolia@npm:2.1.0":
   version: 2.1.0
   resolution: "@docusaurus/theme-search-algolia@npm:2.1.0"


Test patch:
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index 53f7262..33bfe43 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -27,11 +27,166 @@ pluginTester({
         parser: 'typescript',
       },
     }),
-
-  fixtures: fixturesDir,
   tests: [
+    // 🎩 Tip: use "only: true" to run a single test
+    // https://github.com/babel-utils/babel-plugin-tester#only
+    //
+
+    // Fixtures
+    //
+    //
+    {
+      title: 'assets import handling',
+      fixture: path.resolve(fixturesDir, 'assets', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'assets', 'output.ts'),
+    },
+    {
+      title: 'duplicated imports',
+      fixture: path.resolve(fixturesDir, 'duplicated-imports', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'duplicated-imports', 'output.ts'),
+      pluginOptions: {
+        modules: [{ moduleSource: 'custom-package', importName: 'createStylesA' }],
+      },
+    },
+    {
+      title: 'multiple declarations',
+      fixture: path.resolve(fixturesDir, 'multiple-declarations', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'multiple-declarations', 'output.ts'),
+    },
+    {
+      title: 'call of non existing module',
+      fixture: path.resolve(fixturesDir, 'non-existing-module-call', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'non-existing-module-call', 'output.ts'),
+    },
+
+    // Evaluation
+    //
+    //
+    {
+      title: 'evaluation: mixins via functions',
+      fixture: path.resolve(fixturesDir, 'function-mixin', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'function-mixin', 'output.ts'),
+    },
+    {
+      title: 'evaluation: object',
+      fixture: path.resolve(fixturesDir, 'object', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object', 'output.ts'),
+    },
+    {
+      title: 'evaluation: object with computed keys',
+      fixture: path.resolve(fixturesDir, 'object-computed-keys', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-computed-keys', 'output.ts'),
+    },
+    {
+      title: 'evaluation: object with imported keys',
+      fixture: path.resolve(fixturesDir, 'object-imported-keys', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-imported-keys', 'output.ts'),
+    },
+    {
+      title: 'evaluation: object with mixins',
+      fixture: path.resolve(fixturesDir, 'object-mixins', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-mixins', 'output.ts'),
+    },
+    {
+      title: 'evaluation: nested objects',
+      fixture: path.resolve(fixturesDir, 'object-nesting', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-nesting', 'output.ts'),
+    },
+    {
+      title: 'evaluation: objects with sequence expression',
+      fixture: path.resolve(fixturesDir, 'object-sequence-expr', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-sequence-expr', 'output.ts'),
+    },
+    {
+      title: 'evaluation: objects with variables',
+      fixture: path.resolve(fixturesDir, 'object-variables', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-variables', 'output.ts'),
+    },
+    {
+      title: 'evaluation: rules with metadata',
+      fixture: path.resolve(fixturesDir, 'rules-with-metadata', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'rules-with-metadata', 'output.ts'),
+    },
+    {
+      title: 'evaluation: shared mixins',
+      fixture: path.resolve(fixturesDir, 'shared-mixins', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'shared-mixins', 'output.ts'),
+    },
+    {
+      title: 'evaluation: tokens scenario',
+      fixture: path.resolve(fixturesDir, 'tokens', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'tokens', 'output.ts'),
+    },
+
+    // Configs
+    //
+    //
+    {
+      title: 'config: babelOptions',
+      fixture: path.resolve(fixturesDir, 'config-babel-options', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'config-babel-options', 'output.ts'),
+      pluginOptions: {
+        babelOptions: {
+          plugins: ['./packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin'],
+        },
+      },
+    },
+    {
+      title: 'config: evaluationRules',
+      fixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'output.ts'),
+      pluginOptions: {
+        evaluationRules: [
+          {
+            action: 'sampleEvaluator',
+          },
+        ],
+      },
+    },
+
+    // Imports
+    //
+    //
+    {
+      title: 'imports: alias usage',
+      fixture: path.resolve(fixturesDir, 'import-alias', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'import-alias', 'output.ts'),
+    },
+    {
+      title: 'imports: custom module',
+      fixture: path.resolve(fixturesDir, 'import-custom-module', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'import-custom-module', 'output.ts'),
+      pluginOptions: {
+        modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }],
+      },
+    },
+    {
+      title: 'imports: custom module name',
+      fixture: path.resolve(fixturesDir, 'import-custom-name', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'import-custom-name', 'output.ts'),
+      pluginOptions: {
+        modules: [{ moduleSource: 'custom-package', importName: 'createStyles' }],
+      },
+    },
+    {
+      title: 'imports: require()',
+      fixture: path.resolve(fixturesDir, 'require', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'require', 'output.ts'),
+    },
+    {
+      title: 'imports: require() with custom module',
+      fixture: path.resolve(fixturesDir, 'require-custom-module', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'require-custom-module', 'output.ts'),
+      pluginOptions: {
+        modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }],
+      },
+    },
+
+    // Errors
+    //
+    //
     {
-      title: 'Unsupported shorthand CSS properties',
+      title: 'errors: unsupported shorthand CSS properties',
       fixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'fixture.ts'),
       outputFixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'output.ts'),
       setup() {