Repository: microsoft/griffel
Pull request #390 (2023-07-13 15:28:53)

chore: move types to @griffel/style-types
Follows #389. Moves following types to `@griffel/style-types`:

- `GriffelAnimation`
- `GriffelStyle`
- `GriffelResetStyle`
- `GriffelStaticStyle`
- `GriffelStaticStyles`
- `GriffelStylesCSSValue`
- `ValueOrArray`
- `GriffelStylesUnsupportedCSSProperties`


Patch:
diff --git a/change/@griffel-core-e7411bee-39e0-4f19-8e9b-1300f48d931e.json b/change/@griffel-core-e7411bee-39e0-4f19-8e9b-1300f48d931e.json
new file mode 100644
index 0000000..7484932
--- /dev/null
+++ b/change/@griffel-core-e7411bee-39e0-4f19-8e9b-1300f48d931e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: use types from @griffel/style-types",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-style-types-a26526dc-0d91-4a78-ba34-b53ceca4d279.json b/change/@griffel-style-types-a26526dc-0d91-4a78-ba34-b53ceca4d279.json
new file mode 100644
index 0000000..aaa58bb
--- /dev/null
+++ b/change/@griffel-style-types-a26526dc-0d91-4a78-ba34-b53ceca4d279.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "there is a change file already",
+  "packageName": "@griffel/style-types",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index b581ee4..2d9c01b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -10,6 +10,7 @@
   "sideEffects": false,
   "dependencies": {
     "@emotion/hash": "^0.9.0",
+    "@griffel/style-types": "^1.0.0",
     "csstype": "^3.1.2",
     "rtl-css-js": "^1.16.1",
     "stylis": "^4.2.0",
diff --git a/packages/core/src/__css.ts b/packages/core/src/__css.ts
index 2542969..25b5a41 100644
--- a/packages/core/src/__css.ts
+++ b/packages/core/src/__css.ts
@@ -1,6 +1,7 @@
 import { debugData, isDevToolsEnabled } from './devtools';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
-import { MakeStylesOptions, CSSClassesMapBySlot } from './types';
+import type { MakeStylesOptions } from './makeStyles';
+import type { CSSClassesMapBySlot } from './types';
 
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
diff --git a/packages/core/src/__resetCSS.ts b/packages/core/src/__resetCSS.ts
index 35fea30..e16d146 100644
--- a/packages/core/src/__resetCSS.ts
+++ b/packages/core/src/__resetCSS.ts
@@ -1,11 +1,11 @@
 import { DEBUG_RESET_CLASSES } from './constants';
-import type { MakeStylesOptions } from './types';
+import type { MakeResetStylesOptions } from './makeResetStyles';
 
 /**
  * @internal
  */
 export function __resetCSS(ltrClassName: string, rtlClassName: string | null) {
-  function computeClassName(options: Pick<MakeStylesOptions, 'dir'>): string {
+  function computeClassName(options: Pick<MakeResetStylesOptions, 'dir'>): string {
     const { dir } = options;
     const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
 
diff --git a/packages/core/src/__resetStyles.ts b/packages/core/src/__resetStyles.ts
index cd4c86e..c5b823d 100644
--- a/packages/core/src/__resetStyles.ts
+++ b/packages/core/src/__resetStyles.ts
@@ -1,5 +1,5 @@
 import { DEBUG_RESET_CLASSES } from './constants';
-import type { MakeStylesOptions } from './types';
+import type { MakeResetStylesOptions } from './makeResetStyles';
 
 /**
  * @internal
@@ -7,7 +7,7 @@ import type { MakeStylesOptions } from './types';
 export function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {
   const insertionCache: Record<string, boolean> = {};
 
-  function computeClassName(options: MakeStylesOptions): string {
+  function computeClassName(options: MakeResetStylesOptions): string {
     const { dir, renderer } = options;
 
     const isLTR = dir === 'ltr';
diff --git a/packages/core/src/__styles.ts b/packages/core/src/__styles.ts
index 3e2b635..0d49cc7 100644
--- a/packages/core/src/__styles.ts
+++ b/packages/core/src/__styles.ts
@@ -1,6 +1,7 @@
 import { debugData, isDevToolsEnabled, getSourceURLfromError } from './devtools';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
-import { MakeStylesOptions, CSSClassesMapBySlot, CSSRulesByBucket } from './types';
+import type { CSSClassesMapBySlot, CSSRulesByBucket } from './types';
+import type { MakeStylesOptions } from './makeStyles';
 
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index 120580f..71212d0 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -1,4 +1,5 @@
-import { GriffelStylesUnsupportedCSSProperties, LookupItem, SequenceHash } from './types';
+import type { GriffelStylesUnsupportedCSSProperties } from '@griffel/style-types';
+import type { LookupItem, SequenceHash } from './types';
 
 // ----
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index af20e22..0e2f293 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -24,7 +24,7 @@ import {
   outline,
   transition,
   textDecoration,
-} from './shorthands/index';
+} from './shorthands';
 
 export const shorthands = {
   border,
@@ -59,7 +59,9 @@ export { safeInsertRule } from './renderer/safeInsertRule';
 
 export { mergeClasses } from './mergeClasses';
 export { makeStyles } from './makeStyles';
+export type { MakeStylesOptions } from './makeStyles';
 export { makeStaticStyles } from './makeStaticStyles';
+export type { MakeStaticStylesOptions } from './makeStaticStyles';
 export { makeResetStyles } from './makeResetStyles';
 
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
@@ -79,6 +81,7 @@ export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { resolveResetStyleRules } from './runtime/resolveResetStyleRules';
 
 export * from './constants';
+
 export type {
   // Static styles
   GriffelStaticStyle,
@@ -89,14 +92,15 @@ export type {
   // Reset styles
   GriffelResetStyle,
   // Internal types
+} from '@griffel/style-types';
+
+export {
   CSSClasses,
   CSSClassesMapBySlot,
   CSSBucketEntry,
   CSSRulesByBucket,
   StyleBucketName,
   // Util
-  MakeStaticStylesOptions,
-  MakeStylesOptions,
   GriffelRenderer,
 } from './types';
 
diff --git a/packages/core/src/makeResetStyles.ts b/packages/core/src/makeResetStyles.ts
index 0b64094..b056040 100644
--- a/packages/core/src/makeResetStyles.ts
+++ b/packages/core/src/makeResetStyles.ts
@@ -1,6 +1,13 @@
+import type { GriffelResetStyle } from '@griffel/style-types';
+
 import { DEBUG_RESET_CLASSES } from './constants';
 import { resolveResetStyleRules } from './runtime/resolveResetStyleRules';
-import type { GriffelResetStyle, MakeStylesOptions } from './types';
+import type { GriffelRenderer } from './types';
+
+export interface MakeResetStylesOptions {
+  dir: 'ltr' | 'rtl';
+  renderer: GriffelRenderer;
+}
 
 export function makeResetStyles(styles: GriffelResetStyle) {
   const insertionCache: Record<string, boolean> = {};
@@ -10,7 +17,7 @@ export function makeResetStyles(styles: GriffelResetStyle) {
 
   let cssRules: string[] | null = null;
 
-  function computeClassName(options: MakeStylesOptions): string {
+  function computeClassName(options: MakeResetStylesOptions): string {
     const { dir, renderer } = options;
 
     if (ltrClassName === null) {
diff --git a/packages/core/src/makeStaticStyles.ts b/packages/core/src/makeStaticStyles.ts
index a50ca9f..09276a6 100644
--- a/packages/core/src/makeStaticStyles.ts
+++ b/packages/core/src/makeStaticStyles.ts
@@ -1,5 +1,11 @@
+import type { GriffelStaticStyles } from '@griffel/style-types';
+
 import { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules';
-import { MakeStaticStylesOptions, GriffelStaticStyles } from './types';
+import type { GriffelRenderer } from './types';
+
+export interface MakeStaticStylesOptions {
+  renderer: GriffelRenderer;
+}
 
 /**
  * Register static css.
diff --git a/packages/core/src/makeStyles.ts b/packages/core/src/makeStyles.ts
index d7251c8..136c800 100644
--- a/packages/core/src/makeStyles.ts
+++ b/packages/core/src/makeStyles.ts
@@ -1,7 +1,12 @@
 import { debugData, isDevToolsEnabled, getSourceURLfromError } from './devtools';
 import { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
-import { CSSClassesMapBySlot, CSSRulesByBucket, MakeStylesOptions, StylesBySlots } from './types';
+import type { CSSClassesMapBySlot, CSSRulesByBucket, GriffelRenderer, StylesBySlots } from './types';
+
+export interface MakeStylesOptions {
+  dir: 'ltr' | 'rtl';
+  renderer: GriffelRenderer;
+}
 
 export function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>) {
   const insertionCache: Record<string, boolean> = {};
diff --git a/packages/core/src/resolveStyleRulesForSlots.ts b/packages/core/src/resolveStyleRulesForSlots.ts
index 6514859..02bdd44 100644
--- a/packages/core/src/resolveStyleRulesForSlots.ts
+++ b/packages/core/src/resolveStyleRulesForSlots.ts
@@ -1,5 +1,7 @@
+import type { GriffelStyle } from '@griffel/style-types';
+
 import { resolveStyleRules } from './runtime/resolveStyleRules';
-import { CSSClassesMapBySlot, CSSRulesByBucket, GriffelStyle, StyleBucketName, StylesBySlots } from './types';
+import { CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, StylesBySlots } from './types';
 
 /**
  * Calls resolveStyleRules() for each slot, is also used by build time transform.
diff --git a/packages/core/src/runtime/compileKeyframeCSS.ts b/packages/core/src/runtime/compileKeyframeCSS.ts
index a388f97..b123617 100644
--- a/packages/core/src/runtime/compileKeyframeCSS.ts
+++ b/packages/core/src/runtime/compileKeyframeCSS.ts
@@ -1,4 +1,4 @@
-import { GriffelAnimation } from '../types';
+import type { GriffelAnimation } from '@griffel/style-types';
 import { compile, middleware, serialize, rulesheet, stringify } from 'stylis';
 import { prefixer } from './prefixer';
 import { cssifyObject } from './utils/cssifyObject';
diff --git a/packages/core/src/runtime/compileStaticCSS.ts b/packages/core/src/runtime/compileStaticCSS.ts
index 0f557a4..697a58c 100644
--- a/packages/core/src/runtime/compileStaticCSS.ts
+++ b/packages/core/src/runtime/compileStaticCSS.ts
@@ -1,4 +1,5 @@
-import type { GriffelStaticStyle } from '../types';
+import type { GriffelStaticStyle } from '@griffel/style-types';
+
 import { cssifyObject } from './utils/cssifyObject';
 import { compileCSSRules } from './compileCSSRules';
 
diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
index 5c26dcd..318e25d 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -1,8 +1,8 @@
 import hashString from '@emotion/hash';
+import type { GriffelResetStyle, GriffelAnimation } from '@griffel/style-types';
 import { convert, convertProperty } from 'rtl-css-js/core';
 
 import { RESET_HASH_PREFIX } from '../constants';
-import { GriffelStyle, GriffelResetStyle, GriffelAnimation } from '../types';
 import { isMediaQuerySelector } from './utils/isMediaQuerySelector';
 import { isLayerSelector } from './utils/isLayerSelector';
 import { isNestedSelector } from './utils/isNestedSelector';
@@ -24,7 +24,7 @@ function createStringFromStyles(styles: GriffelResetStyle) {
 
   // eslint-disable-next-line guard-for-in
   for (const property in styles) {
-    const value = styles[property as keyof GriffelStyle];
+    const value = styles[property as keyof GriffelResetStyle];
 
     // eslint-disable-next-line eqeqeq
     if (value == null) {
diff --git a/packages/core/src/runtime/resolveStaticStyleRules.ts b/packages/core/src/runtime/resolveStaticStyleRules.ts
index 04b3328..ba51f24 100644
--- a/packages/core/src/runtime/resolveStaticStyleRules.ts
+++ b/packages/core/src/runtime/resolveStaticStyleRules.ts
@@ -1,4 +1,5 @@
-import type { GriffelStaticStyles, CSSRulesByBucket } from '../types';
+import type { GriffelStaticStyles } from '@griffel/style-types';
+import type { CSSRulesByBucket } from '../types';
 import { compileCSSRules } from './compileCSSRules';
 import { compileStaticCSS } from './compileStaticCSS';
 
diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
index 83efd9e..5d0559b 100644
--- a/packages/core/src/runtime/resolveStyleRules.ts
+++ b/packages/core/src/runtime/resolveStyleRules.ts
@@ -1,15 +1,9 @@
 import hashString from '@emotion/hash';
+import type { GriffelAnimation, GriffelStyle } from '@griffel/style-types';
 import { convert, convertProperty } from 'rtl-css-js/core';
 
 import { HASH_PREFIX, UNSUPPORTED_CSS_PROPERTIES } from '../constants';
-import {
-  GriffelStyle,
-  CSSClassesMap,
-  CSSRulesByBucket,
-  StyleBucketName,
-  GriffelAnimation,
-  CSSBucketEntry,
-} from '../types';
+import { CSSClassesMap, CSSRulesByBucket, StyleBucketName, CSSBucketEntry } from '../types';
 import { compileAtomicCSSRule, CompileAtomicCSSOptions } from './compileAtomicCSSRule';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
 import { generateCombinedQuery } from './utils/generateCombinedMediaQuery';
diff --git a/packages/core/src/runtime/utils/cssifyObject.ts b/packages/core/src/runtime/utils/cssifyObject.ts
index 2b037d4..52edad0 100644
--- a/packages/core/src/runtime/utils/cssifyObject.ts
+++ b/packages/core/src/runtime/utils/cssifyObject.ts
@@ -1,4 +1,4 @@
-import { GriffelStaticStyle, GriffelStyle } from '../../types';
+import { GriffelStaticStyle, GriffelStyle } from '@griffel/style-types';
 import { hyphenateProperty } from './hyphenateProperty';
 
 export function cssifyObject(style: GriffelStyle | GriffelStaticStyle) {
diff --git a/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
index 148e063..7e51c4b 100644
--- a/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
+++ b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
@@ -1,4 +1,4 @@
-import type { GriffelResetStyle, GriffelStyle } from '../../types';
+import type { GriffelResetStyle, GriffelStyle } from '@griffel/style-types';
 import { logError } from './logError';
 
 export function warnAboutUnresolvedRule(property: string, value: GriffelStyle | GriffelResetStyle) {
diff --git a/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts
index 1df0cf9..839e47d 100644
--- a/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts
+++ b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts
@@ -1,4 +1,4 @@
-import type { GriffelStyle } from '../../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { logError } from './logError';
 
 export function warnAboutUnsupportedProperties(property: string, value: GriffelStyle[keyof GriffelStyle]) {
diff --git a/packages/core/src/shorthands/border.ts b/packages/core/src/shorthands/border.ts
index 5294938..89d1004 100644
--- a/packages/core/src/shorthands/border.ts
+++ b/packages/core/src/shorthands/border.ts
@@ -1,11 +1,11 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { borderWidth } from './borderWidth';
 import { borderStyle } from './borderStyle';
 import { borderColor } from './borderColor';
-import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
+import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 
 type BorderStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   | 'borderTopColor'
   | 'borderTopStyle'
   | 'borderTopWidth'
diff --git a/packages/core/src/shorthands/borderBottom.ts b/packages/core/src/shorthands/borderBottom.ts
index 49a1d36..dc2a10a 100644
--- a/packages/core/src/shorthands/borderBottom.ts
+++ b/packages/core/src/shorthands/borderBottom.ts
@@ -1,10 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 
-type BorderBottomStyle = Pick<
-  GriffelStylesStrictCSSObject,
-  'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'
->;
+type BorderBottomStyle = Pick<GriffelStyle, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
 
 export function borderBottom(width: BorderWidthInput): BorderBottomStyle;
 export function borderBottom(width: BorderWidthInput, style: BorderStyleInput): BorderBottomStyle;
diff --git a/packages/core/src/shorthands/borderColor.ts b/packages/core/src/shorthands/borderColor.ts
index 8cc967f..2d34519 100644
--- a/packages/core/src/shorthands/borderColor.ts
+++ b/packages/core/src/shorthands/borderColor.ts
@@ -1,9 +1,9 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { generateStyles } from './generateStyles';
-import { BorderColorInput } from './types';
+import type { BorderColorInput } from './types';
 
 type BorderColorStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'
 >;
 
diff --git a/packages/core/src/shorthands/borderLeft.ts b/packages/core/src/shorthands/borderLeft.ts
index 66935ef..46c04c2 100644
--- a/packages/core/src/shorthands/borderLeft.ts
+++ b/packages/core/src/shorthands/borderLeft.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 
-type BorderLeftStyle = Pick<GriffelStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+type BorderLeftStyle = Pick<GriffelStyle, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
 
 export function borderLeft(width: BorderWidthInput): BorderLeftStyle;
 export function borderLeft(width: BorderWidthInput, style: BorderStyleInput): BorderLeftStyle;
@@ -20,7 +20,7 @@ export function borderLeft(width: BorderWidthInput, style: BorderStyleInput, col
 export function borderLeft(...values: [BorderWidthInput, BorderStyleInput?, BorderColorInput?]): BorderLeftStyle {
   return {
     borderLeftWidth: values[0],
-    ...(values[1] && ({ borderLeftStyle: values[1] } as GriffelStylesStrictCSSObject)),
+    ...(values[1] && ({ borderLeftStyle: values[1] } as BorderLeftStyle)),
     ...(values[2] && { borderLeftColor: values[2] }),
   };
 }
diff --git a/packages/core/src/shorthands/borderRadius.ts b/packages/core/src/shorthands/borderRadius.ts
index 66d3243..da5e05d 100644
--- a/packages/core/src/shorthands/borderRadius.ts
+++ b/packages/core/src/shorthands/borderRadius.ts
@@ -1,8 +1,8 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { BorderRadiusInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { BorderRadiusInput } from './types';
 
 type BorderRadiusStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'
 >;
 
diff --git a/packages/core/src/shorthands/borderRight.ts b/packages/core/src/shorthands/borderRight.ts
index a436966..0346538 100644
--- a/packages/core/src/shorthands/borderRight.ts
+++ b/packages/core/src/shorthands/borderRight.ts
@@ -1,10 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 
-type BorderRightStyle = Pick<
-  GriffelStylesStrictCSSObject,
-  'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'
->;
+type BorderRightStyle = Pick<GriffelStyle, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
 
 export function borderRight(width: BorderWidthInput): BorderRightStyle;
 export function borderRight(width: BorderWidthInput, style: BorderStyleInput): BorderRightStyle;
diff --git a/packages/core/src/shorthands/borderStyle.ts b/packages/core/src/shorthands/borderStyle.ts
index 7274976..dc36f64 100644
--- a/packages/core/src/shorthands/borderStyle.ts
+++ b/packages/core/src/shorthands/borderStyle.ts
@@ -1,9 +1,9 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { generateStyles } from './generateStyles';
-import { BorderStyleInput } from './types';
+import type { BorderStyleInput } from './types';
 
 type BorderStyleStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'
 >;
 
diff --git a/packages/core/src/shorthands/borderTop.ts b/packages/core/src/shorthands/borderTop.ts
index 2e8e0e7..e6f412e 100644
--- a/packages/core/src/shorthands/borderTop.ts
+++ b/packages/core/src/shorthands/borderTop.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 
-type BorderTopStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
+type BorderTopStyle = Pick<GriffelStyle, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
 
 export function borderTop(width: BorderWidthInput): BorderTopStyle;
 export function borderTop(width: BorderWidthInput, style: BorderStyleInput): BorderTopStyle;
diff --git a/packages/core/src/shorthands/borderWidth.ts b/packages/core/src/shorthands/borderWidth.ts
index 4a4217c..fe98cb3 100644
--- a/packages/core/src/shorthands/borderWidth.ts
+++ b/packages/core/src/shorthands/borderWidth.ts
@@ -1,9 +1,9 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import { generateStyles } from './generateStyles';
 import { BorderWidthInput } from './types';
 
 type BorderWidthStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'
 >;
 
diff --git a/packages/core/src/shorthands/flex.ts b/packages/core/src/shorthands/flex.ts
index bf9448a..445f242 100644
--- a/packages/core/src/shorthands/flex.ts
+++ b/packages/core/src/shorthands/flex.ts
@@ -1,8 +1,9 @@
 import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { FlexInput } from './types';
 
-type FlexStyle = Pick<GriffelStylesStrictCSSObject, 'flexGrow' | 'flexShrink' | 'flexBasis'>;
+import type { GriffelStyle } from '@griffel/style-types';
+import type { FlexInput } from './types';
+
+type FlexStyle = Pick<GriffelStyle, 'flexGrow' | 'flexShrink' | 'flexBasis'>;
 
 const isUnit = (value: CSS.Property.Flex | undefined) => typeof value === 'string' && /(\d+(\w+|%))/.test(value);
 
@@ -15,7 +16,7 @@ const isAuto = (value: CSS.Property.Flex | undefined) => value === 'auto';
 const isNone = (value: CSS.Property.Flex | undefined) => value === 'none';
 
 const widthReservedKeys = ['content', 'fit-content', 'max-content', 'min-content'] as const;
-type ReservedKeys = typeof widthReservedKeys[number];
+type ReservedKeys = (typeof widthReservedKeys)[number];
 type Width = ReservedKeys | string;
 const isWidth = (value: CSS.Property.Flex | undefined) => widthReservedKeys.some(key => value === key) || isUnit(value);
 
@@ -116,5 +117,5 @@ export function flex(...values: FlexInput): FlexStyle {
       `The value passed to shorthands.flex did not match any flex property specs. The CSS styles were not generated. Please, check the flex documentation.`,
     );
   }
-  return {};
+  return {} as FlexStyle;
 }
diff --git a/packages/core/src/shorthands/gap.ts b/packages/core/src/shorthands/gap.ts
index 0c7e667..9a1aed9 100644
--- a/packages/core/src/shorthands/gap.ts
+++ b/packages/core/src/shorthands/gap.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { GapInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { GapInput } from './types';
 
-type GapStyle = Pick<GriffelStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
+type GapStyle = Pick<GriffelStyle, 'columnGap' | 'rowGap'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "gap"
diff --git a/packages/core/src/shorthands/gridArea.ts b/packages/core/src/shorthands/gridArea.ts
index cef97dc..37329cc 100644
--- a/packages/core/src/shorthands/gridArea.ts
+++ b/packages/core/src/shorthands/gridArea.ts
@@ -1,10 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { GridAreaInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { GridAreaInput } from './types';
 
-type GridAreaStyle = Pick<
-  GriffelStylesStrictCSSObject,
-  'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd'
->;
+type GridAreaStyle = Pick<GriffelStyle, 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd'>;
 
 const cssVarRegEx = /var\(.*\)/gi;
 
diff --git a/packages/core/src/shorthands/inset.ts b/packages/core/src/shorthands/inset.ts
index 1f8247b..fa386fe 100644
--- a/packages/core/src/shorthands/inset.ts
+++ b/packages/core/src/shorthands/inset.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { InsetInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { InsetInput } from './types';
 
-type InsetStyle = Pick<GriffelStylesStrictCSSObject, 'top' | 'right' | 'bottom' | 'left'>;
+type InsetStyle = Pick<GriffelStyle, 'top' | 'right' | 'bottom' | 'left'>;
 
 export function inset(all: InsetInput): InsetStyle;
 export function inset(vertical: InsetInput, horizontal: InsetInput): InsetStyle;
diff --git a/packages/core/src/shorthands/margin.ts b/packages/core/src/shorthands/margin.ts
index d0ac501..f09e517 100644
--- a/packages/core/src/shorthands/margin.ts
+++ b/packages/core/src/shorthands/margin.ts
@@ -1,8 +1,9 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
+
 import { generateStyles } from './generateStyles';
-import { MarginInput } from './types';
+import type { MarginInput } from './types';
 
-type MarginStyle = Pick<GriffelStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
+type MarginStyle = Pick<GriffelStyle, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
 
 export function margin(all: MarginInput): MarginStyle;
 export function margin(vertical: MarginInput, horizontal: MarginInput): MarginStyle;
diff --git a/packages/core/src/shorthands/marginBlock.ts b/packages/core/src/shorthands/marginBlock.ts
index 885dbcf..e1d8e6d 100644
--- a/packages/core/src/shorthands/marginBlock.ts
+++ b/packages/core/src/shorthands/marginBlock.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { MarginBlockInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { MarginBlockInput } from './types';
 
-type MarginBlockStyle = Pick<GriffelStylesStrictCSSObject, 'marginBlockStart' | 'marginBlockEnd'>;
+type MarginBlockStyle = Pick<GriffelStyle, 'marginBlockStart' | 'marginBlockEnd'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "margin-block"
diff --git a/packages/core/src/shorthands/marginInline.ts b/packages/core/src/shorthands/marginInline.ts
index eeb24d5..02ab685 100644
--- a/packages/core/src/shorthands/marginInline.ts
+++ b/packages/core/src/shorthands/marginInline.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { MarginInlineInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { MarginInlineInput } from './types';
 
-type MarginInlineStyle = Pick<GriffelStylesStrictCSSObject, 'marginInlineStart' | 'marginInlineEnd'>;
+type MarginInlineStyle = Pick<GriffelStyle, 'marginInlineStart' | 'marginInlineEnd'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "margin-inline"
diff --git a/packages/core/src/shorthands/outline.ts b/packages/core/src/shorthands/outline.ts
index 8f23efa..a527c0d 100644
--- a/packages/core/src/shorthands/outline.ts
+++ b/packages/core/src/shorthands/outline.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { OutlineColorInput, OutlineStyleInput, OutlineWidthInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { OutlineColorInput, OutlineStyleInput, OutlineWidthInput } from './types';
 
-type OutlineStyle = Pick<GriffelStylesStrictCSSObject, 'outlineColor' | 'outlineStyle' | 'outlineWidth'>;
+type OutlineStyle = Pick<GriffelStyle, 'outlineColor' | 'outlineStyle' | 'outlineWidth'>;
 
 export function outline(width: OutlineWidthInput): OutlineStyle;
 export function outline(width: OutlineWidthInput, style: OutlineStyleInput): OutlineStyle;
diff --git a/packages/core/src/shorthands/overflow.ts b/packages/core/src/shorthands/overflow.ts
index c4667c6..3b5f94f 100644
--- a/packages/core/src/shorthands/overflow.ts
+++ b/packages/core/src/shorthands/overflow.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { OverflowInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { OverflowInput } from './types';
 
-type OverflowStyle = Pick<GriffelStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
+type OverflowStyle = Pick<GriffelStyle, 'overflowX' | 'overflowY'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "overflow"
diff --git a/packages/core/src/shorthands/padding.ts b/packages/core/src/shorthands/padding.ts
index d3cd370..bce480c 100644
--- a/packages/core/src/shorthands/padding.ts
+++ b/packages/core/src/shorthands/padding.ts
@@ -1,8 +1,9 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
+
 import { generateStyles } from './generateStyles';
-import { PaddingInput } from './types';
+import type { PaddingInput } from './types';
 
-type PaddingStyle = Pick<GriffelStylesStrictCSSObject, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+type PaddingStyle = Pick<GriffelStyle, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
 
 export function padding(all: PaddingInput): PaddingStyle;
 export function padding(vertical: PaddingInput, horizontal: PaddingInput): PaddingStyle;
diff --git a/packages/core/src/shorthands/paddingBlock.ts b/packages/core/src/shorthands/paddingBlock.ts
index 9c8a134..4739708 100644
--- a/packages/core/src/shorthands/paddingBlock.ts
+++ b/packages/core/src/shorthands/paddingBlock.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { PaddingBlockInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { PaddingBlockInput } from './types';
 
-type PaddingBlockStyle = Pick<GriffelStylesStrictCSSObject, 'paddingBlockStart' | 'paddingBlockEnd'>;
+type PaddingBlockStyle = Pick<GriffelStyle, 'paddingBlockStart' | 'paddingBlockEnd'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "padding-block"
diff --git a/packages/core/src/shorthands/paddingInline.ts b/packages/core/src/shorthands/paddingInline.ts
index 67623c0..12594c4 100644
--- a/packages/core/src/shorthands/paddingInline.ts
+++ b/packages/core/src/shorthands/paddingInline.ts
@@ -1,7 +1,7 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
-import { PaddingInlineInput } from './types';
+import type { GriffelStyle } from '@griffel/style-types';
+import type { PaddingInlineInput } from './types';
 
-type PaddingInlineStyle = Pick<GriffelStylesStrictCSSObject, 'paddingInlineStart' | 'paddingInlineEnd'>;
+type PaddingInlineStyle = Pick<GriffelStyle, 'paddingInlineStart' | 'paddingInlineEnd'>;
 
 /**
  * A function that implements CSS spec conformant expansion for "padding-inline"
diff --git a/packages/core/src/shorthands/textDecoration.ts b/packages/core/src/shorthands/textDecoration.ts
index bcd11a7..3639c59 100644
--- a/packages/core/src/shorthands/textDecoration.ts
+++ b/packages/core/src/shorthands/textDecoration.ts
@@ -1,4 +1,4 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import {
   TextDecorationColorInput,
   TextDecorationLineInput,
@@ -7,7 +7,7 @@ import {
 } from './types';
 
 type TextDecorationStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'textDecorationStyle' | 'textDecorationLine' | 'textDecorationColor' | 'textDecorationThickness'
 >;
 
@@ -45,18 +45,20 @@ export function textDecoration(
 ): TextDecorationStyle {
   if (values.length === 0) {
     return isTextDecorationStyleInput(value) ? { textDecorationStyle: value } : { textDecorationLine: value };
-  } else {
-    const [textDecorationStyle, textDecorationColor, textDecorationThickness] = values;
-    return {
-      textDecorationLine: value,
-      ...(textDecorationStyle && { textDecorationStyle }),
-      ...(textDecorationColor && { textDecorationColor }),
-      ...(textDecorationThickness && { textDecorationThickness }),
-    };
   }
+
+  const [textDecorationStyle, textDecorationColor, textDecorationThickness] = values;
+
+  return {
+    textDecorationLine: value,
+    ...(textDecorationStyle && { textDecorationStyle }),
+    ...(textDecorationColor && { textDecorationColor }),
+    ...(textDecorationThickness && { textDecorationThickness }),
+  };
 }
 
 const textDecorationStyleInputs: TextDecorationStyleInput[] = ['dashed', 'dotted', 'double', 'solid', 'wavy'];
+
 function isTextDecorationStyleInput(
   value: TextDecorationLineInput | TextDecorationStyleInput,
 ): value is TextDecorationStyleInput {
diff --git a/packages/core/src/shorthands/transition.ts b/packages/core/src/shorthands/transition.ts
index d4c38be..3dafb24 100644
--- a/packages/core/src/shorthands/transition.ts
+++ b/packages/core/src/shorthands/transition.ts
@@ -1,4 +1,4 @@
-import type { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStyle } from '@griffel/style-types';
 import {
   TransitionDelayInput,
   TransitionDurationInput,
@@ -15,7 +15,7 @@ type TransitionInputs = [
 ];
 
 type TransitionStyle = Pick<
-  GriffelStylesStrictCSSObject,
+  GriffelStyle,
   'transitionProperty' | 'transitionDelay' | 'transitionDuration' | 'transitionTimingFunction'
 >;
 
diff --git a/packages/core/src/shorthands/types.ts b/packages/core/src/shorthands/types.ts
index f162d25..4e812e3 100644
--- a/packages/core/src/shorthands/types.ts
+++ b/packages/core/src/shorthands/types.ts
@@ -1,5 +1,5 @@
+import type { GriffelStylesCSSValue, ValueOrArray } from '@griffel/style-types';
 import * as CSS from 'csstype';
-import { GriffelStylesCSSValue, ValueOrArray } from '../types';
 
 export type BorderWidthInput = ValueOrArray<CSS.Property.BorderWidth<GriffelStylesCSSValue>>;
 export type BorderStyleInput = ValueOrArray<CSS.Property.BorderStyle>;
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 32e6a08..408378b 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,278 +1,4 @@
-import * as CSS from 'csstype';
-
-export type GriffelStylesCSSValue = string | 0;
-
-/**
- * Griffel doesn't support expansion of CSS shorthands.
- * They can be replaced either with the corresponding longhand properties or with the `shorthands` helper functions.
- * @see https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported
- */
-export interface GriffelStylesUnsupportedCSSProperties extends Record<keyof CSS.StandardShorthandProperties, never> {
-  /** @deprecated */
-  all: never;
-  /** @deprecated Use corresponding longhand properties such as `animationName` and `animationDuration` instead. */
-  animation: never;
-  /** @deprecated Use corresponding longhand properties such as `backgroundImage` and `backgroundSize` instead. */
-  background: never;
-  /** @deprecated Use corresponding longhand properties `backgroundPositionX` and `backgroundPositionY` instead. */
-  backgroundPosition: never;
-  /** @deprecated Use `shorthands.border()` instead. */
-  border: never;
-  /** @deprecated Use corresponding longhand properties such as `borderBlockStartColor` and `borderBlockEndStyle` instead. */
-  borderBlock: never;
-  /** @deprecated Use corresponding longhand properties such as `borderBlockEndColor` and `borderBlockEndStyle` instead. */
-  borderBlockEnd: never;
-  /** @deprecated Use corresponding longhand properties such as `borderBlockStartColor` and `borderBlockStartStyle` instead. */
-  borderBlockStart: never;
-  /** @deprecated Use `shorthands.borderBottom()` instead. */
-  borderBottom: never;
-  /** @deprecated Use `shorthands.borderColor()` instead. */
-  borderColor: never;
-  /** @deprecated Use corresponding longhand properties such as `borderImageSource` and `borderImageWidth` instead. */
-  borderImage: never;
-  /** @deprecated Use corresponding longhand properties such as `borderInlineStartColor` and `borderInlineEndStyle` instead. */
-  borderInline: never;
-  /** @deprecated Use corresponding longhand properties such as `borderInlineEndColor` and `borderInlineEndStyle` instead. */
-  borderInlineEnd: never;
-  /** @deprecated Use corresponding longhand properties such as `borderInlineStartColor` and `borderInlineStartStyle` instead. */
-  borderInlineStart: never;
-  /** @deprecated Use `shorthands.borderLeft()` instead. */
-  borderLeft: never;
-  /** @deprecated Use `shorthands.borderRadius()` instead. */
-  borderRadius: never;
-  /** @deprecated Use `shorthands.borderRight()` instead. */
-  borderRight: never;
-  /** @deprecated Use `shorthands.borderStyle()` instead. */
-  borderStyle: never;
-  /** @deprecated Use `shorthands.borderTop()` instead. */
-  borderTop: never;
-  /** @deprecated Use `shorthands.borderWidth()` instead. */
-  borderWidth: never;
-  /** @deprecated Use corresponding longhand properties `caretColor` and `caretShape` instead. */
-  caret: never;
-  /** @deprecated Use corresponding longhand properties `columnCount` and `columnWidth` instead. */
-  columns: never;
-  /** @deprecated Use corresponding longhand properties such as `columnRuleWidth` and `columnRuleColor` instead. */
-  columnRule: never;
-  /** @deprecated Use corresponding longhand properties `containIntrinsicWidth` and `containIntrinsicHeight` instead. */
-  containIntrinsicSize: never;
-  /** @deprecated Use corresponding longhand properties `containerName` and `containerType` instead. */
-  container: never;
-  /** @deprecated Use `shorthands.flex()` instead. */
-  flex: never;
-  /** @deprecated Use corresponding longhand properties `flexWrap` and `flexDirection` instead. */
-  flexFlow: never;
-  /** @deprecated Use corresponding longhand properties such as `fontFamily` and `fontSize` instead. */
-  font: never;
-  /** @deprecated Use `shorthands.gap()` instead. */
-  gap: never;
-  /** @deprecated Use corresponding longhand properties such as `gridTemplateColumns` and `gridAutoRows` instead. */
-  grid: never;
-  /** @deprecated Use `shorthands.gridArea()` instead. */
-  gridArea: never;
-  /** @deprecated Use corresponding longhand properties `gridColumnStart` and `gridColumnEnd` instead. */
-  gridColumn: never;
-  /** @deprecated Use corresponding longhand properties `gridRowStart` and `gridRowEnd` instead. */
-  gridRow: never;
-  /** @deprecated Use corresponding longhand properties such as `gridTemplateColumns` and `gridTemplateRows` instead. */
-  gridTemplate: never;
-  /** @deprecated Use corresponding longhand properties `top`, `right`, `left` and `bottom` instead. */
-  inset: never;
-  /** @deprecated Use corresponding longhand properties such as `insetBlockStart` and `insetBlockEnd` instead. */
-  insetBlock: never;
-  /** @deprecated Use corresponding longhand properties such as `insetInlineStart` and `insetInlineEnd` instead. */
-  insetInline: never;
-  /** @deprecated */
-  lineClamp: never;
-  /** @deprecated Use corresponding longhand properties such as `listStyleType` instead. */
-  listStyle: never;
-  /** @deprecated Use `shorthands.margin()` instead. */
-  margin: never;
-  /** @deprecated Use `shorthands.marginBlock()` instead. */
-  marginBlock: never;
-  /** @deprecated Use `shorthands.marginInline()` instead. */
-  marginInline: never;
-  /** @deprecated Use corresponding longhand properties such as `maskImage` and `maskSize` instead. */
-  mask: never;
-  /** @deprecated Use corresponding longhand properties such as `maskBorderSource` and `maskBorderWidth` instead. */
-  maskBorder: never;
-  /** @deprecated */
-  motion: never;
-  /** @deprecated Use corresponding longhand properties such as `offsetPath` and `offsetDistance` instead. */
-  offset: never;
-  /** @deprecated Use corresponding longhand properties such as `outlineColor` and `outlineWidth` instead. */
-  outline: never;
-  /** @deprecated Use `shorthands.overflow()` instead. */
-  overflow: never;
-  /** @deprecated Use corresponding longhand properties `overscrollBehaviorX` and `overscrollBehaviorY` instead. */
-  overscrollBehavior: never;
-  /** @deprecated Use `shorthands.padding()` instead. */
-  padding: never;
-  /** @deprecated Use `shorthands.paddingBlock()` instead. */
-  paddingBlock: never;
-  /** @deprecated Use `shorthands.paddingInline()` instead. */
-  paddingInline: never;
-  /** @deprecated Use corresponding longhand properties `alignItems` and `justifyItems` instead. */
-  placeItems: never;
-  /** @deprecated Use corresponding longhand properties `alignContent` and `justifyContent` instead. */
-  placeContent: never;
-  /** @deprecated Use corresponding longhand properties `alignSelf` and `justifySelf` instead. */
-  placeSelf: never;
-  /** @deprecated */
-  scrollMargin: never;
-  /** @deprecated */
-  scrollMarginBlock: never;
-  /** @deprecated */
-  scrollMarginInline: never;
-  /** @deprecated */
-  scrollPadding: never;
-  /** @deprecated */
-  scrollPaddingBlock: never;
-  /** @deprecated */
-  scrollPaddingInline: never;
-  /** @deprecated */
-  scrollSnapMargin: never;
-  /** @deprecated */
-  scrollTimeline: never;
-  /** @deprecated Use corresponding longhand properties such as `textDecorationColor` and `textDecorationLine` instead. */
-  textDecoration: never;
-  /** @deprecated Use corresponding longhand properties `textEmphasisColor` and `textEmphasisStyle` instead. */
-  textEmphasis: never;
-  /** @deprecated Use `shorthands.transition()` instead. */
-  transition: never;
-}
-
-export type ValueOrArray<T> = T | Array<T>;
-
-type GriffelStylesCSSProperties = Omit<
-  CSS.PropertiesFallback<GriffelStylesCSSValue>,
-  // We have custom definition for "animationName"
-  'animationName'
-> &
-  Partial<GriffelStylesUnsupportedCSSProperties>;
-
-export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties &
-  GriffelStylesCSSPseudos & {
-    animationName?: GriffelAnimation | GriffelAnimation[] | CSS.Property.Animation;
-  };
-
-type GriffelStylesCSSPseudos = {
-  [Property in CSS.Pseudos]?:
-    | (GriffelStylesStrictCSSObject & { content?: string | string[] })
-    | (GriffelStylesCSSObjectCustomL1 & { content?: string | string[] });
-};
-
-//
-// "GriffelStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4.
-// Once we will support "typesVersions" (types downleleving) or update our requirements for TS this should be
-// updated or removed.
-//
-
-type GriffelStylesCSSObjectCustomL1 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL2;
-} & GriffelStylesStrictCSSObject;
-
-type GriffelStylesCSSObjectCustomL2 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL3;
-} & GriffelStylesStrictCSSObject;
-
-type GriffelStylesCSSObjectCustomL3 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL4;
-} & GriffelStylesStrictCSSObject;
-
-type GriffelStylesCSSObjectCustomL4 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL5;
-} & GriffelStylesStrictCSSObject;
-
-type GriffelStylesCSSObjectCustomL5 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesStrictCSSObject;
-} & GriffelStylesStrictCSSObject;
-
-export type GriffelStyle = GriffelStylesStrictCSSObject | GriffelStylesCSSObjectCustomL1;
-export type GriffelAnimation = Record<'from' | 'to' | string, GriffelStylesCSSObjectCustomL1>;
-
-// Types for makeStaticStyles()
-// ---
-
-export type GriffelStaticStyle = {
-  [key: string]: CSS.Properties &
-    // TODO Questionable: how else would users target their own children?
-    Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
-} & {
-  '@font-face'?: {
-    fontFamily: string;
-    src: string;
-
-    fontFeatureSettings?: string;
-    fontStretch?: string;
-    fontStyle?: string;
-    fontVariant?: string;
-    fontVariationSettings?: string;
-    fontWeight?: number | string;
-
-    unicodeRange?: string;
-  };
-};
-export type GriffelStaticStyles = GriffelStaticStyle | string;
-
-// Types for makeResetStyles()
-// ---
-
-type GriffelResetStylesCSSProperties = Omit<
-  CSS.PropertiesFallback<ValueOrArray<GriffelStylesCSSValue>>,
-  // We have custom definition for "animationName"
-  'animationName'
->;
-
-type GriffelResetStylesStrictCSSObject = GriffelResetStylesCSSProperties &
-  GriffelResetStylesCSSPseudos & {
-    animationName?: GriffelAnimation | GriffelAnimation[] | CSS.Property.Animation;
-  };
-
-type GriffelResetStylesCSSPseudos = {
-  [Property in CSS.Pseudos]?:
-    | (GriffelResetStylesStrictCSSObject & { content?: string | string[] })
-    | (GriffelResetStylesCSSObjectCustomL1 & { content?: string | string[] });
-};
-
-//
-// "GriffelStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4.
-// Once we will support "typesVersions" (types downleleving) or update our requirements for TS this should be
-// updated or removed.
-//
-
-type GriffelResetStylesCSSObjectCustomL1 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL2;
-} & GriffelResetStylesStrictCSSObject;
-
-type GriffelResetStylesCSSObjectCustomL2 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL3;
-} & GriffelResetStylesStrictCSSObject;
-
-type GriffelResetStylesCSSObjectCustomL3 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL4;
-} & GriffelResetStylesStrictCSSObject;
-
-type GriffelResetStylesCSSObjectCustomL4 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL5;
-} & GriffelResetStylesStrictCSSObject;
-
-type GriffelResetStylesCSSObjectCustomL5 = {
-  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesStrictCSSObject;
-} & GriffelResetStylesStrictCSSObject;
-
-export type GriffelResetStyle = GriffelResetStylesStrictCSSObject | GriffelResetStylesCSSObjectCustomL1;
-
-// ---
-
-export interface MakeStylesOptions {
-  dir: 'ltr' | 'rtl';
-  renderer: GriffelRenderer;
-}
-
-export interface MakeStaticStylesOptions {
-  renderer: GriffelRenderer;
-}
+import type { GriffelStyle } from '@griffel/style-types';
 
 export interface IsomorphicStyleSheet {
   /**
diff --git a/packages/style-types/src/index.ts b/packages/style-types/src/index.ts
index cb0ff5c..bda19c3 100644
--- a/packages/style-types/src/index.ts
+++ b/packages/style-types/src/index.ts
@@ -1,1 +1,6 @@
-export {};
+export type { GriffelAnimation, GriffelStyle } from './makeStyles';
+export type { GriffelResetStyle } from './makeResetStyles';
+export type { GriffelStaticStyle, GriffelStaticStyles } from './makeStaticStyles';
+
+export type { GriffelStylesCSSValue, ValueOrArray } from './shared';
+export type { GriffelStylesUnsupportedCSSProperties } from './unsupported-properties';
diff --git a/packages/style-types/src/makeResetStyles.ts b/packages/style-types/src/makeResetStyles.ts
new file mode 100644
index 0000000..0ccf7db
--- /dev/null
+++ b/packages/style-types/src/makeResetStyles.ts
@@ -0,0 +1,51 @@
+import * as CSS from 'csstype';
+import type { GriffelStylesCSSValue, ValueOrArray } from './shared';
+
+//
+// Types for makeResetStyles()
+// ---
+//
+
+type GriffelResetStylesCSSProperties = Omit<
+  CSS.PropertiesFallback<ValueOrArray<GriffelStylesCSSValue>>,
+  // We have custom definition for "animationName"
+  'animationName'
+>;
+
+type GriffelResetStylesStrictCSSObject = GriffelResetStylesCSSProperties &
+  GriffelResetStylesCSSPseudos & {
+    animationName?: GriffelResetAnimation | GriffelResetAnimation[] | CSS.Property.Animation;
+  };
+
+type GriffelResetStylesCSSPseudos = {
+  [Property in CSS.Pseudos]?:
+    | (GriffelResetStylesStrictCSSObject & { content?: string | string[] })
+    | (GriffelResetStylesCSSObjectCustomL1 & { content?: string | string[] });
+};
+
+//
+// "GriffelStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4.
+//
+
+type GriffelResetStylesCSSObjectCustomL1 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL2;
+} & GriffelResetStylesStrictCSSObject;
+
+type GriffelResetStylesCSSObjectCustomL2 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL3;
+} & GriffelResetStylesStrictCSSObject;
+
+type GriffelResetStylesCSSObjectCustomL3 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL4;
+} & GriffelResetStylesStrictCSSObject;
+
+type GriffelResetStylesCSSObjectCustomL4 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesCSSObjectCustomL5;
+} & GriffelResetStylesStrictCSSObject;
+
+type GriffelResetStylesCSSObjectCustomL5 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelResetStylesStrictCSSObject;
+} & GriffelResetStylesStrictCSSObject;
+
+export type GriffelResetStyle = GriffelResetStylesStrictCSSObject | GriffelResetStylesCSSObjectCustomL1;
+export type GriffelResetAnimation = Record<'from' | 'to' | string, GriffelResetStyle>;
diff --git a/packages/style-types/src/makeStaticStyles.ts b/packages/style-types/src/makeStaticStyles.ts
new file mode 100644
index 0000000..50aa87c
--- /dev/null
+++ b/packages/style-types/src/makeStaticStyles.ts
@@ -0,0 +1,27 @@
+import * as CSS from 'csstype';
+
+//
+// Types for makeStaticStyles()
+// ---
+//
+
+export type GriffelStaticStyle = {
+  [key: string]: CSS.Properties &
+    // TODO Questionable: how else would users target their own children?
+    Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+} & {
+  '@font-face'?: {
+    fontFamily: string;
+    src: string;
+
+    fontFeatureSettings?: string;
+    fontStretch?: string;
+    fontStyle?: string;
+    fontVariant?: string;
+    fontVariationSettings?: string;
+    fontWeight?: number | string;
+
+    unicodeRange?: string;
+  };
+};
+export type GriffelStaticStyles = GriffelStaticStyle | string;
diff --git a/packages/style-types/src/makeStyles.ts b/packages/style-types/src/makeStyles.ts
new file mode 100644
index 0000000..ff2c842
--- /dev/null
+++ b/packages/style-types/src/makeStyles.ts
@@ -0,0 +1,54 @@
+import * as CSS from 'csstype';
+
+import type { GriffelStylesCSSValue } from './shared';
+import type { GriffelStylesUnsupportedCSSProperties } from './unsupported-properties';
+
+//
+// Types for makeStyles()
+// ---
+//
+
+type GriffelStylesCSSProperties = Omit<
+  CSS.PropertiesFallback<GriffelStylesCSSValue>,
+  // We have custom definition for "animationName"
+  'animationName'
+> &
+  Partial<GriffelStylesUnsupportedCSSProperties>;
+
+export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties &
+  GriffelStylesCSSPseudos & {
+    animationName?: GriffelAnimation | GriffelAnimation[] | CSS.Property.Animation;
+  };
+
+type GriffelStylesCSSPseudos = {
+  [Property in CSS.Pseudos]?:
+    | (GriffelStylesStrictCSSObject & { content?: string | string[] })
+    | (GriffelStylesCSSObjectCustomL1 & { content?: string | string[] });
+};
+
+//
+// "GriffelStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4.
+//
+
+type GriffelStylesCSSObjectCustomL1 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL2;
+} & GriffelStylesStrictCSSObject;
+
+type GriffelStylesCSSObjectCustomL2 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL3;
+} & GriffelStylesStrictCSSObject;
+
+type GriffelStylesCSSObjectCustomL3 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL4;
+} & GriffelStylesStrictCSSObject;
+
+type GriffelStylesCSSObjectCustomL4 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL5;
+} & GriffelStylesStrictCSSObject;
+
+type GriffelStylesCSSObjectCustomL5 = {
+  [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesStrictCSSObject;
+} & GriffelStylesStrictCSSObject;
+
+export type GriffelStyle = GriffelStylesStrictCSSObject | GriffelStylesCSSObjectCustomL1;
+export type GriffelAnimation = Record<'from' | 'to' | string, GriffelStylesCSSObjectCustomL1>;
diff --git a/packages/style-types/src/shared.ts b/packages/style-types/src/shared.ts
new file mode 100644
index 0000000..03f3493
--- /dev/null
+++ b/packages/style-types/src/shared.ts
@@ -0,0 +1,3 @@
+export type GriffelStylesCSSValue = string | 0;
+
+export type ValueOrArray<T> = T | Array<T>;
diff --git a/packages/style-types/src/unsupported-properties.ts b/packages/style-types/src/unsupported-properties.ts
new file mode 100644
index 0000000..ae32db6
--- /dev/null
+++ b/packages/style-types/src/unsupported-properties.ts
@@ -0,0 +1,141 @@
+import * as CSS from 'csstype';
+
+/**
+ * Griffel doesn't support expansion of CSS shorthands.
+ * They can be replaced either with the corresponding longhand properties or with the `shorthands` helper functions.
+ * @see https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported
+ */
+export interface GriffelStylesUnsupportedCSSProperties extends Record<keyof CSS.StandardShorthandProperties, never> {
+  /** @deprecated */
+  all: never;
+  /** @deprecated Use corresponding longhand properties such as `animationName` and `animationDuration` instead. */
+  animation: never;
+  /** @deprecated Use corresponding longhand properties such as `backgroundImage` and `backgroundSize` instead. */
+  background: never;
+  /** @deprecated Use corresponding longhand properties `backgroundPositionX` and `backgroundPositionY` instead. */
+  backgroundPosition: never;
+  /** @deprecated Use `shorthands.border()` instead. */
+  border: never;
+  /** @deprecated Use corresponding longhand properties such as `borderBlockStartColor` and `borderBlockEndStyle` instead. */
+  borderBlock: never;
+  /** @deprecated Use corresponding longhand properties such as `borderBlockEndColor` and `borderBlockEndStyle` instead. */
+  borderBlockEnd: never;
+  /** @deprecated Use corresponding longhand properties such as `borderBlockStartColor` and `borderBlockStartStyle` instead. */
+  borderBlockStart: never;
+  /** @deprecated Use `shorthands.borderBottom()` instead. */
+  borderBottom: never;
+  /** @deprecated Use `shorthands.borderColor()` instead. */
+  borderColor: never;
+  /** @deprecated Use corresponding longhand properties such as `borderImageSource` and `borderImageWidth` instead. */
+  borderImage: never;
+  /** @deprecated Use corresponding longhand properties such as `borderInlineStartColor` and `borderInlineEndStyle` instead. */
+  borderInline: never;
+  /** @deprecated Use corresponding longhand properties such as `borderInlineEndColor` and `borderInlineEndStyle` instead. */
+  borderInlineEnd: never;
+  /** @deprecated Use corresponding longhand properties such as `borderInlineStartColor` and `borderInlineStartStyle` instead. */
+  borderInlineStart: never;
+  /** @deprecated Use `shorthands.borderLeft()` instead. */
+  borderLeft: never;
+  /** @deprecated Use `shorthands.borderRadius()` instead. */
+  borderRadius: never;
+  /** @deprecated Use `shorthands.borderRight()` instead. */
+  borderRight: never;
+  /** @deprecated Use `shorthands.borderStyle()` instead. */
+  borderStyle: never;
+  /** @deprecated Use `shorthands.borderTop()` instead. */
+  borderTop: never;
+  /** @deprecated Use `shorthands.borderWidth()` instead. */
+  borderWidth: never;
+  /** @deprecated Use corresponding longhand properties `caretColor` and `caretShape` instead. */
+  caret: never;
+  /** @deprecated Use corresponding longhand properties `columnCount` and `columnWidth` instead. */
+  columns: never;
+  /** @deprecated Use corresponding longhand properties such as `columnRuleWidth` and `columnRuleColor` instead. */
+  columnRule: never;
+  /** @deprecated Use corresponding longhand properties `containIntrinsicWidth` and `containIntrinsicHeight` instead. */
+  containIntrinsicSize: never;
+  /** @deprecated Use corresponding longhand properties `containerName` and `containerType` instead. */
+  container: never;
+  /** @deprecated Use `shorthands.flex()` instead. */
+  flex: never;
+  /** @deprecated Use corresponding longhand properties `flexWrap` and `flexDirection` instead. */
+  flexFlow: never;
+  /** @deprecated Use corresponding longhand properties such as `fontFamily` and `fontSize` instead. */
+  font: never;
+  /** @deprecated Use `shorthands.gap()` instead. */
+  gap: never;
+  /** @deprecated Use corresponding longhand properties such as `gridTemplateColumns` and `gridAutoRows` instead. */
+  grid: never;
+  /** @deprecated Use `shorthands.gridArea()` instead. */
+  gridArea: never;
+  /** @deprecated Use corresponding longhand properties `gridColumnStart` and `gridColumnEnd` instead. */
+  gridColumn: never;
+  /** @deprecated Use corresponding longhand properties `gridRowStart` and `gridRowEnd` instead. */
+  gridRow: never;
+  /** @deprecated Use corresponding longhand properties such as `gridTemplateColumns` and `gridTemplateRows` instead. */
+  gridTemplate: never;
+  /** @deprecated Use corresponding longhand properties `top`, `right`, `left` and `bottom` instead. */
+  inset: never;
+  /** @deprecated Use corresponding longhand properties such as `insetBlockStart` and `insetBlockEnd` instead. */
+  insetBlock: never;
+  /** @deprecated Use corresponding longhand properties such as `insetInlineStart` and `insetInlineEnd` instead. */
+  insetInline: never;
+  /** @deprecated */
+  lineClamp: never;
+  /** @deprecated Use corresponding longhand properties such as `listStyleType` instead. */
+  listStyle: never;
+  /** @deprecated Use `shorthands.margin()` instead. */
+  margin: never;
+  /** @deprecated Use `shorthands.marginBlock()` instead. */
+  marginBlock: never;
+  /** @deprecated Use `shorthands.marginInline()` instead. */
+  marginInline: never;
+  /** @deprecated Use corresponding longhand properties such as `maskImage` and `maskSize` instead. */
+  mask: never;
+  /** @deprecated Use corresponding longhand properties such as `maskBorderSource` and `maskBorderWidth` instead. */
+  maskBorder: never;
+  /** @deprecated */
+  motion: never;
+  /** @deprecated Use corresponding longhand properties such as `offsetPath` and `offsetDistance` instead. */
+  offset: never;
+  /** @deprecated Use corresponding longhand properties such as `outlineColor` and `outlineWidth` instead. */
+  outline: never;
+  /** @deprecated Use `shorthands.overflow()` instead. */
+  overflow: never;
+  /** @deprecated Use corresponding longhand properties `overscrollBehaviorX` and `overscrollBehaviorY` instead. */
+  overscrollBehavior: never;
+  /** @deprecated Use `shorthands.padding()` instead. */
+  padding: never;
+  /** @deprecated Use `shorthands.paddingBlock()` instead. */
+  paddingBlock: never;
+  /** @deprecated Use `shorthands.paddingInline()` instead. */
+  paddingInline: never;
+  /** @deprecated Use corresponding longhand properties `alignItems` and `justifyItems` instead. */
+  placeItems: never;
+  /** @deprecated Use corresponding longhand properties `alignContent` and `justifyContent` instead. */
+  placeContent: never;
+  /** @deprecated Use corresponding longhand properties `alignSelf` and `justifySelf` instead. */
+  placeSelf: never;
+  /** @deprecated */
+  scrollMargin: never;
+  /** @deprecated */
+  scrollMarginBlock: never;
+  /** @deprecated */
+  scrollMarginInline: never;
+  /** @deprecated */
+  scrollPadding: never;
+  /** @deprecated */
+  scrollPaddingBlock: never;
+  /** @deprecated */
+  scrollPaddingInline: never;
+  /** @deprecated */
+  scrollSnapMargin: never;
+  /** @deprecated */
+  scrollTimeline: never;
+  /** @deprecated Use corresponding longhand properties such as `textDecorationColor` and `textDecorationLine` instead. */
+  textDecoration: never;
+  /** @deprecated Use corresponding longhand properties `textEmphasisColor` and `textEmphasisStyle` instead. */
+  textEmphasis: never;
+  /** @deprecated Use `shorthands.transition()` instead. */
+  transition: never;
+}


Test patch:
diff --git a/e2e/nextjs/src/test.ts b/e2e/nextjs/src/test.ts
index 305fe5f..35e8587 100644
--- a/e2e/nextjs/src/test.ts
+++ b/e2e/nextjs/src/test.ts
@@ -20,6 +20,7 @@ async function performTest() {
     await configureYarn({ tempDir, rootDir });
 
     const resolutions = await Promise.all([
+      packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
       packLocalPackage(rootDir, tempDir, '@griffel/core'),
       packLocalPackage(rootDir, tempDir, '@griffel/react'),
       packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'),
diff --git a/e2e/typescript/src/assets/fixture-reset.ts b/e2e/typescript/src/assets/fixture-reset.ts
index 1ba44ff..ceb2cbe 100644
--- a/e2e/typescript/src/assets/fixture-reset.ts
+++ b/e2e/typescript/src/assets/fixture-reset.ts
@@ -1,4 +1,4 @@
-import { GriffelResetStyle } from '@griffel/core';
+import type { GriffelResetStyle } from '@griffel/style-types';
 
 function assertType(style: GriffelResetStyle): GriffelResetStyle {
   return style;
diff --git a/e2e/typescript/src/assets/fixture.ts b/e2e/typescript/src/assets/fixture.ts
index c464693..c27c25d 100644
--- a/e2e/typescript/src/assets/fixture.ts
+++ b/e2e/typescript/src/assets/fixture.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@griffel/core';
+import type { GriffelStyle } from '@griffel/style-types';
 
 function assertType(style: GriffelStyle): GriffelStyle {
   return style;
diff --git a/e2e/typescript/src/test.ts b/e2e/typescript/src/test.ts
index 74b6957..c17e785 100644
--- a/e2e/typescript/src/test.ts
+++ b/e2e/typescript/src/test.ts
@@ -19,7 +19,7 @@ async function performTest(tsVersion: string) {
     await configureYarn({ tempDir, rootDir });
 
     const resolutions = [
-      await packLocalPackage(rootDir, tempDir, '@griffel/core'),
+      await packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
       { packageName: 'typescript', version: tsVersion },
     ];
 
@@ -54,7 +54,7 @@ async function performTest(tsVersion: string) {
     console.log('');
     console.error(
       logSymbols.error,
-      `Building a test project referencing @griffel/core using typescript@${tsVersion} failed.`,
+      `Building a test project referencing @griffel/style-types using typescript@${tsVersion} failed.`,
     );
     console.error(
       `This is most likely because you added an API in @griffel/core or a dependency which uses ` +
diff --git a/packages/core/src/devtools/getDebugTree.test.ts b/packages/core/src/devtools/getDebugTree.test.ts
index 552b319..2f1c27c 100644
--- a/packages/core/src/devtools/getDebugTree.test.ts
+++ b/packages/core/src/devtools/getDebugTree.test.ts
@@ -2,7 +2,7 @@ import { SEQUENCE_PREFIX } from '../constants';
 import { makeStyles } from '../makeStyles';
 import { mergeClasses } from '../mergeClasses';
 import { createDOMRenderer } from '../renderer/createDOMRenderer';
-import { MakeStylesOptions } from '../types';
+import { MakeStylesOptions } from '../makeStyles';
 import { getDebugTree } from './getDebugTree';
 
 jest.mock('./isDevToolsEnabled', () => ({
diff --git a/packages/core/src/devtools/store.test.ts b/packages/core/src/devtools/store.test.ts
index 6eb7a9a..2dc0d65 100644
--- a/packages/core/src/devtools/store.test.ts
+++ b/packages/core/src/devtools/store.test.ts
@@ -2,7 +2,7 @@ import { SEQUENCE_PREFIX } from '../constants';
 import { makeStyles } from '../makeStyles';
 import { mergeClasses } from '../mergeClasses';
 import { createDOMRenderer } from '../renderer/createDOMRenderer';
-import { MakeStylesOptions } from '../types';
+import { MakeStylesOptions } from '../makeStyles';
 import { debugData } from './store';
 
 jest.mock('./isDevToolsEnabled', () => ({
diff --git a/packages/core/src/makeResetStyles.test.ts b/packages/core/src/makeResetStyles.test.ts
index cc738d5..7b1a6f4 100644
--- a/packages/core/src/makeResetStyles.test.ts
+++ b/packages/core/src/makeResetStyles.test.ts
@@ -1,7 +1,7 @@
 import { griffelRendererSerializer } from './common/snapshotSerializers';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
 import { makeResetStyles } from './makeResetStyles';
-import { GriffelRenderer } from './types';
+import type { GriffelRenderer } from './types';
 
 expect.addSnapshotSerializer(griffelRendererSerializer);
 
diff --git a/packages/core/src/mergeClasses.test.ts b/packages/core/src/mergeClasses.test.ts
index 77e44df..26a09ef 100644
--- a/packages/core/src/mergeClasses.test.ts
+++ b/packages/core/src/mergeClasses.test.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from './mergeClasses';
 import { makeStyles } from './makeStyles';
+import type { MakeStylesOptions } from './makeStyles';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
-import { MakeStylesOptions } from './types';
 import { SEQUENCE_PREFIX, SEQUENCE_SIZE } from './constants';
 import { makeResetStyles } from './makeResetStyles';
 
diff --git a/packages/core/src/runtime/compileKeyframeCSS.test.ts b/packages/core/src/runtime/compileKeyframeCSS.test.ts
index b91da9e..d857f97 100644
--- a/packages/core/src/runtime/compileKeyframeCSS.test.ts
+++ b/packages/core/src/runtime/compileKeyframeCSS.test.ts
@@ -1,5 +1,5 @@
+import type { GriffelAnimation } from '@griffel/style-types';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
-import { GriffelAnimation } from '../types';
 
 describe('compileKeyframeRule', () => {
   it('stringifies an object with keyframes', () => {
diff --git a/packages/core/src/shorthands/generateStyles.ts b/packages/core/src/shorthands/generateStyles.ts
index 4ae124d..44bc4a6 100644
--- a/packages/core/src/shorthands/generateStyles.ts
+++ b/packages/core/src/shorthands/generateStyles.ts
@@ -1,11 +1,10 @@
-import type { GriffelStylesCSSValue, ValueOrArray } from '../types';
-import { GriffelStylesStrictCSSObject } from '../types';
+import type { GriffelStylesCSSValue, ValueOrArray, GriffelStyle } from '@griffel/style-types';
 
 type DirectionalProperties = 'border' | 'padding' | 'margin';
 
 const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
 
-export function generateStyles<Styles extends GriffelStylesStrictCSSObject>(
+export function generateStyles<Styles extends GriffelStyle>(
   property: DirectionalProperties,
   suffix: '' | 'Color' | 'Style' | 'Width',
   ...values: ValueOrArray<GriffelStylesCSSValue>[]