Repository: microsoft/griffel
Pull request #412 (2023-07-27 18:06:53)

Inherit more webpack resolve options
The Outlook project has `webpack` build directly from Typescript source using `esbuild-loader`; to accomplish this, we define a `"source"` condition on all of our various package `"exports"` and specify it in `resolve.conditionNames` in `webpack.config.js`. The current behavior to lock this option to simply `["require"]` is a blocker to integrating the loader into our config.

github-actions[bot]: ## 📊 Bundle size report

<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/bd37c4fe0b21b33c1d548f7abf1b8c58dd1e5280'>bd37c4fe0b21b33c1d548f7abf1b8c58dd1e5280</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-7bc5ba3f-7967-411b-a0ce-d05321febf7f.json b/change/@griffel-core-7bc5ba3f-7967-411b-a0ce-d05321febf7f.json
deleted file mode 100644
index c37612f..0000000
--- a/change/@griffel-core-7bc5ba3f-7967-411b-a0ce-d05321febf7f.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: remove unused ts-expect-error",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-80492b15-83a7-4ca1-8c1b-b5aeb0c3aa58.json b/change/@griffel-core-80492b15-83a7-4ca1-8c1b-b5aeb0c3aa58.json
deleted file mode 100644
index 93ccae5..0000000
--- a/change/@griffel-core-80492b15-83a7-4ca1-8c1b-b5aeb0c3aa58.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: add API for styles insertion",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-970bda89-cefa-47c5-962d-a558027ec2cc.json b/change/@griffel-core-970bda89-cefa-47c5-962d-a558027ec2cc.json
deleted file mode 100644
index 86a835a..0000000
--- a/change/@griffel-core-970bda89-cefa-47c5-962d-a558027ec2cc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: support variadic arguments in border* shorthands",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json b/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json
deleted file mode 100644
index 2a3666f..0000000
--- a/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: show bucket names in snapshots",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json b/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json
deleted file mode 100644
index b0a07ee..0000000
--- a/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore(core): move prefixer to stylis directory",
-  "packageName": "@griffel/core",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/change/@griffel-webpack-extraction-plugin-12160e79-5a79-4ece-a6b2-0d216619592e.json b/change/@griffel-webpack-extraction-plugin-12160e79-5a79-4ece-a6b2-0d216619592e.json
deleted file mode 100644
index da3fdb5..0000000
--- a/change/@griffel-webpack-extraction-plugin-12160e79-5a79-4ece-a6b2-0d216619592e.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: do not emit empty CSS files",
-  "packageName": "@griffel/webpack-extraction-plugin",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@griffel-webpack-loader-b9e23b96-1848-4762-8b00-bb466cbbe407.json b/change/@griffel-webpack-loader-b9e23b96-1848-4762-8b00-bb466cbbe407.json
new file mode 100644
index 0000000..8528133
--- /dev/null
+++ b/change/@griffel-webpack-loader-b9e23b96-1848-4762-8b00-bb466cbbe407.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Add 'inheritResolveOptions' to configure resolve options in Webpack",
+  "packageName": "@griffel/webpack-loader",
+  "email": "miclo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/babel-preset/CHANGELOG.json b/packages/babel-preset/CHANGELOG.json
index 68d6595..802bf5f 100644
--- a/packages/babel-preset/CHANGELOG.json
+++ b/packages/babel-preset/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/babel-preset",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/babel-preset_v1.4.20",
+      "version": "1.4.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/babel-preset",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/babel-preset_v1.4.19",
+      "version": "1.4.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/babel-preset",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/babel-preset_v1.4.18",
diff --git a/packages/babel-preset/CHANGELOG.md b/packages/babel-preset/CHANGELOG.md
index dbfe7d4..a604c8c 100644
--- a/packages/babel-preset/CHANGELOG.md
+++ b/packages/babel-preset/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/babel-preset
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.4.20
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 1.4.19
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.0
+
 ## 1.4.18
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts b/packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts
new file mode 100644
index 0000000..eacfc76
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts
@@ -0,0 +1,7 @@
+import { makeResetStyles } from '@griffel/react';
+
+export const useStyles = makeResetStyles({
+  color: 'red',
+  '@supports (display: flex)': { color: 'pink' },
+  '@media (min-width: 100px)': { color: 'blue' },
+});
diff --git a/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts b/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts
new file mode 100644
index 0000000..2495b0f
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts
@@ -0,0 +1,5 @@
+import { __resetStyles } from '@griffel/react';
+export const useStyles = __resetStyles('rjrhw4c', null, {
+  r: ['.rjrhw4c{color:red;}'],
+  s: ['@supports (display: flex){.rjrhw4c{color:pink;}}', '@media (min-width: 100px){.rjrhw4c{color:blue;}}'],
+});
diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
index a7ed397..44d9e35 100644
--- a/packages/babel-preset/package.json
+++ b/packages/babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/babel-preset",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "description": "Babel preset with build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -13,7 +13,7 @@
     "@babel/helper-plugin-utils": "^7.12.13",
     "@babel/template": "^7.12.13",
     "@babel/traverse": "^7.12.13",
-    "@griffel/core": "^1.13.1",
+    "@griffel/core": "^1.14.1",
     "@linaria/babel-preset": "^3.0.0-beta.23",
     "@linaria/shaker": "^3.0.0-beta.22",
     "ajv": "^8.4.0",
