diff --git a/e2e/typescript/src/assets/fixture-reset.ts b/e2e/typescript/src/assets/fixture-reset.ts
index 1a031326af..1ccddde547 100644
--- a/e2e/typescript/src/assets/fixture-reset.ts
+++ b/e2e/typescript/src/assets/fixture-reset.ts
@@ -132,41 +132,41 @@ assertType({
 });
 
 assertType({
-  '.bar': { color: 'beige' },
-  '.foo': { padding: '5px' },
-  '.qux': { paddingLeft: '5px' },
+  '&.bar': { color: 'beige' },
+  '&.foo': { padding: '5px' },
+  '&.qux': { paddingLeft: '5px' },
 });
 
 assertType({
-  '.bar': { '--color': 'red' },
+  '&.bar': { '--color': 'red' },
 });
 assertType({
-  '.bar': { animationName: { from: {}, to: {} } },
+  '&.bar': { animationName: { from: {}, to: {} } },
 });
 
 // Nested custom selectors
 //
 
 assertType({
-  '.foo': {
-    '.bar': { flexShrink: 0 },
-    '.baz': { flexShrink: 'initial' },
-    '.qux': { opacity: 0 },
-    '.fred': { zIndex: 0 },
-    '.thud': { zIndex: 1 },
+  '&.foo': {
+    '&.bar': { flexShrink: 0 },
+    '&.baz': { flexShrink: 'initial' },
+    '&.qux': { opacity: 0 },
+    '&.fred': { zIndex: 0 },
+    '&.thud': { zIndex: 1 },
   },
-  '.bar': {
-    '.baz': { color: 'beige' },
-    '.qux': { paddingLeft: '5px' },
+  '&.bar': {
+    '&.baz': { color: 'beige' },
+    '&.qux': { paddingLeft: '5px' },
   },
-  '.baz': {
-    '.qux': {
+  '&.baz': {
+    '&.qux': {
       '--color': 'red',
     },
   },
-  '.qux': {
-    '.bar': { flexShrink: 'var(--bar)' },
-    '.baz': { opacity: 'var(--baz)' },
+  '&.qux': {
+    '&.bar': { flexShrink: 'var(--bar)' },
+    '&.baz': { opacity: 'var(--baz)' },
   },
 });
 
@@ -326,8 +326,8 @@ assertType({
 //
 
 assertType({
-  '.foo': {
-    '.baz': {
+  '&.foo': {
+    '&.baz': {
       // @ts-expect-error "1" is invalid value for "overflowX"
       overflowX: '1',
       padding: 0,
@@ -337,23 +337,23 @@ assertType({
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error outline-box is an invalid value for box-sizing
     boxSizing: 'outline-box',
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       boxSizing: 'outline-box', // < no error here, TS only reports the error for the whole object
     },
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error outline-box is an invalid value for box-sizing
     boxSizing: 'outline-box',
     zIndex: 1,
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       boxSizing: 'outline-box',
       zIndex: 1,
@@ -361,13 +361,13 @@ assertType({
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error Object is not assignable to CSS property
     zIndex: { color: 'red' },
     // @ts-expect-error Object is not assignable to CSS property
     opacity: { color: 'red' },
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error Object is not assignable to CSS property
       zIndex: { color: 'red' },
       // @ts-expect-error Object is not assignable to CSS property
diff --git a/e2e/typescript/src/assets/fixture.ts b/e2e/typescript/src/assets/fixture.ts
index df4b356ad7..74caa1116d 100644
--- a/e2e/typescript/src/assets/fixture.ts
+++ b/e2e/typescript/src/assets/fixture.ts
@@ -31,6 +31,15 @@ assertType({
   },
 });
 
+assertType({
+  ':hover': { animationName: { from: {}, to: {} } },
+});
+assertType({
+  '&.bar': {
+    animationName: { from: {}, to: {} },
+  },
+});
+
 assertType({
   // @ts-expect-error "200" is not a valid CSS value for "height"
   animationName: {
@@ -43,6 +52,16 @@ assertType({
     from: { '--opacity': 0 },
   },
 });
+assertType({
+  animationName: {
+    from: {
+      // @ts-expect-error Only strings can be used as values for CSS variables
+      '&.foo': {
+        color: 'red',
+      },
+    },
+  },
+});
 
 // Basic styles
 //
@@ -55,6 +74,13 @@ assertType({ zIndex: 1 });
 assertType({ paddingLeft: '5px' });
 assertType({ color: 'beige' });
 
+assertType({ WebkitBackgroundSize: 'initial' });
+
+// @ts-expect-error Properties should be camelCase
+assertType({ 'padding-left': 'beige' });
+// @ts-expect-error Properties should be camelCase
+assertType({ '-webkit-scrollbar': 'beige' });
+
 // CSS variables
 //
 
@@ -102,16 +128,17 @@ assertType({
 assertType({
   ':hover': { content: "'foo'" },
 });
-assertType({
-  ':hover': { animationName: { from: {}, to: {} } },
-});
 
 assertType({
   // @ts-expect-error Values of selectors can be only objects
   ':hover': 'red',
 });
+assertType({
+  // @ts-expect-error ":foo" is not valid pseudo selector
+  ':foo': { flexShrink: 0 },
+});
 
-// Custom selectors
+// Complex pseudo selectors
 //
 
 assertType({
@@ -119,6 +146,7 @@ assertType({
   ':hover:active': { flexShrink: 'initial' },
   ':hover:visited': { zIndex: 0 },
   ':hover:focus-visible': { zIndex: 1 },
+  ':hover &.foo': { zIndex: 1 },
 });
 
 assertType({
@@ -129,40 +157,62 @@ assertType({
 });
 
 assertType({
-  '.bar': { color: 'beige' },
-  '.foo': { paddingLeft: '5px' },
+  // @ts-expect-error Values of selectors can be only objects
+  ':hover:focus': 'red',
+});
+assertType({
+  // @ts-expect-error ":foo" is not valid pseudo selector
+  ':foo:hover': { flexShrink: 0 },
+});
+assertType({
+  // @ts-expect-error ":foo" is not valid pseudo selector
+  ':foo &.bar': { flexShrink: 0 },
+});
+
+// Custom selectors
+//
+
+assertType({
+  '&.bar': { color: 'beige' },
+  '&.foo': { paddingLeft: '5px' },
 });
 
 assertType({
-  '.bar': { '--color': 'red' },
+  '&.bar': { '--color': 'red' },
 });
+
 assertType({
-  '.bar': { animationName: { from: {}, to: {} } },
+  // @ts-expect-error Values of selectors can be only objects
+  '&.bar': 'red',
+});
+assertType({
+  // @ts-expect-error Custom selector should start with "&"
+  '.bar': { color: 'beige' },
 });
 
 // Nested custom selectors
 //
 
 assertType({
-  '.foo': {
-    '.bar': { flexShrink: 0 },
-    '.baz': { flexShrink: 'initial' },
-    '.qux': { opacity: 0 },
-    '.fred': { zIndex: 0 },
-    '.thud': { zIndex: 1 },
+  '&.foo': {
+    '&.bar': { flexShrink: 0 },
+    '&.baz': { flexShrink: 'initial' },
+    '&.qux': { opacity: 0 },
+    '&.fred': { zIndex: 0 },
+    '&.thud': { zIndex: 1 },
   },
-  '.bar': {
-    '.baz': { color: 'beige' },
-    '.qux': { paddingLeft: '5px' },
+  '&.bar': {
+    '&.baz': { color: 'beige' },
+    '&.qux': { paddingLeft: '5px' },
   },
-  '.baz': {
-    '.qux': {
+  '&.baz': {
+    '&.qux': {
       '--color': 'red',
     },
   },
-  '.qux': {
-    '.bar': { flexShrink: 'var(--bar)' },
-    '.baz': { opacity: 'var(--baz)' },
+  '&.qux': {
+    '&.bar': { flexShrink: 'var(--bar)' },
+    '&.baz': { opacity: 'var(--baz)' },
   },
 });
 
@@ -315,8 +365,8 @@ assertType({
 //
 
 assertType({
-  '.foo': {
-    '.baz': {
+  '&.foo': {
+    '&.baz': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       overflowX: '1',
       // @ts-expect-error "5" is an invalid value for paddingLeft
@@ -325,23 +375,23 @@ assertType({
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error outline-box is an invalid value for box-sizing
     boxSizing: 'outline-box',
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       boxSizing: 'outline-box',
     },
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error outline-box is an invalid value for box-sizing
     boxSizing: 'outline-box',
     zIndex: 1,
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       boxSizing: 'outline-box',
       zIndex: 1,
@@ -349,13 +399,13 @@ assertType({
   },
 });
 assertType({
-  '.foo': {
+  '&.foo': {
     // @ts-expect-error Object is not assignable to CSS property
     zIndex: { color: 'red' },
     // @ts-expect-error Object is not assignable to CSS property
     opacity: { color: 'red' },
 
-    '.bar': {
+    '&.bar': {
       // @ts-expect-error Object is not assignable to CSS property
       zIndex: { color: 'red' },
       // @ts-expect-error Object is not assignable to CSS property
diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts b/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
index 009b9ebce9..358015facb 100644
--- a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
+++ b/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
@@ -5,12 +5,11 @@ const switchClassName = 'fui-Switch';
 let _a: Record<string, GriffelStyle>;
 
 export const useStyles = makeStyles({
-  root:
-    ((_a = {}),
-    (_a[':hover .' + switchClassName] = {
-      ':before': {
-        backgroundColor: 'red',
-      },
-    }),
-    _a),
+  root: ((_a = {}),
+  (_a[':hover .' + switchClassName] = {
+    ':before': {
+      backgroundColor: 'red',
+    } as GriffelStyle,
+  }),
+  _a) as any,
 });
diff --git a/packages/babel-preset/src/assets/normalizeStyleRules.ts b/packages/babel-preset/src/assets/normalizeStyleRules.ts
index 65d11cde5b..626734ad0e 100644
--- a/packages/babel-preset/src/assets/normalizeStyleRules.ts
+++ b/packages/babel-preset/src/assets/normalizeStyleRules.ts
@@ -1,4 +1,4 @@
-import type { GriffelAnimation, GriffelStyle } from '@griffel/core';
+import type { GriffelAnimation, GriffelResetStyle, GriffelResetAnimation, GriffelStyle } from '@griffel/core';
 import { tokenize } from 'stylis';
 
 import { isAssetUrl } from './isAssetUrl';
@@ -47,14 +47,11 @@ export function normalizeStyleRule(
   }, '');
 }
 
-export function normalizeStyleRules(
-  path: typeof import('path'),
-  projectRoot: string,
-  filename: string,
-  stylesBySlots: Record<string /* slot */, GriffelStyle> | GriffelStyle,
-): Record<string /* slot */, GriffelStyle> {
+export function normalizeStyleRules<
+  Styles extends GriffelStyle | GriffelAnimation | GriffelResetStyle | GriffelResetAnimation,
+>(path: typeof import('path'), projectRoot: string, filename: string, styles: Styles): Styles {
   return Object.fromEntries(
-    Object.entries(stylesBySlots).map(([key, value]) => {
+    Object.entries(styles).map(([key, value]) => {
       if (typeof value === 'undefined' || value === null) {
         return [key, value];
       }
@@ -65,7 +62,7 @@ export function normalizeStyleRules(
           key,
           value.map(rule => {
             if (typeof rule === 'object') {
-              return normalizeStyleRules(path, projectRoot, filename, rule as GriffelAnimation);
+              return normalizeStyleRules(path, projectRoot, filename, rule);
             }
 
             return normalizeStyleRule(path, projectRoot, filename, rule);
diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts
index 95b8d64469..10f5230e12 100644
--- a/packages/babel-preset/src/transformPlugin.ts
+++ b/packages/babel-preset/src/transformPlugin.ts
@@ -3,7 +3,7 @@ import { types as t } from '@babel/core';
 import { declare } from '@babel/helper-plugin-utils';
 import { Module } from '@linaria/babel-preset';
 import shakerEvaluator from '@linaria/shaker';
-import type { GriffelStyle, CSSRulesByBucket, CSSClassesMapBySlot } from '@griffel/core';
+import type { GriffelStyle, CSSRulesByBucket, CSSClassesMapBySlot, GriffelResetStyle } from '@griffel/core';
 import { resolveStyleRulesForSlots, resolveResetStyleRules, normalizeCSSBucketEntry } from '@griffel/core';
 import * as path from 'path';
 
@@ -318,7 +318,7 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
               }
 
               if (definitionPath.functionKind === 'makeResetStyles') {
-                const styles: GriffelStyle = evaluationResult.value;
+                const styles: GriffelResetStyle = evaluationResult.value;
                 const [ltrClassName, rtlClassName, cssRules] = resolveResetStyleRules(
                   // Heads up!
                   // Style rules should be normalized *before* they will be resolved to CSS rules to have deterministic
diff --git a/packages/core/src/devtools/types.ts b/packages/core/src/devtools/types.ts
index 3acbac0993..b964b92420 100644
--- a/packages/core/src/devtools/types.ts
+++ b/packages/core/src/devtools/types.ts
@@ -8,9 +8,18 @@ declare global {
   }
 }
 
+/**
+ * @internal
+ */
 export type DebugAtomicClassName = { className: string; overriddenBy?: string };
+/**
+ * @internal
+ */
 export type DebugCSSRules = Record<string /* className */, string /* cssRule */>;
 
+/**
+ * @internal
+ */
 export type DebugSequence = {
   sequenceHash: SequenceHash;
   direction: 'ltr' | 'rtl';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index bf4e99e9aa..c4a8dc3668 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -91,10 +91,11 @@ export type {
   GriffelStyle,
   // Reset styles
   GriffelResetStyle,
-  // Internal types
+  GriffelResetAnimation,
 } from '@griffel/style-types';
 
 export type {
+  // Internal types
   CSSClasses,
   CSSClassesMapBySlot,
   CSSBucketEntry,
diff --git a/packages/core/src/runtime/compileKeyframeCSS.ts b/packages/core/src/runtime/compileKeyframeCSS.ts
index d2fd5211b6..2f511e3b73 100644
--- a/packages/core/src/runtime/compileKeyframeCSS.ts
+++ b/packages/core/src/runtime/compileKeyframeCSS.ts
@@ -1,10 +1,12 @@
-import type { GriffelAnimation } from '@griffel/style-types';
+import type { GriffelAnimation, GriffelResetAnimation } from '@griffel/style-types';
 import { compile, middleware, serialize, rulesheet, stringify } from 'stylis';
 
 import { prefixerPlugin } from './stylis/prefixerPlugin';
 import { cssifyObject } from './utils/cssifyObject';
 
-export function compileKeyframeRule(keyframeObject: GriffelAnimation): string {
+export function compileKeyframeRule<Style extends GriffelAnimation | GriffelResetAnimation>(
+  keyframeObject: Style,
+): string {
   let css = '';
 
   // eslint-disable-next-line guard-for-in
diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
index f6add60ca9..d4290b2c49 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -1,5 +1,5 @@
 import hashString from '@emotion/hash';
-import type { GriffelResetStyle, GriffelAnimation } from '@griffel/style-types';
+import type { GriffelResetStyle, GriffelResetAnimation } from '@griffel/style-types';
 import { convert, convertProperty } from 'rtl-css-js/core';
 
 import { RESET_HASH_PREFIX } from '../constants';
@@ -19,13 +19,13 @@ import { warnAboutUnresolvedRule } from './warnings/warnAboutUnresolvedRule';
 /**
  * @internal
  */
-function createStringFromStyles(styles: GriffelResetStyle) {
+function createStringFromStyles<Style extends GriffelResetStyle | GriffelResetAnimation>(styles: Style) {
   let ltrCSS = '';
   let rtlCSS = '';
 
   // eslint-disable-next-line guard-for-in
   for (const property in styles) {
-    const value = styles[property as keyof GriffelResetStyle];
+    const value = styles[property as keyof Style];
 
     // eslint-disable-next-line eqeqeq
     if (value == null) {
@@ -42,7 +42,7 @@ function createStringFromStyles(styles: GriffelResetStyle) {
     }
 
     if (property === 'animationName' && typeof value === 'object') {
-      const values = Array.isArray(value) ? (value as GriffelAnimation[]) : [value as GriffelAnimation];
+      const values = Array.isArray(value) ? (value as GriffelResetAnimation[]) : [value as GriffelResetAnimation];
 
       const ltrAnimationNames: string[] = [];
       const rtlAnimationNames: string[] = [];
diff --git a/packages/core/src/runtime/resolveStyleRules.test.ts b/packages/core/src/runtime/resolveStyleRules.test.ts
index e46f831a87..e2b1915a57 100644
--- a/packages/core/src/runtime/resolveStyleRules.test.ts
+++ b/packages/core/src/runtime/resolveStyleRules.test.ts
@@ -1,7 +1,9 @@
+import type { GriffelStyle } from '@griffel/style-types';
+
 import { griffelRulesSerializer } from '../common/snapshotSerializers';
-import { resolveStyleRules } from './resolveStyleRules';
+import { RESET, UNSUPPORTED_CSS_PROPERTIES } from '../constants';
 import type { CSSClassesMap, CSSClasses, CSSRulesByBucket } from '../types';
-import { RESET, UNSUPPORTED_CSS_PROPERTIES } from '..';
+import { resolveStyleRules } from './resolveStyleRules';
 
 expect.addSnapshotSerializer(griffelRulesSerializer);
 
@@ -26,7 +28,7 @@ describe('resolveStyleRules', () => {
       'strips unsupported `%s` css property when not in production',
       property => {
         // Doesn't matter what the value is, just that the resulting objects are empty
-        const res = resolveStyleRules({ [property]: 'dummy' as unknown as undefined });
+        const res = resolveStyleRules({ [property]: 'dummy' } as unknown as GriffelStyle);
 
         expect(res).toHaveLength(2);
         expect(res[0]).toEqual({});
diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
index 9c00fc9dd1..89719e55f8 100644
--- a/packages/core/src/runtime/resolveStyleRules.ts
+++ b/packages/core/src/runtime/resolveStyleRules.ts
@@ -25,8 +25,16 @@ import type { AtRules } from './utils/types';
 import { warnAboutUnresolvedRule } from './warnings/warnAboutUnresolvedRule';
 import { warnAboutUnsupportedProperties } from './warnings/warnAboutUnsupportedProperties';
 
-function getShorthandDefinition(property: string): [number, string[]] | undefined {
-  return shorthands[property as keyof typeof shorthands];
+function getShorthandDefinition<Property extends keyof typeof shorthands>(
+  property: string,
+): (typeof shorthands)[Property] | undefined {
+  return shorthands[property as unknown as Property];
+}
+
+function createShorthandsReset(shorthand: NonNullable<ReturnType<typeof getShorthandDefinition>>) {
+  const propertiesToReset = shorthand[1];
+
+  return Object.fromEntries(propertiesToReset.map(property => [property, RESET])) as unknown as GriffelStyle;
 }
 
 function computePropertyPriority(shorthand: [number, string[]] | undefined): number {
@@ -127,10 +135,14 @@ export function resolveStyleRules(
       const shorthand = getShorthandDefinition(property);
 
       if (shorthand) {
-        const shorthandProperties = shorthand[1];
-        const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, RESET]));
-
-        resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(
+          createShorthandsReset(shorthand),
+          classNameHashSalt,
+          selectors,
+          atRules,
+          cssClassesMap,
+          cssRulesByBucket,
+        );
       }
 
       // uniq key based on a hash of property & selector, used for merging later
@@ -253,10 +265,14 @@ export function resolveStyleRules(
       const shorthand = getShorthandDefinition(property);
 
       if (shorthand) {
-        const shorthandProperties = shorthand[1];
-        const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, RESET]));
-
-        resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(
+          createShorthandsReset(shorthand),
+          classNameHashSalt,
+          selectors,
+          atRules,
+          cssClassesMap,
+          cssRulesByBucket,
+        );
       }
 
       const key = hashPropertyKey(selector, property, atRules);
@@ -383,7 +399,7 @@ export function resolveStyleRules(
           cssRulesByBucket,
         );
       } else {
-        warnAboutUnresolvedRule(property, value);
+        warnAboutUnresolvedRule(property, value as GriffelStyle);
       }
     }
   }
diff --git a/packages/core/src/runtime/shorthands.ts b/packages/core/src/runtime/shorthands.ts
index 667335e351..0bd0ffa37b 100644
--- a/packages/core/src/runtime/shorthands.ts
+++ b/packages/core/src/runtime/shorthands.ts
@@ -7,7 +7,7 @@ import type { GriffelStylesUnsupportedCSSProperties } from '@griffel/style-types
 
 type AllowedShorthandProperties = keyof Omit<CSS.Properties, keyof GriffelStylesUnsupportedCSSProperties>;
 
-export const shorthands: Partial<Record<AllowedShorthandProperties, [number, string[]]>> = {
+export const shorthands: Partial<Record<AllowedShorthandProperties, [number, (keyof CSS.Properties)[]]>> = {
   animation: [
     -1,
     [
diff --git a/packages/core/src/runtime/utils/cssifyObject.ts b/packages/core/src/runtime/utils/cssifyObject.ts
index 85d56e0f6c..9ea43ee3e3 100644
--- a/packages/core/src/runtime/utils/cssifyObject.ts
+++ b/packages/core/src/runtime/utils/cssifyObject.ts
@@ -1,16 +1,20 @@
-import type { GriffelStaticStyle, GriffelStyle } from '@griffel/style-types';
+import type { GriffelAnimation, GriffelResetAnimation, GriffelStaticStyle } from '@griffel/style-types';
 import { hyphenateProperty } from './hyphenateProperty';
 
-export function cssifyObject(style: GriffelStyle | GriffelStaticStyle) {
+export function cssifyObject<
+  Style extends GriffelAnimation['from'] | GriffelResetAnimation['from'] | GriffelStaticStyle,
+>(style: Style) {
   let css = '';
 
   // eslint-disable-next-line guard-for-in
   for (const property in style) {
-    const value = style[property as keyof GriffelStyle];
+    const value = style[property as unknown as keyof Style] as unknown;
+
     if (typeof value === 'string' || typeof value === 'number') {
       css += hyphenateProperty(property) + ':' + value + ';';
       continue;
     }
+
     if (Array.isArray(value)) {
       for (const arrValue of value) {
         css += hyphenateProperty(property) + ':' + arrValue + ';';
diff --git a/packages/react/src/makeResetStyles.test.tsx b/packages/react/src/makeResetStyles.test.tsx
index b8dde10085..f9b4473067 100644
--- a/packages/react/src/makeResetStyles.test.tsx
+++ b/packages/react/src/makeResetStyles.test.tsx
@@ -6,7 +6,7 @@ import { makeResetStyles } from './makeResetStyles';
 
 describe('makeResetStyles', () => {
   it('works outside of React components', () => {
-    expect(() => makeResetStyles({ root: { color: 'red' } })).not.toThrow();
+    expect(() => makeResetStyles({ color: 'red' })).not.toThrow();
   });
 
   it('throws inside React components', () => {
diff --git a/packages/style-types/src/index.ts b/packages/style-types/src/index.ts
index bda19c3e40..a3df6a3e6c 100644
--- a/packages/style-types/src/index.ts
+++ b/packages/style-types/src/index.ts
@@ -1,5 +1,5 @@
 export type { GriffelAnimation, GriffelStyle } from './makeStyles';
-export type { GriffelResetStyle } from './makeResetStyles';
+export type { GriffelResetStyle, GriffelResetAnimation } from './makeResetStyles';
 export type { GriffelStaticStyle, GriffelStaticStyles } from './makeStaticStyles';
 
 export type { GriffelStylesCSSValue, ValueOrArray } from './shared';
diff --git a/packages/style-types/src/makeResetStyles.ts b/packages/style-types/src/makeResetStyles.ts
index 0f6e7e1df9..56c8c9e898 100644
--- a/packages/style-types/src/makeResetStyles.ts
+++ b/packages/style-types/src/makeResetStyles.ts
@@ -6,25 +6,57 @@ import type { GriffelStylesCSSValue } from './shared';
 // ---
 //
 
-type GriffelResetStylesCSSProperties = Omit<
+type GriffelResetCSSProperties = Omit<
   CSS.PropertiesFallback<GriffelStylesCSSValue>,
   // We have custom definition for "animationName"
   'animationName'
->;
+> & { animationName?: GriffelResetAnimation | GriffelResetAnimation[] | string };
+
+/**
+ * Type for CSS custom properties
+ *
+ * @example { "--foo": "bar" }
+ */
+type GriffelCSSCustomProperties = { [CustomProperty in `--${string}`]: string };
 
-export type GriffelResetStylesStrictCSSObject = GriffelResetStylesCSSProperties &
-  GriffelCSSPseudos & { animationName?: GriffelResetAnimation | GriffelResetAnimation[] | string };
+/**
+ * Type for CSS pseudo-selectors (including more complex)
+ *
+ * @example { ":hover": { color: "red" } }
+ * @example { ":hover > div": { color: "red" } }
+ * @example { ":global(.foo)": { color: "red" } }
+ */
+type GriffelCSSPseudoSelectors = {
+  [Selector in CSS.Pseudos | `${CSS.Pseudos | ':global'}${string}`]?: GriffelResetStyle;
+};
 
-type GriffelCSSObjectCustom = {
-  [Property: string]: GriffelResetStyle | GriffelStylesCSSValue;
-} & GriffelResetStylesStrictCSSObject;
+/**
+ * Type for CSS "&" selectors
+ *
+ * @example { "&.foo": { color: "red" } }
+ * @example { "> div": { color: "red" } }
+ * @example { "[data-attr]": { color: "red" } }
+ * @example { "&.foo > div": { color: "red" } }
+ * @example { "&.foo": { "&.bar": { color: "red" } } }
+ */
+type GriffelCSSAmpersandSelectors = { [Selector in `&${string}` | `>${string}` | `[${string}`]: GriffelResetStyle };
 
-type GriffelCSSPseudos = {
-  [Property in CSS.Pseudos]?: GriffelResetStylesStrictCSSObject | GriffelCSSObjectCustom;
+/**
+ * Type for CSS At-Rules
+ *
+ * @example { "@media (min-width: 600px)": { color: "red" } }
+ * @example { "@supports (display: grid)": { color: "red" } }
+ */
+type GriffelCSSAtQueries = {
+  [Selector in `${'@media' | '@supports' | '@container' | '@layer'}${string}`]: GriffelResetStyle;
 };
 
 export type GriffelResetAnimation = Record<
   'from' | 'to' | string,
-  GriffelResetStylesCSSProperties & { [Property in `--${string}`]: string }
+  GriffelResetCSSProperties & GriffelCSSCustomProperties
 >;
-export type GriffelResetStyle = GriffelResetStylesStrictCSSObject | GriffelCSSObjectCustom;
+export type GriffelResetStyle = GriffelResetCSSProperties &
+  GriffelCSSCustomProperties &
+  GriffelCSSPseudoSelectors &
+  GriffelCSSAmpersandSelectors &
+  GriffelCSSAtQueries;
diff --git a/packages/style-types/src/makeStyles.ts b/packages/style-types/src/makeStyles.ts
index 08a0bf285f..bb3d371f54 100644
--- a/packages/style-types/src/makeStyles.ts
+++ b/packages/style-types/src/makeStyles.ts
@@ -8,27 +8,55 @@ import type { GriffelStylesUnsupportedCSSProperties } from './unsupported-proper
 // ---
 //
 
-type GriffelStylesCSSProperties = Omit<
+type GriffelCSSProperties = Omit<
   Fallback<CSS.Properties<GriffelStylesCSSValue>>,
   // We have custom definition for "animationName"
   'animationName'
 > &
-  Partial<GriffelStylesUnsupportedCSSProperties>;
+  Partial<GriffelStylesUnsupportedCSSProperties> & {
+    animationName?: GriffelAnimation | GriffelAnimation[] | string;
+  };
 
-export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties & {
-  animationName?: GriffelAnimation | GriffelAnimation[] | string;
-} & GriffelCSSPseudos;
+/**
+ * Type for CSS custom properties
+ *
+ * @example { "--foo": "bar" }
+ */
+type GriffelCSSCustomProperties = { [CustomProperty in `--${string}`]: string };
 
-type GriffelCSSObjectCustom = {
-  [Property: string]: GriffelStyle | GriffelStylesCSSValue;
-} & GriffelStylesStrictCSSObject;
+/**
+ * Type for CSS pseudo-selectors (including more complex)
+ *
+ * @example { ":hover": { color: "red" } }
+ * @example { ":hover > div": { color: "red" } }
+ * @example { ":global(.foo)": { color: "red" } }
+ */
+type GriffelCSSPseudoSelectors = { [Selector in CSS.Pseudos | `${CSS.Pseudos | ':global'}${string}`]?: GriffelStyle };
 
-type GriffelCSSPseudos = {
-  [Property in CSS.Pseudos]?: GriffelStylesStrictCSSObject | GriffelCSSObjectCustom;
+/**
+ * Type for CSS "&" selectors
+ *
+ * @example { "&.foo": { color: "red" } }
+ * @example { "> div": { color: "red" } }
+ * @example { "[data-attr]": { color: "red" } }
+ * @example { "&.foo > div": { color: "red" } }
+ * @example { "&.foo": { "&.bar": { color: "red" } } }
+ */
+type GriffelCSSAmpersandSelectors = { [Selector in `&${string}` | `>${string}` | `[${string}`]: GriffelStyle };
+
+/**
+ * Type for CSS At-Rules
+ *
+ * @example { "@media (min-width: 600px)": { color: "red" } }
+ * @example { "@supports (display: grid)": { color: "red" } }
+ */
+type GriffelCSSAtQueries = {
+  [Selector in `${'@media' | '@supports' | '@container' | '@layer'}${string}`]: GriffelStyle;
 };
 
-export type GriffelAnimation = Record<
-  'from' | 'to' | string,
-  GriffelStylesCSSProperties & { [Property in `--${string}`]: string }
->;
-export type GriffelStyle = GriffelStylesStrictCSSObject | GriffelCSSObjectCustom;
+export type GriffelAnimation = Record<'from' | 'to' | string, GriffelCSSProperties & GriffelCSSCustomProperties>;
+export type GriffelStyle = GriffelCSSProperties &
+  GriffelCSSCustomProperties &
+  GriffelCSSPseudoSelectors &
+  GriffelCSSAmpersandSelectors &
+  GriffelCSSAtQueries;
diff --git a/packages/tag-processor/src/assets/normalizeStyleRules.ts b/packages/tag-processor/src/assets/normalizeStyleRules.ts
index 8bf82345c5..802c7cd936 100644
--- a/packages/tag-processor/src/assets/normalizeStyleRules.ts
+++ b/packages/tag-processor/src/assets/normalizeStyleRules.ts
@@ -1,4 +1,4 @@
-import type { GriffelAnimation, GriffelResetStyle, GriffelStyle } from '@griffel/core';
+import type { GriffelAnimation, GriffelResetStyle, GriffelResetAnimation, GriffelStyle } from '@griffel/core';
 import { tokenize } from 'stylis';
 
 import type { FileContext } from '../types';
@@ -40,13 +40,11 @@ export function normalizeStyleRule(path: typeof import('path'), fileContext: Fil
   }, '');
 }
 
-export function normalizeStyleRules(
-  path: typeof import('path'),
-  fileContext: FileContext,
-  stylesBySlots: Record<string /* slot */, GriffelStyle> | GriffelStyle | GriffelResetStyle,
-): Record<string /* slot */, GriffelStyle> {
+export function normalizeStyleRules<
+  Styles extends GriffelStyle | GriffelAnimation | GriffelResetStyle | GriffelResetAnimation,
+>(path: typeof import('path'), fileContext: FileContext, styles: Styles): Styles {
   return Object.fromEntries(
-    Object.entries(stylesBySlots).map(([key, value]) => {
+    Object.entries(styles).map(([key, value]) => {
       if (typeof value === 'undefined') {
         return [key, value];
       }
@@ -57,7 +55,7 @@ export function normalizeStyleRules(
           key,
           value.map(rule => {
             if (typeof rule === 'object') {
-              return normalizeStyleRules(path, fileContext, rule as GriffelAnimation);
+              return normalizeStyleRules(path, fileContext, rule);
             }
 
             return normalizeStyleRule(path, fileContext, rule);
@@ -67,7 +65,7 @@ export function normalizeStyleRules(
 
       // Nested objects
       if (typeof value === 'object') {
-        return [key, normalizeStyleRules(path, fileContext, value as unknown as GriffelStyle)];
+        return [key, normalizeStyleRules(path, fileContext, value as Styles)];
       }
 
       return [key, normalizeStyleRule(path, fileContext, value)];
diff --git a/tools/update-shorthands/src/fileTemplate.test.ts b/tools/update-shorthands/src/fileTemplate.test.ts
index 7bb2ec5b0d..337996b014 100644
--- a/tools/update-shorthands/src/fileTemplate.test.ts
+++ b/tools/update-shorthands/src/fileTemplate.test.ts
@@ -18,7 +18,7 @@ describe('fileTemplate', () => {
 
       type AllowedShorthandProperties = keyof Omit<CSS.Properties, keyof GriffelStylesUnsupportedCSSProperties>;
 
-      export const shorthands: Partial<Record<AllowedShorthandProperties, [number, string[]]>> = {
+      export const shorthands: Partial<Record<AllowedShorthandProperties, [number, (keyof CSS.Properties)[]]>> = {
         margin: [-1, ['marginTop']],
         padding: [-1, ['paddingTop']],
       };
diff --git a/tools/update-shorthands/src/fileTemplate.ts b/tools/update-shorthands/src/fileTemplate.ts
index 965fc10df1..40b7cbce1b 100644
--- a/tools/update-shorthands/src/fileTemplate.ts
+++ b/tools/update-shorthands/src/fileTemplate.ts
@@ -20,7 +20,7 @@ import type { GriffelStylesUnsupportedCSSProperties } from '@griffel/style-types
 
 type AllowedShorthandProperties = keyof Omit<CSS.Properties, keyof GriffelStylesUnsupportedCSSProperties>;
 
-export const shorthands: Partial<Record<AllowedShorthandProperties, [number, string[]]>> = ${stringifiedOutput};`,
+export const shorthands: Partial<Record<AllowedShorthandProperties, [number, (keyof CSS.Properties)[]]>> = ${stringifiedOutput};`,
     { ...prettierConfig, parser: 'typescript' },
   );
 }