diff --git a/packages/core/CHANGELOG.json b/packages/core/CHANGELOG.json
index 8665b55..50426ff 100644
--- a/packages/core/CHANGELOG.json
+++ b/packages/core/CHANGELOG.json
@@ -1,6 +1,70 @@
 {
   "name": "@griffel/core",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/core_v1.14.1",
+      "version": "1.14.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/core",
+            "comment": "Bump @griffel/style-types to v1.0.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/core_v1.14.0",
+      "version": "1.14.0",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "a1aca05ff590ec6cf81616f5c37549e3a2a3f52f",
+            "comment": "chore: remove unused ts-expect-error"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "a3267efa6d08ff72c4843320e09a1a06d1e35be5",
+            "comment": "chore: show bucket names in snapshots"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "bd37c4fe0b21b33c1d548f7abf1b8c58dd1e5280",
+            "comment": "chore(core): move prefixer to stylis directory"
+          }
+        ],
+        "minor": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "9f7710ee6638825ae2c20a240ced14e80dc3032b",
+            "comment": "feat: add API for styles insertion"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "f7c2f6208cac6e5f10a76b9503f0bee94f30df0f",
+            "comment": "feat: support variadic arguments in border* shorthands"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/core",
+            "commit": "c33da85cf8d176e47fd07012c41574a735753528",
+            "comment": "fix: makeResetStyles emits at rules into a separate bucket"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/core_v1.13.1",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 0bbba46..70a46a9 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,9 +1,30 @@
 # Change Log - @griffel/core
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.14.1
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/style-types to v1.0.1
+
+## 1.14.0
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Minor changes
+
+- feat: add API for styles insertion (olfedias@microsoft.com)
+- feat: support variadic arguments in border* shorthands (olfedias@microsoft.com)
+
+### Patches
+
+- fix: makeResetStyles emits at rules into a separate bucket (olfedias@microsoft.com)
+
 ## 1.13.1
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/core/package.json b/packages/core/package.json
index 134b111..b2dc57a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/core",
-  "version": "1.13.1",
+  "version": "1.14.1",
   "description": "DOM implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -10,7 +10,7 @@
   "sideEffects": false,
   "dependencies": {
     "@emotion/hash": "^0.9.0",
-    "@griffel/style-types": "^1.0.0",
+    "@griffel/style-types": "^1.0.1",
     "csstype": "^3.1.2",
     "rtl-css-js": "^1.16.1",
     "stylis": "^4.2.0",
diff --git a/packages/core/src/__resetStyles.ts b/packages/core/src/__resetStyles.ts
index 2d57114..138997f 100644
--- a/packages/core/src/__resetStyles.ts
+++ b/packages/core/src/__resetStyles.ts
@@ -1,7 +1,7 @@
 import { DEBUG_RESET_CLASSES } from './constants';
 import { insertionFactory } from './insertionFactory';
 import type { MakeResetStylesOptions } from './makeResetStyles';
-import type { GriffelInsertionFactory } from './types';
+import type { CSSRulesByBucket, GriffelInsertionFactory } from './types';
 
 /**
  * @internal
@@ -9,7 +9,7 @@ import type { GriffelInsertionFactory } from './types';
 export function __resetStyles(
   ltrClassName: string,
   rtlClassName: string | null,
-  cssRules: string[],
+  cssRules: CSSRulesByBucket | string[],
   factory: GriffelInsertionFactory = insertionFactory,
 ) {
   const insertStyles = factory();
@@ -18,7 +18,7 @@ export function __resetStyles(
     const { dir, renderer } = options;
     const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
 
-    insertStyles(renderer, { r: cssRules });
+    insertStyles(renderer, Array.isArray(cssRules) ? { r: cssRules! } : cssRules!);
 
     if (process.env.NODE_ENV !== 'production') {
       DEBUG_RESET_CLASSES[className] = 1;
diff --git a/packages/core/src/common/snapshotSerializers.ts b/packages/core/src/common/snapshotSerializers.ts
index c66fefb..c507ebc 100644
--- a/packages/core/src/common/snapshotSerializers.ts
+++ b/packages/core/src/common/snapshotSerializers.ts
@@ -77,9 +77,10 @@ export const griffelResetRulesSerializer: jest.SnapshotSerializerPlugin = {
      * test function makes sure that value is the guarded type
      */
     const _value = value as ReturnType<typeof resolveResetStyleRules>;
-    const cssRulesByBucket: CSSRulesByBucket = { r: _value[2] };
+    const cssRulesByBucket: CSSRulesByBucket = Array.isArray(_value[2]) ? { r: _value[2] } : _value[2];
 
     return Object.entries(cssRulesByBucket)
+      .filter(([key, value]) => value.length > 0)
       .flatMap(([key, value]) => [`/** bucket "${key}" */`, format(value as string[])])
       .join('\n');
   },
diff --git a/packages/core/src/makeResetStyles.ts b/packages/core/src/makeResetStyles.ts
index a9ed726..2de5158 100644
--- a/packages/core/src/makeResetStyles.ts
+++ b/packages/core/src/makeResetStyles.ts
@@ -3,8 +3,7 @@ import type { GriffelResetStyle } from '@griffel/style-types';
 import { DEBUG_RESET_CLASSES } from './constants';
 import { insertionFactory } from './insertionFactory';
 import { resolveResetStyleRules } from './runtime/resolveResetStyleRules';
-import type { GriffelRenderer } from './types';
-import type { GriffelInsertionFactory } from './types';
+import type { CSSRulesByBucket, GriffelRenderer, GriffelInsertionFactory } from './types';
 
 export interface MakeResetStylesOptions {
   dir: 'ltr' | 'rtl';
@@ -17,7 +16,7 @@ export function makeResetStyles(styles: GriffelResetStyle, factory: GriffelInser
   let ltrClassName: string | null = null;
   let rtlClassName: string | null = null;
 
-  let cssRules: string[] | null = null;
+  let cssRules: CSSRulesByBucket | string[] | null = null;
 
   function computeClassName(options: MakeResetStylesOptions): string {
     const { dir, renderer } = options;
@@ -26,7 +25,7 @@ export function makeResetStyles(styles: GriffelResetStyle, factory: GriffelInser
       [ltrClassName, rtlClassName, cssRules] = resolveResetStyleRules(styles);
     }
 
-    insertStyles(renderer, { r: cssRules! });
+    insertStyles(renderer, Array.isArray(cssRules) ? { r: cssRules! } : cssRules!);
 
     const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
 
diff --git a/packages/core/src/renderer/getStyleSheetForBucket.ts b/packages/core/src/renderer/getStyleSheetForBucket.ts
index bfa18f4..8418bac 100644
--- a/packages/core/src/renderer/getStyleSheetForBucket.ts
+++ b/packages/core/src/renderer/getStyleSheetForBucket.ts
@@ -26,6 +26,8 @@ export const styleBucketOrdering: StyleBucketName[] = [
   'h',
   // active
   'a',
+  // at rules for reset styles
+  's',
   // keyframes
   'k',
   // at-rules
diff --git a/packages/core/src/runtime/compileResetCSSRules.ts b/packages/core/src/runtime/compileResetCSSRules.ts
new file mode 100644
index 0000000..a5ebd27
--- /dev/null
+++ b/packages/core/src/runtime/compileResetCSSRules.ts
@@ -0,0 +1,34 @@
+import { compile, middleware, serialize, stringify } from 'stylis';
+
+import { globalPlugin } from './stylis/globalPlugin';
+import { isAtRuleElement } from './stylis/isAtRuleElement';
+import { prefixerPlugin } from './stylis/prefixerPlugin';
+import { rulesheetPlugin } from './stylis/rulesheetPlugin';
+
+export function compileResetCSSRules(cssRules: string): [string[], string[]] {
+  const rules: string[] = [];
+  const atRules: string[] = [];
+
+  serialize(
+    compile(cssRules),
+    middleware([
+      globalPlugin,
+      prefixerPlugin,
+      stringify,
+
+      // 💡 we are using `.insertRule()` API for DOM operations, which does not support
+      // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
+      // individual rules to be used with this API
+      rulesheetPlugin((element, rule) => {
+        if (isAtRuleElement(element)) {
+          atRules.push(rule);
+          return;
+        }
+
+        rules.push(rule);
+      }),
+    ]),
+  );
+
+  return [rules, atRules];
+}
diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
index 318e25d..ffb5b84 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -3,6 +3,7 @@ import type { GriffelResetStyle, GriffelAnimation } from '@griffel/style-types';
 import { convert, convertProperty } from 'rtl-css-js/core';
 
 import { RESET_HASH_PREFIX } from '../constants';
+import type { CSSRulesByBucket } from '../types';
 import { isMediaQuerySelector } from './utils/isMediaQuerySelector';
 import { isLayerSelector } from './utils/isLayerSelector';
 import { isNestedSelector } from './utils/isNestedSelector';
@@ -10,7 +11,7 @@ import { isSupportQuerySelector } from './utils/isSupportQuerySelector';
 import { isObject } from './utils/isObject';
 import { hyphenateProperty } from './utils/hyphenateProperty';
 import { normalizePseudoSelector } from './compileAtomicCSSRule';
-import { compileCSSRules } from './compileCSSRules';
+import { compileResetCSSRules } from './compileResetCSSRules';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
 import { isContainerQuerySelector } from './utils/isContainerQuerySelector';
 import { warnAboutUnresolvedRule } from './warnings/warnAboutUnresolvedRule';
@@ -135,18 +136,26 @@ function createStringFromStyles(styles: GriffelResetStyle) {
 /**
  * @internal
  */
-export function resolveResetStyleRules(styles: GriffelResetStyle): [string, string | null, string[]] {
+export function resolveResetStyleRules(
+  styles: GriffelResetStyle,
+): [string, string | null, CSSRulesByBucket | string[]] {
   const [ltrRule, rtlRule] = createStringFromStyles(styles);
 
   const ltrClassName = RESET_HASH_PREFIX + hashString(ltrRule);
-  const ltrCSS = compileCSSRules(`.${ltrClassName}{${ltrRule}}`, false);
+  const [ltrCSS, ltrCSSAtRules] = compileResetCSSRules(`.${ltrClassName}{${ltrRule}}`);
+
+  const hasAtRules = ltrCSSAtRules.length > 0;
 
   if (ltrRule === rtlRule) {
-    return [ltrClassName, null, ltrCSS];
+    return [ltrClassName, null, hasAtRules ? { r: ltrCSS, s: ltrCSSAtRules } : ltrCSS];
   }
 
   const rtlClassName = RESET_HASH_PREFIX + hashString(rtlRule);
-  const rtlCSS = compileCSSRules(`.${rtlClassName}{${rtlRule}}`, false);
+  const [rtlCSS, rtlCSSAtRules] = compileResetCSSRules(`.${rtlClassName}{${rtlRule}}`);
 
-  return [ltrClassName, rtlClassName, ltrCSS.concat(rtlCSS)];
+  return [
+    ltrClassName,
+    rtlClassName,
+    hasAtRules ? { r: ltrCSS.concat(rtlCSS), s: ltrCSSAtRules.concat(rtlCSSAtRules) } : ltrCSS.concat(rtlCSS),
+  ];
 }
diff --git a/packages/core/src/runtime/stylis/isAtRuleElement.ts b/packages/core/src/runtime/stylis/isAtRuleElement.ts
new file mode 100644
index 0000000..b6b32b1
--- /dev/null
+++ b/packages/core/src/runtime/stylis/isAtRuleElement.ts
@@ -0,0 +1,14 @@
+import { LAYER, MEDIA, SUPPORTS } from 'stylis';
+import type { Element } from 'stylis';
+
+export function isAtRuleElement(element: Element): boolean {
+  switch (element.type) {
+    case '@container':
+    case MEDIA:
+    case SUPPORTS:
+    case LAYER:
+      return true;
+  }
+
+  return false;
+}
diff --git a/packages/core/src/runtime/stylis/rulesheetPlugin.ts b/packages/core/src/runtime/stylis/rulesheetPlugin.ts
new file mode 100644
index 0000000..49419e6
--- /dev/null
+++ b/packages/core/src/runtime/stylis/rulesheetPlugin.ts
@@ -0,0 +1,16 @@
+import type { Element, Middleware } from 'stylis';
+
+export type RulesheetPluginCallback = (type: Element, rule: string) => void;
+
+/**
+ * The same plugin as in stylis, but this version also has "element" argument.
+ */
+export function rulesheetPlugin(callback: RulesheetPluginCallback): Middleware {
+  return function (element) {
+    if (!element.root) {
+      if (element.return) {
+        callback(element, element.return);
+      }
+    }
+  };
+}
diff --git a/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.ts b/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.ts
index 030aa35..455b2f4 100644
--- a/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.ts
+++ b/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.ts
@@ -1,13 +1,8 @@
-import { LAYER, MEDIA, SUPPORTS } from 'stylis';
 import type { Middleware } from 'stylis';
+import { isAtRuleElement } from './isAtRuleElement';
 
 export const sortClassesInAtRulesPlugin: Middleware = element => {
-  switch (element.type) {
-    case MEDIA:
-    case SUPPORTS:
-    case LAYER:
-      if (Array.isArray(element.children)) {
-        element.children.sort((a, b) => (a.props[0] > b.props[0] ? 1 : -1));
-      }
+  if (isAtRuleElement(element) && Array.isArray(element.children)) {
+    element.children.sort((a, b) => (a.props[0] > b.props[0] ? 1 : -1));
   }
 };
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 0f91f2e..0df1025 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -77,6 +77,8 @@ export type CSSRulesByBucket = {
   h?: CSSBucketEntry[];
   // active
   a?: CSSBucketEntry[];
+  // at rules for reset
+  s?: CSSBucketEntry[];
   // @keyframes definitions
   k?: CSSBucketEntry[];
   // at-rules (@support, @layer)
diff --git a/packages/devtools/CHANGELOG.json b/packages/devtools/CHANGELOG.json
index 6b9e6f1..c6a83d1 100644
--- a/packages/devtools/CHANGELOG.json
+++ b/packages/devtools/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/devtools",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/devtools_v0.2.20",
+      "version": "0.2.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/devtools",
+            "comment": "Bump @griffel/react to v1.5.14",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/devtools_v0.2.19",
+      "version": "0.2.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/devtools",
+            "comment": "Bump @griffel/react to v1.5.13",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/devtools_v0.2.18",
diff --git a/packages/devtools/CHANGELOG.md b/packages/devtools/CHANGELOG.md
index e17edde..f73e466 100644
--- a/packages/devtools/CHANGELOG.md
+++ b/packages/devtools/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/devtools
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.2.20
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/react to v1.5.14
+
+## 0.2.19
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/react to v1.5.13
+
 ## 0.2.18
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index bac76bc..00646a7 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/devtools",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "Griffel chrome devtools extension",
   "license": "MIT",
   "repository": {
@@ -8,6 +8,6 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "devDependencies": {
-    "@griffel/react": "^1.5.12"
+    "@griffel/react": "^1.5.14"
   }
 }
diff --git a/packages/jest-serializer/CHANGELOG.json b/packages/jest-serializer/CHANGELOG.json
index b2922e0..da4e77c 100644
--- a/packages/jest-serializer/CHANGELOG.json
+++ b/packages/jest-serializer/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/jest-serializer",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/jest-serializer_v1.1.16",
+      "version": "1.1.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/jest-serializer",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/jest-serializer_v1.1.15",
+      "version": "1.1.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/jest-serializer",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/jest-serializer_v1.1.14",
diff --git a/packages/jest-serializer/CHANGELOG.md b/packages/jest-serializer/CHANGELOG.md
index 0ca5729..ed1e768 100644
--- a/packages/jest-serializer/CHANGELOG.md
+++ b/packages/jest-serializer/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/jest-serializer
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.16
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 1.1.15
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.0
+
 ## 1.1.14
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/jest-serializer/package.json b/packages/jest-serializer/package.json
index 932c28e..27aae91 100644
--- a/packages/jest-serializer/package.json
+++ b/packages/jest-serializer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/jest-serializer",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "Jest serializer for Griffel",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "dependencies": {
-    "@griffel/core": "^1.13.1",
+    "@griffel/core": "^1.14.1",
     "tslib": "^2.1.0"
   }
 }
diff --git a/packages/next-extraction-plugin/CHANGELOG.json b/packages/next-extraction-plugin/CHANGELOG.json
index 5121cbf..75649d2 100644
--- a/packages/next-extraction-plugin/CHANGELOG.json
+++ b/packages/next-extraction-plugin/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/next-extraction-plugin",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/next-extraction-plugin_v0.0.27",
+      "version": "0.0.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/next-extraction-plugin",
+            "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.18",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/next-extraction-plugin_v0.0.26",
+      "version": "0.0.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/next-extraction-plugin",
+            "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.17",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/next-extraction-plugin_v0.0.25",
diff --git a/packages/next-extraction-plugin/CHANGELOG.md b/packages/next-extraction-plugin/CHANGELOG.md
index 4139336..de6e5b4 100644
--- a/packages/next-extraction-plugin/CHANGELOG.md
+++ b/packages/next-extraction-plugin/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/next-extraction-plugin
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.0.27
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/webpack-extraction-plugin to v0.3.18
+
+## 0.0.26
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/webpack-extraction-plugin to v0.3.17
+
 ## 0.0.25
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/next-extraction-plugin/package.json b/packages/next-extraction-plugin/package.json
index a68c6b6..1a2c778 100644
--- a/packages/next-extraction-plugin/package.json
+++ b/packages/next-extraction-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/next-extraction-plugin",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "NextJS plugin that add Griffel's CSS extraction to webpack loaders pipeline",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "dependencies": {
-    "@griffel/webpack-extraction-plugin": "^0.3.16",
+    "@griffel/webpack-extraction-plugin": "^0.3.18",
     "browserslist": "^4.19.1",
     "tslib": "^2.1.0"
   },
diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json
index 5413942..86599c8 100644
--- a/packages/react/CHANGELOG.json
+++ b/packages/react/CHANGELOG.json
@@ -1,6 +1,48 @@
 {
   "name": "@griffel/react",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/react_v1.5.14",
+      "version": "1.5.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/react_v1.5.13",
+      "version": "1.5.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47",
+            "comment": "chore: improve React 18 support by using useInsertionEffect"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/react",
+            "commit": "c33da85cf8d176e47fd07012c41574a735753528",
+            "comment": "chore: add support for different buckets in makeResetStyles"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/react_v1.5.12",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index eaf185c..90aa870 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @griffel/react
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.5.14
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 1.5.13
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- chore: improve React 18 support by using useInsertionEffect (olfedias@microsoft.com)
+- chore: add support for different buckets in makeResetStyles (olfedias@microsoft.com)
+- Bump @griffel/core to v1.14.0
+
 ## 1.5.12
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/react/package.json b/packages/react/package.json
index 018ad79..0fa9154 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.5.12",
+  "version": "1.5.14",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.13.1",
+    "@griffel/core": "^1.14.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/react/src/RendererContext.tsx b/packages/react/src/RendererContext.tsx
index 62e470e..dcf53d5 100644
--- a/packages/react/src/RendererContext.tsx
+++ b/packages/react/src/RendererContext.tsx
@@ -1,6 +1,8 @@
 import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
-import * as React from 'react';
 import type { GriffelRenderer } from '@griffel/core';
+import * as React from 'react';
+
+import { canUseDOM } from './utils/canUseDOM';
 
 export interface RendererProviderProps {
   /** An instance of Griffel renderer. */
@@ -17,13 +19,6 @@ export interface RendererProviderProps {
   children: React.ReactNode;
 }
 
-/**
- * Verifies if an application can use DOM.
- */
-function canUseDOM(): boolean {
-  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
-}
-
 /**
  * @private
  */
diff --git a/packages/react/src/__resetStyles.ts b/packages/react/src/__resetStyles.ts
index 7bad4e0..c337206 100644
--- a/packages/react/src/__resetStyles.ts
+++ b/packages/react/src/__resetStyles.ts
@@ -1,5 +1,7 @@
 import { __resetStyles as vanillaResetStyles } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
 
+import { insertionFactory } from './insertionFactory';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
 
@@ -9,8 +11,12 @@ import { useTextDirection } from './TextDirectionContext';
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {
-  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);
+export function __resetStyles(
+  ltrClassName: string,
+  rtlClassName: string | null,
+  cssRules: CSSRulesByBucket | string[],
+) {
+  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);
 
   return function useClasses(): string {
     const dir = useTextDirection();
diff --git a/packages/react/src/__styles.ts b/packages/react/src/__styles.ts
index 345627e..bcfb237 100644
--- a/packages/react/src/__styles.ts
+++ b/packages/react/src/__styles.ts
@@ -1,6 +1,7 @@
 import { __styles as vanillaStyles } from '@griffel/core';
 import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
 
+import { insertionFactory } from './insertionFactory';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
 
@@ -14,7 +15,7 @@ export function __styles<Slots extends string>(
   classesMapBySlot: CSSClassesMapBySlot<Slots>,
   cssRules: CSSRulesByBucket,
 ) {
-  const getStyles = vanillaStyles(classesMapBySlot, cssRules);
+  const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);
 
   return function useClasses(): Record<Slots, string> {
     const dir = useTextDirection();
diff --git a/packages/react/src/insertionFactory.ts b/packages/react/src/insertionFactory.ts
new file mode 100644
index 0000000..c4ad719
--- /dev/null
+++ b/packages/react/src/insertionFactory.ts
@@ -0,0 +1,25 @@
+import type { CSSRulesByBucket, GriffelInsertionFactory, GriffelRenderer } from '@griffel/core';
+
+import { canUseDOM } from './utils/canUseDOM';
+import { useInsertionEffect } from './useInsertionEffect';
+
+export const insertionFactory: GriffelInsertionFactory = () => {
+  const insertionCache: Record<string, boolean> = {};
+
+  return function insert(renderer: GriffelRenderer, cssRules: CSSRulesByBucket) {
+    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+    if (useInsertionEffect && canUseDOM()) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useInsertionEffect(() => {
+        renderer.insertCSSRules(cssRules!);
+      }, [renderer, cssRules]);
+
+      return;
+    }
+
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules!);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};
diff --git a/packages/react/src/makeResetStyles.ts b/packages/react/src/makeResetStyles.ts
index a42b980..7ebf072 100644
--- a/packages/react/src/makeResetStyles.ts
+++ b/packages/react/src/makeResetStyles.ts
@@ -1,12 +1,13 @@
 import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';
 import type { GriffelResetStyle } from '@griffel/core';
 
-import { isInsideComponent } from './utils/isInsideComponent';
+import { insertionFactory } from './insertionFactory';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
+import { isInsideComponent } from './utils/isInsideComponent';
 
 export function makeResetStyles(styles: GriffelResetStyle) {
-  const getStyles = vanillaMakeResetStyles(styles);
+  const getStyles = vanillaMakeResetStyles(styles, insertionFactory);
 
   if (process.env.NODE_ENV !== 'production') {
     if (isInsideComponent()) {
diff --git a/packages/react/src/makeStaticStyles.ts b/packages/react/src/makeStaticStyles.ts
index dd3bc29..e60611b 100644
--- a/packages/react/src/makeStaticStyles.ts
+++ b/packages/react/src/makeStaticStyles.ts
@@ -1,10 +1,11 @@
 import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';
+import type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';
 
+import { insertionFactory } from './insertionFactory';
 import { useRenderer } from './RendererContext';
-import type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';
 
 export function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {
-  const getStyles = vanillaMakeStaticStyles(styles);
+  const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);
 
   if (process.env.NODE_ENV === 'test') {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/packages/react/src/makeStyles.ts b/packages/react/src/makeStyles.ts
index f999675..e4090d5 100644
--- a/packages/react/src/makeStyles.ts
+++ b/packages/react/src/makeStyles.ts
@@ -1,12 +1,13 @@
 import { makeStyles as vanillaMakeStyles } from '@griffel/core';
 import type { GriffelStyle } from '@griffel/core';
 
-import { isInsideComponent } from './utils/isInsideComponent';
+import { insertionFactory } from './insertionFactory';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
+import { isInsideComponent } from './utils/isInsideComponent';
 
 export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
-  const getStyles = vanillaMakeStyles(stylesBySlots);
+  const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);
 
   if (process.env.NODE_ENV !== 'production') {
     if (isInsideComponent()) {
diff --git a/packages/react/src/useInsertionEffect.ts b/packages/react/src/useInsertionEffect.ts
new file mode 100644
index 0000000..fe5e8c5
--- /dev/null
+++ b/packages/react/src/useInsertionEffect.ts
@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export const useInsertionEffect: typeof React.useInsertionEffect | undefined =
+  // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+  // eslint-disable-next-line no-useless-concat
+  React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;
diff --git a/packages/react/src/utils/canUseDOM.ts b/packages/react/src/utils/canUseDOM.ts
new file mode 100644
index 0000000..d11d3ff
--- /dev/null
+++ b/packages/react/src/utils/canUseDOM.ts
@@ -0,0 +1,6 @@
+/**
+ * Verifies if an application can use DOM.
+ */
+export function canUseDOM(): boolean {
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+}
diff --git a/packages/shadow-dom/CHANGELOG.json b/packages/shadow-dom/CHANGELOG.json
index 8e46ec6..0462cca 100644
--- a/packages/shadow-dom/CHANGELOG.json
+++ b/packages/shadow-dom/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/shadow-dom",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/shadow-dom_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/shadow-dom",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/shadow-dom_v0.1.4",
+      "version": "0.1.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/shadow-dom",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/shadow-dom_v0.1.3",
diff --git a/packages/shadow-dom/CHANGELOG.md b/packages/shadow-dom/CHANGELOG.md
index b5cd278..8615f7e 100644
--- a/packages/shadow-dom/CHANGELOG.md
+++ b/packages/shadow-dom/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/shadow-dom
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.1.5
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 0.1.4
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.0
+
 ## 0.1.3
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/shadow-dom/package.json b/packages/shadow-dom/package.json
index d211656..34e4376 100644
--- a/packages/shadow-dom/package.json
+++ b/packages/shadow-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/shadow-dom",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Shadow DOM implementation of Griffel Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.13.1",
+    "@griffel/core": "^1.14.1",
     "tslib": "^2.1.0"
   }
 }
diff --git a/packages/style-types/CHANGELOG.json b/packages/style-types/CHANGELOG.json
index 016091d..0f53684 100644
--- a/packages/style-types/CHANGELOG.json
+++ b/packages/style-types/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@griffel/style-types",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/style-types_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/style-types",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f",
+            "comment": "fix: update types for \"animationName\""
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/style-types_v1.0.0",
diff --git a/packages/style-types/CHANGELOG.md b/packages/style-types/CHANGELOG.md
index d7698b6..22363d9 100644
--- a/packages/style-types/CHANGELOG.md
+++ b/packages/style-types/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @griffel/style-types
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.0.1
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- fix: update types for "animationName" (olfedias@microsoft.com)
+
 ## 1.0.0
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/style-types/package.json b/packages/style-types/package.json
index ec9fa5e..17c4020 100644
--- a/packages/style-types/package.json
+++ b/packages/style-types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/style-types",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Provides types for Griffel style objects",
   "license": "MIT",
   "repository": {
diff --git a/packages/style-types/src/makeResetStyles.ts b/packages/style-types/src/makeResetStyles.ts
index b084d64..9261d7a 100644
--- a/packages/style-types/src/makeResetStyles.ts
+++ b/packages/style-types/src/makeResetStyles.ts
@@ -23,5 +23,5 @@ type GriffelCSSPseudos = {
   [Property in CSS.Pseudos]?: GriffelResetStylesStrictCSSObject | GriffelCSSObjectCustom;
 };
 
-export type GriffelResetAnimation = Record<'from' | 'to' | string, GriffelCSSObjectCustom>;
+export type GriffelResetAnimation = Record<'from' | 'to' | string, GriffelResetStylesCSSProperties>;
 export type GriffelResetStyle = GriffelResetStylesStrictCSSObject | GriffelCSSObjectCustom;
diff --git a/packages/style-types/src/makeStyles.ts b/packages/style-types/src/makeStyles.ts
index 9fb53a5..c96802e 100644
--- a/packages/style-types/src/makeStyles.ts
+++ b/packages/style-types/src/makeStyles.ts
@@ -12,9 +12,12 @@ type GriffelStylesCSSProperties = Omit<
   CSS.PropertiesFallback<GriffelStylesCSSValue>,
   // We have custom definition for "animationName"
   'animationName'
-> & { animationName?: GriffelAnimation | GriffelAnimation[] | string } & Partial<GriffelStylesUnsupportedCSSProperties>;
+> &
+  Partial<GriffelStylesUnsupportedCSSProperties>;
 
-export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties & GriffelCSSPseudos;
+export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties & {
+  animationName?: GriffelAnimation | GriffelAnimation[] | string;
+} & GriffelCSSPseudos;
 
 type GriffelCSSObjectCustom = {
   [Property: string]: GriffelStyle | GriffelStylesCSSValue;
@@ -24,5 +27,5 @@ type GriffelCSSPseudos = {
   [Property in CSS.Pseudos]?: GriffelStylesStrictCSSObject | GriffelCSSObjectCustom;
 };
 
-export type GriffelAnimation = Record<'from' | 'to' | string, GriffelCSSObjectCustom>;
+export type GriffelAnimation = Record<'from' | 'to' | string, GriffelStylesCSSProperties>;
 export type GriffelStyle = GriffelStylesStrictCSSObject | GriffelCSSObjectCustom;
diff --git a/packages/webpack-extraction-plugin/CHANGELOG.json b/packages/webpack-extraction-plugin/CHANGELOG.json
index 7b5d3e6..5210ade 100644
--- a/packages/webpack-extraction-plugin/CHANGELOG.json
+++ b/packages/webpack-extraction-plugin/CHANGELOG.json
@@ -1,6 +1,48 @@
 {
   "name": "@griffel/webpack-extraction-plugin",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/webpack-extraction-plugin_v0.3.18",
+      "version": "0.3.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-extraction-plugin",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/webpack-extraction-plugin_v0.3.17",
+      "version": "0.3.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/webpack-extraction-plugin",
+            "commit": "9e29013645e396ee9af1189641936fa6670a3133",
+            "comment": "fix: do not emit empty CSS files"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@griffel/webpack-extraction-plugin",
+            "commit": "c33da85cf8d176e47fd07012c41574a735753528",
+            "comment": "chore: add support for different buckets in makeResetStyles"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-extraction-plugin",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/webpack-extraction-plugin_v0.3.16",
diff --git a/packages/webpack-extraction-plugin/CHANGELOG.md b/packages/webpack-extraction-plugin/CHANGELOG.md
index 25a87a9..4ed0d1c 100644
--- a/packages/webpack-extraction-plugin/CHANGELOG.md
+++ b/packages/webpack-extraction-plugin/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @griffel/webpack-extraction-plugin
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.3.18
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 0.3.17
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- fix: do not emit empty CSS files (olfedias@microsoft.com)
+- chore: add support for different buckets in makeResetStyles (olfedias@microsoft.com)
+- Bump @griffel/core to v1.14.0
+
 ## 0.3.16
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts
index 30545ef..161d862 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts
@@ -1,5 +1,5 @@
 import { __resetStyles } from '@griffel/react';
-export const useClassName = __resetStyles('r13wlxb8', null, [
-  '.r13wlxb8{line-height:0;}',
-  '@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}',
-]);
+export const useClassName = __resetStyles('rjrhw4c', null, {
+  r: ['.rjrhw4c{color:red;}'],
+  s: ['@supports (display: flex){.rjrhw4c{color:pink;}}', '@media (min-width: 100px){.rjrhw4c{color:blue;}}'],
+});
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css
index 20c9f1e..b8c0f89 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css
@@ -1,9 +1,14 @@
 /** griffel.css **/
-.r13wlxb8 {
-  line-height: 0;
+.rjrhw4c {
+  color: red;
 }
-@media screen and (prefers-reduced-motion: reduce) {
-  .r13wlxb8 {
-    transition-duration: 0.01ms;
+@supports (display: flex) {
+  .rjrhw4c {
+    color: pink;
+  }
+}
+@media (min-width: 100px) {
+  .rjrhw4c {
+    color: blue;
   }
 }
diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json
index f1db2ec..bed8f47 100644
--- a/packages/webpack-extraction-plugin/package.json
+++ b/packages/webpack-extraction-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/webpack-extraction-plugin",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "description": "Webpack plugin that performs CSS extraction for Griffel",
   "license": "MIT",
   "repository": {
@@ -11,7 +11,7 @@
     "@babel/core": "^7.12.13",
     "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
-    "@griffel/core": "^1.13.1",
+    "@griffel/core": "^1.14.1",
     "stylis": "^4.2.0",
     "tslib": "^2.1.0"
   },
diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
index 02f0f04..ff5cc1b 100644
--- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
+++ b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
@@ -47,9 +47,12 @@ function evaluateAndUpdateArgument(
 
     state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
   } else if (functionKind === '__resetStyles') {
-    const cssRules = evaluationResult.value as NonNullable<CSSRulesByBucket['r']>;
+    const cssRules = evaluationResult.value as CSSRulesByBucket | string[];
 
-    state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, { r: cssRules });
+    state.cssRulesByBucket = concatCSSRulesByBucket(
+      state.cssRulesByBucket,
+      Array.isArray(cssRules) ? { r: cssRules } : cssRules,
+    );
   }
 
   argumentPath.remove();
@@ -68,7 +71,7 @@ function getFunctionArgumentPath(
   }
 
   if (functionKind === '__resetStyles') {
-    if (argumentPaths.length === 3 && argumentPaths[2].isArrayExpression()) {
+    if (argumentPaths.length === 3 && (argumentPaths[2].isArrayExpression() || argumentPaths[2].isObjectExpression())) {
       return argumentPaths[2];
     }
   }
diff --git a/packages/webpack-loader/CHANGELOG.json b/packages/webpack-loader/CHANGELOG.json
index a43af79..e9a3cd5 100644
--- a/packages/webpack-loader/CHANGELOG.json
+++ b/packages/webpack-loader/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@griffel/webpack-loader",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/webpack-loader_v2.1.20",
+      "version": "2.1.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-loader",
+            "comment": "Bump @griffel/babel-preset to v1.4.20",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/webpack-loader_v2.1.19",
+      "version": "2.1.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/webpack-loader",
+            "comment": "Bump @griffel/babel-preset to v1.4.19",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:32:54 GMT",
       "tag": "@griffel/webpack-loader_v2.1.18",
diff --git a/packages/webpack-loader/CHANGELOG.md b/packages/webpack-loader/CHANGELOG.md
index b4dfa7f..4c84b34 100644
--- a/packages/webpack-loader/CHANGELOG.md
+++ b/packages/webpack-loader/CHANGELOG.md
@@ -1,9 +1,25 @@
 # Change Log - @griffel/webpack-loader
 
-This log was last generated on Wed, 19 Jul 2023 07:32:54 GMT and should not be manually modified.
+This log was last generated on Mon, 31 Jul 2023 12:18:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.1.20
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.4.20
+
+## 2.1.19
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.4.19
+
 ## 2.1.18
 
 Wed, 19 Jul 2023 07:32:54 GMT
diff --git a/packages/webpack-loader/README.md b/packages/webpack-loader/README.md
index a346662..d411de3 100644
--- a/packages/webpack-loader/README.md
+++ b/packages/webpack-loader/README.md
@@ -10,6 +10,7 @@ A loader for Webpack 5 that performs build time transforms for [`@griffel/react`
 - [Usage](#usage)
   - [Handling Griffel re-exports](#handling-griffel-re-exports)
   - [Configuring Babel settings](#configuring-babel-settings)
+  - [Configuring webpack resolve options](#configuring-webpack-resolve-options)
   - [Configuring module evaluation](#configuring-module-evaluation)
 - [Troubleshooting](#troubleshooting)
 
@@ -157,6 +158,29 @@ module.exports = {
 };
 ```
 
+### Configuring webpack resolve options
+If your `@griffel/react` modules import other files (eg., a set of common mixins or colors for your app), the loader resolves these using `enhanced-resolve`. By default, it inherits the settings `resolve.alias`, `resolve.modules`, and `resolve.modules` from your Webpack config, while using its own default values for `resolve.extensions` and `resolve.conditionNames`.
+
+If you want to change this behavior, you can choose which [`resolve` options](https://webpack.js.org/configuration/resolve/) are inherited from your Webpack config.
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            inheritResolveOptions: ['alias', 'modules', 'plugins', 'conditionNames'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### Configuring module evaluation
 
 ```js
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts
new file mode 100644
index 0000000..daf6f7f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+import color from './color';
+
+export const styles = makeStyles({
+  root: {
+    backgroundColor: color,
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.jsx b/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.jsx
new file mode 100644
index 0000000..cd0cebe
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.jsx
@@ -0,0 +1,3 @@
+const color = 'blue';
+
+export default color;
\ No newline at end of file
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts
new file mode 100644
index 0000000..3e9985b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts
@@ -0,0 +1,12 @@
+import { __styles } from '@griffel/react';
+import color from './color';
+export const styles = __styles(
+  {
+    root: {
+      De3pzq: 'f1bh81bl',
+    },
+  },
+  {
+    d: ['.f1bh81bl{background-color:blue;}'],
+  },
+);
diff --git a/packages/webpack-loader/package.json b/packages/webpack-loader/package.json
index 53ba980..7b3acc6 100644
--- a/packages/webpack-loader/package.json
+++ b/packages/webpack-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@griffel/webpack-loader",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "description": "Webpack loader that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
-    "@griffel/babel-preset": "^1.4.18",
+    "@griffel/babel-preset": "^1.4.20",
     "enhanced-resolve": "^5.8.2",
     "tslib": "^2.1.0"
   },
diff --git a/packages/webpack-loader/src/schema.ts b/packages/webpack-loader/src/schema.ts
new file mode 100644
index 0000000..1764c17
--- /dev/null
+++ b/packages/webpack-loader/src/schema.ts
@@ -0,0 +1,13 @@
+import type { JSONSchema7 } from 'json-schema';
+import { configSchema } from '@griffel/babel-preset';
+
+export const optionsSchema: JSONSchema7 = {
+  ...configSchema,
+  properties: {
+    ...configSchema.properties,
+    inheritResolveOptions: {
+      type: 'array',
+      items: { type: 'string', enum: ['alias', 'modules', 'plugins', 'conditionNames', 'extensions'] },
+    },
+  },
+};
diff --git a/packages/webpack-loader/src/webpackLoader.ts b/packages/webpack-loader/src/webpackLoader.ts
index 798ff7b..5ef1cdb 100644
--- a/packages/webpack-loader/src/webpackLoader.ts
+++ b/packages/webpack-loader/src/webpackLoader.ts
@@ -1,11 +1,14 @@
-import { configSchema, BabelPluginOptions, EvalCache, Module } from '@griffel/babel-preset';
+import { BabelPluginOptions, EvalCache, Module } from '@griffel/babel-preset';
 import * as enhancedResolve from 'enhanced-resolve';
 import * as path from 'path';
 import * as webpack from 'webpack';
 
 import { transformSync, TransformResult, TransformOptions } from './transformSync';
+import { optionsSchema } from './schema';
 
-export type WebpackLoaderOptions = BabelPluginOptions;
+export type WebpackLoaderOptions = BabelPluginOptions & {
+  inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[];
+};
 
 type WebpackLoaderParams = Parameters<webpack.LoaderDefinitionFunction<WebpackLoaderOptions>>;
 
@@ -46,10 +49,10 @@ export function webpackLoader(
   // https://github.com/webpack/webpack/issues/14946
   this.cacheable();
 
-  const options = this.getOptions(configSchema);
+  const { inheritResolveOptions = ['alias', 'modules', 'plugins'], ...babelConfig } = this.getOptions(optionsSchema);
 
   // Early return to handle cases when makeStyles() calls are not present, allows to avoid expensive invocation of Babel
-  if (!shouldTransformSourceCode(sourceCode, options.modules)) {
+  if (!shouldTransformSourceCode(sourceCode, babelConfig.modules)) {
     this.callback(null, sourceCode, inputSourceMap);
     return;
   }
@@ -68,9 +71,12 @@ export function webpackLoader(
 
   const resolveSync = enhancedResolve.create.sync({
     ...resolveOptionsDefaults,
-    alias: resolveOptionsFromWebpackConfig.alias,
-    modules: resolveOptionsFromWebpackConfig.modules,
-    plugins: resolveOptionsFromWebpackConfig.plugins,
+    ...Object.fromEntries(
+      inheritResolveOptions.map(resolveOptionKey => [
+        resolveOptionKey,
+        resolveOptionsFromWebpackConfig[resolveOptionKey],
+      ]),
+    ),
   });
 
   const originalResolveFilename = Module._resolveFilename;
@@ -101,7 +107,7 @@ export function webpackLoader(
       enableSourceMaps: this.sourceMap || false,
       inputSourceMap: parseSourceMap(inputSourceMap),
 
-      pluginOptions: options,
+      pluginOptions: babelConfig,
     });
   } catch (err) {
     error = err as Error;


Test patch:
diff --git a/e2e/typescript/src/assets/fixture-reset.ts b/e2e/typescript/src/assets/fixture-reset.ts
index 51749f5..73c5921 100644
--- a/e2e/typescript/src/assets/fixture-reset.ts
+++ b/e2e/typescript/src/assets/fixture-reset.ts
@@ -6,6 +6,31 @@ function assertType(style: GriffelResetStyle): GriffelResetStyle {
 
 // Animation
 assertType({ animationName: 'foo' });
+assertType({
+  animationName: {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+});
+assertType({
+  animationName: [
+    {
+      from: { opacity: 0 },
+      to: { opacity: 0 },
+    },
+    {
+      from: { height: 0 },
+      to: { height: '200px' },
+    },
+  ],
+});
+
+assertType({
+  // @ts-expect-error "200" is not a valid CSS value for "height"
+  animationName: {
+    to: { height: 200 },
+  },
+});
 
 // Basic styles
 //
diff --git a/e2e/typescript/src/assets/fixture.ts b/e2e/typescript/src/assets/fixture.ts
index 7e6a74a..bf60a9b 100644
--- a/e2e/typescript/src/assets/fixture.ts
+++ b/e2e/typescript/src/assets/fixture.ts
@@ -6,6 +6,31 @@ function assertType(style: GriffelStyle): GriffelStyle {
 
 // Animation
 assertType({ animationName: 'foo' });
+assertType({
+  animationName: {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+});
+assertType({
+  animationName: [
+    {
+      from: { opacity: 0 },
+      to: { opacity: 0 },
+    },
+    {
+      from: { height: 0 },
+      to: { height: '200px' },
+    },
+  ],
+});
+
+assertType({
+  // @ts-expect-error "200" is not a valid CSS value for "height"
+  animationName: {
+    to: { height: 200 },
+  },
+});
 
 // Basic styles
 //
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index f2ed1a3..c038021 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -181,6 +181,11 @@ pluginTester({
       fixture: path.resolve(fixturesDir, 'assets-reset-styles', 'code.ts'),
       outputFixture: path.resolve(fixturesDir, 'assets-reset-styles', 'output.ts'),
     },
+    {
+      title: 'reset: at rules',
+      fixture: path.resolve(fixturesDir, 'reset-styles-at-rules', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'reset-styles-at-rules', 'output.ts'),
+    },
 
     // Imports
     //
diff --git a/packages/core/src/makeResetStyles.test.ts b/packages/core/src/makeResetStyles.test.ts
index c548250..2cbf842 100644
--- a/packages/core/src/makeResetStyles.test.ts
+++ b/packages/core/src/makeResetStyles.test.ts
@@ -51,4 +51,25 @@ describe('makeResetStyles', () => {
       }
     `);
   });
+
+  it('handles at rules', () => {
+    const computeClassName = makeResetStyles({
+      color: 'red',
+      '@media (min-width: 100px)': { color: 'blue' },
+    });
+
+    expect(computeClassName({ dir: 'ltr', renderer })).toEqual('rbwcbv2');
+    expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "r" **/
+      .rbwcbv2 {
+        color: red;
+      }
+      /** bucket "s" **/
+      @media (min-width: 100px) {
+        .rbwcbv2 {
+          color: blue;
+        }
+      }
+    `);
+  });
 });
diff --git a/packages/core/src/renderer/getStyleSheetForBucket.test.ts b/packages/core/src/renderer/getStyleSheetForBucket.test.ts
index 04685b6..082b27d 100644
--- a/packages/core/src/renderer/getStyleSheetForBucket.test.ts
+++ b/packages/core/src/renderer/getStyleSheetForBucket.test.ts
@@ -54,6 +54,7 @@ describe('getStyleSheetForBucket', () => {
     getStyleSheetForBucket('t', target, null, renderer);
     getStyleSheetForBucket('k', target, null, renderer);
     getStyleSheetForBucket('f', target, null, renderer);
+    getStyleSheetForBucket('s', target, null, renderer);
 
     const styleElements = target.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
     const styleElementOrder = Array.from(styleElements).map(styleElement =>
diff --git a/packages/core/src/runtime/compileResetCSSRules.test.ts b/packages/core/src/runtime/compileResetCSSRules.test.ts
new file mode 100644
index 0000000..6e09f83
--- /dev/null
+++ b/packages/core/src/runtime/compileResetCSSRules.test.ts
@@ -0,0 +1,23 @@
+import { compileResetCSSRules } from './compileResetCSSRules';
+
+describe('compileCSSRules', () => {
+  it('compiles CSS rules', () => {
+    const cssRules = `
+      .foo {
+        color: red;
+        @media (min-width: 768px) { color: blue }
+      }
+    `;
+
+    expect(compileResetCSSRules(cssRules)).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          ".foo{color:red;}",
+        ],
+        Array [
+          "@media (min-width: 768px){.foo{color:blue;}}",
+        ],
+      ]
+    `);
+  });
+});
diff --git a/packages/core/src/runtime/resolveResetStyleRules.test.ts b/packages/core/src/runtime/resolveResetStyleRules.test.ts
index ce2a533..14f45fd 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.test.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.test.ts
@@ -102,7 +102,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      /** bucket "r" */
+      /** bucket "s" */
       @container foo (max-width: 1px) {
         .rmph5rz {
           color: orange;
@@ -119,7 +119,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      /** bucket "r" */
+      /** bucket "s" */
       @container (max-width: 1px) {
         .r1ph1abo {
           color: orange;
@@ -144,6 +144,7 @@ describe('resolveResetStyleRules', () => {
       .rpycl1b {
         color: red;
       }
+      /** bucket "s" */
       @media (forced-colors: active) {
         .rpycl1b {
           color: orange;
@@ -166,7 +167,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      /** bucket "r" */
+      /** bucket "s" */
       @layer utilities {
         .rvhnavh {
           color: orange;
@@ -189,7 +190,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      /** bucket "r" */
+      /** bucket "s" */
       @supports (display: flex) {
         .rxf8lon {
           color: orange;
@@ -213,7 +214,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      /** bucket "r" */
+      /** bucket "s" */
       @supports (display: flex) {
         .rhd25ja {
           color: pink;
diff --git a/packages/core/src/runtime/stylis/isAtRuleElement.test.ts b/packages/core/src/runtime/stylis/isAtRuleElement.test.ts
new file mode 100644
index 0000000..5639f1a
--- /dev/null
+++ b/packages/core/src/runtime/stylis/isAtRuleElement.test.ts
@@ -0,0 +1,15 @@
+import { compile } from 'stylis';
+import { isAtRuleElement } from './isAtRuleElement';
+
+describe('isAtRuleElement', () => {
+  it.each([
+    ['@container { div { color: red } }', true],
+    ['@layer foo { div { color: red } }', true],
+    ['@media (min-width: 100px) { div { color: red } }', true],
+    ['@supports (display: flex) { div { color: red } }', true],
+    ['div { color: red }', false],
+    ['div:hover { color: red }', false],
+  ])('handles "%s"', (css, expected) => {
+    expect(isAtRuleElement(compile(css)[0])).toBe(expected);
+  });
+});
diff --git a/packages/core/src/runtime/stylis/rulesheetPlugin.test.ts b/packages/core/src/runtime/stylis/rulesheetPlugin.test.ts
new file mode 100644
index 0000000..84867e8
--- /dev/null
+++ b/packages/core/src/runtime/stylis/rulesheetPlugin.test.ts
@@ -0,0 +1,30 @@
+import { compile, middleware, serialize, stringify, RULESET } from 'stylis';
+
+import { rulesheetPlugin } from './rulesheetPlugin';
+import type { RulesheetPluginCallback } from './rulesheetPlugin';
+
+function compileRule(rule: string, callback: RulesheetPluginCallback) {
+  return serialize(compile(rule), middleware([stringify, rulesheetPlugin(callback)]));
+}
+
+describe('rulesheetPlugin', () => {
+  it('handles basic selectors', () => {
+    const callback = jest.fn();
+    const css = `
+      .foo { color: red }
+      .bar { color: blue }
+    `;
+
+    expect(compileRule(css, callback)).toMatchInlineSnapshot(`".foo{color:red;}.bar{color:blue;}"`);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledWith(
+      expect.objectContaining({ type: RULESET, return: '.foo{color:red;}' }),
+      '.foo{color:red;}',
+    );
+    expect(callback).toHaveBeenCalledWith(
+      expect.objectContaining({ type: RULESET, return: '.bar{color:blue;}' }),
+      '.bar{color:blue;}',
+    );
+  });
+});
diff --git a/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.test.ts b/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.test.ts
index 1d197e7..c746639 100644
--- a/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.test.ts
+++ b/packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.test.ts
@@ -83,6 +83,26 @@ describe('sortClassesInAtRulesPlugin', () => {
         }
       `);
     });
+
+    it('handles @container', () => {
+      const css = `
+        @container utilities {
+          .b { padding-right: 1px; }
+          .a { padding-left: 1px; }
+        }
+      `;
+
+      expect(compileRule(css)).toMatchInlineSnapshot(`
+        @container utilities {
+          .a {
+            padding-left: 1px;
+          }
+          .b {
+            padding-right: 1px;
+          }
+        }
+      `);
+    });
   });
 
   it('handles nested at-rules', () => {
diff --git a/packages/react/src/createDOMRenderer.test.tsx b/packages/react/src/createDOMRenderer.test.tsx
index 89b6fa0..611b4e0 100644
--- a/packages/react/src/createDOMRenderer.test.tsx
+++ b/packages/react/src/createDOMRenderer.test.tsx
@@ -8,6 +8,13 @@ import { makeStyles } from './makeStyles';
 import { makeResetStyles } from './makeResetStyles';
 import { RendererProvider } from './RendererContext';
 import { renderToStyleElements } from './renderToStyleElements';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect';
+
+jest.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: jest.fn(),
+}));
+
+const useInsertionEffect = _useInsertionEffect as jest.MockedFunction<typeof React.useInsertionEffect>;
 
 describe('createDOMRenderer', () => {
   it('rehydrateCache() avoids double insertion', () => {
@@ -46,6 +53,11 @@ describe('createDOMRenderer', () => {
     // A "server" renders components to static HTML that will be transferred to a client
     //
 
+    // Heads up!
+    // Mock there is need as this test is executed in DOM environment and uses "useInsertionEffect".
+    // However, "useInsertionEffect" will not be called in "renderToStaticMarkup()".
+    useInsertionEffect.mockImplementation(fn => fn());
+
     const componentHTML = renderToStaticMarkup(
       <RendererProvider renderer={serverRenderer}>
         <ExampleComponent />
@@ -53,6 +65,8 @@ describe('createDOMRenderer', () => {
     );
     const stylesHTML = renderToStaticMarkup(<>{renderToStyleElements(serverRenderer)}</>);
 
+    useInsertionEffect.mockImplementation(React.useInsertionEffect);
+
     // Ensure that all styles are inserted into the cache
     expect(serverRenderer.insertionCache).toMatchInlineSnapshot(`
       Object {
diff --git a/packages/react/src/insertionFactory-node.test.ts b/packages/react/src/insertionFactory-node.test.ts
new file mode 100644
index 0000000..298c4b8
--- /dev/null
+++ b/packages/react/src/insertionFactory-node.test.ts
@@ -0,0 +1,24 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import type { GriffelRenderer } from '@griffel/core';
+import * as React from 'react';
+
+import { insertionFactory } from './insertionFactory';
+
+describe('insertionFactory (node)', () => {
+  it('does not use insertionEffect', () => {
+    const useInsertionEffect = jest.spyOn(React, 'useInsertionEffect');
+
+    const renderer: Partial<GriffelRenderer> = { id: 'a', insertCSSRules: jest.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).not.toHaveBeenCalled();
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react/src/insertionFactory.test.ts b/packages/react/src/insertionFactory.test.ts
new file mode 100644
index 0000000..1cd6486
--- /dev/null
+++ b/packages/react/src/insertionFactory.test.ts
@@ -0,0 +1,27 @@
+import type { GriffelRenderer } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect';
+import * as React from 'react';
+
+jest.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: jest.fn().mockImplementation(fn => fn()),
+}));
+
+const useInsertionEffect = _useInsertionEffect as jest.MockedFunction<typeof React.useInsertionEffect>;
+
+describe('canUseDOM', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('uses "useInsertionEffect" when available', () => {
+    const renderer: Partial<GriffelRenderer> = { insertCSSRules: jest.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).toHaveBeenCalledTimes(1);
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react/src/utils/canUseDOM-node.test.ts b/packages/react/src/utils/canUseDOM-node.test.ts
new file mode 100644
index 0000000..2e2290f
--- /dev/null
+++ b/packages/react/src/utils/canUseDOM-node.test.ts
@@ -0,0 +1,13 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { canUseDOM } from './canUseDOM';
+
+describe('canUseDOM (node)', () => {
+  it('returns "false"', () => {
+    expect(canUseDOM()).toBe(false);
+  });
+});
diff --git a/packages/react/src/utils/canUseDOM.test.tsx b/packages/react/src/utils/canUseDOM.test.tsx
new file mode 100644
index 0000000..98e18d2
--- /dev/null
+++ b/packages/react/src/utils/canUseDOM.test.tsx
@@ -0,0 +1,7 @@
+import { canUseDOM } from './canUseDOM';
+
+describe('canUseDOM', () => {
+  it('returns "true"', () => {
+    expect(canUseDOM()).toBe(true);
+  });
+});
diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts
index 2acae75..7ca1135 100644
--- a/packages/webpack-loader/src/webpackLoader.test.ts
+++ b/packages/webpack-loader/src/webpackLoader.test.ts
@@ -257,6 +257,18 @@ describe('webpackLoader', () => {
     },
   });
 
+  // Asserts that "inheritResolveOptions" are handled properly
+  testFixture('webpack-resolve-options', {
+    loaderOptions: {
+      inheritResolveOptions: ['extensions'],
+    },
+    webpackConfig: {
+      resolve: {
+        extensions: ['.ts', '.jsx'],
+      },
+    },
+  });
+
   // Asserts that aliases are resolved properly in Babel plugin with resolve plugins
   testFixture('webpack-resolve-plugins', {
     webpackConfig: {