feat(preset-mini)!: improve the type of theme, requires TS 4.9

packages/preset-mini/src/_theme/colors.ts

@@ -6,7 +6,7 @@
 
 import type { Theme } from './types'
 
-export const colors: Theme['colors'] = {
+export const colors = {
   inherit: 'inherit',
   current: 'currentColor',
   transparent: 'transparent',
@@ -331,10 +331,10 @@ export const colors: Theme['colors'] = {
   get blueGray() {
     return this.slate
   },
-}
+} satisfies Theme['colors']
 
 // assign default color, and color shortcuts
-Object.values(colors).forEach((color) => {
+Object.values(colors as Required<Theme>['colors']).forEach((color) => {
   if (typeof color !== 'string') {
     color.DEFAULT = color.DEFAULT || color[400]
     Object.keys(color).forEach((key) => {

packages/preset-mini/src/_theme/default.ts

@@ -6,7 +6,7 @@ import { containers, height, maxHeight, maxWidth, width } from './size'
 import type { Theme } from './types'
 import { preflightBase } from './preflight'
 
-export const theme: Theme = {
+export const theme = {
   width,
   height,
   maxWidth,
@@ -41,4 +41,4 @@ export const theme: Theme = {
   ringWidth,
   preflightBase,
   containers,
-}
+} satisfies Theme

packages/preset-mini/src/_theme/font.ts

@@ -35,7 +35,7 @@ export const fontFamily = {
     '"Courier New"',
     'monospace',
   ].join(','),
-}
+} satisfies Theme['fontFamily']
 
 export const fontSize: Theme['fontSize'] = {
   'xs': ['0.75rem', '1rem'],
@@ -51,7 +51,7 @@ export const fontSize: Theme['fontSize'] = {
   '7xl': ['4.5rem', '1'],
   '8xl': ['6rem', '1'],
   '9xl': ['8rem', '1'],
-}
+}satisfies Theme['fontSize']
 
 export const textIndent: Theme['textIndent'] = {
   'DEFAULT': '1.5rem',
@@ -62,41 +62,41 @@ export const textIndent: Theme['textIndent'] = {
   'xl': '2.5rem',
   '2xl': '3rem',
   '3xl': '4rem',
-}
+} satisfies Theme['textIndent']
 
 export const textStrokeWidth: Theme['textStrokeWidth'] = {
   DEFAULT: '1.5rem',
   none: '0',
   sm: 'thin',
   md: 'medium',
   lg: 'thick',
-}
+} satisfies Theme['textStrokeWidth']
 
-export const textShadow: Theme['textShadow'] = {
+export const textShadow = {
   DEFAULT: ['0 0 1px rgba(0,0,0,0.2)', '0 0 1px rgba(1,0,5,0.1)'],
   none: '0 0 rgba(0,0,0,0)',
   sm: '1px 1px 3px rgba(36,37,47,0.25)',
   md: ['0 1px 2px rgba(30,29,39,0.19)', '1px 2px 4px rgba(54,64,147,0.18)'],
   lg: ['3px 3px 6px rgba(0,0,0,0.26)', '0 0 5px rgba(15,3,86,0.22)'],
   xl: ['1px 1px 3px rgba(0,0,0,0.29)', '2px 4px 7px rgba(73,64,125,0.35)'],
-}
+} satisfies Theme['textShadow']
 
-export const lineHeight: Theme['lineHeight'] = {
+export const lineHeight = {
   none: '1',
   tight: '1.25',
   snug: '1.375',
   normal: '1.5',
   relaxed: '1.625',
   loose: '2',
-}
+} satisfies Theme['lineHeight']
 
-export const letterSpacing: Theme['letterSpacing'] = {
+export const letterSpacing = {
   tighter: '-0.05em',
   tight: '-0.025em',
   normal: '0em',
   wide: '0.025em',
   wider: '0.05em',
   widest: '0.1em',
-}
+} satisfies Theme['letterSpacing']
 
-export const wordSpacing: Theme['wordSpacing'] = letterSpacing
+export const wordSpacing = letterSpacing satisfies Theme['letterSpacing']

packages/preset-mini/src/_theme/misc.ts

@@ -1,18 +1,20 @@
+import type { Theme } from './types'
+
 // keep in ASC order: container.ts and breakpoints.ts need that order
 export const breakpoints = {
   'sm': '640px',
   'md': '768px',
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
-}
+} satisfies Theme['breakpoints']
 
-export const verticalBreakpoints = { ...breakpoints }
+export const verticalBreakpoints = { ...breakpoints } satisfies Theme['breakpoints']
 
 export const lineWidth = {
   DEFAULT: '1px',
   none: '0',
-}
+} satisfies Theme['lineWidth']
 
 export const spacing = {
   'DEFAULT': '1rem',
@@ -29,7 +31,7 @@ export const spacing = {
   '7xl': '4.5rem',
   '8xl': '6rem',
   '9xl': '8rem',
-}
+} satisfies Theme['spacing']
 
 export const duration = {
   DEFAULT: '150ms',
@@ -42,7 +44,7 @@ export const duration = {
   500: '500ms',
   700: '700ms',
   1000: '1000ms',
-}
+} satisfies Theme['duration']
 
 export const borderRadius = {
   'DEFAULT': '0.25rem',
@@ -54,7 +56,7 @@ export const borderRadius = {
   '2xl': '1rem',
   '3xl': '1.5rem',
   'full': '9999px',
-}
+} satisfies Theme['borderRadius']
 
 export const boxShadow = {
   'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'],
@@ -65,17 +67,17 @@ export const boxShadow = {
   'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'],
   '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)',
   'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',
-}
+} satisfies Theme['boxShadow']
 
 export const easing = {
   'DEFAULT': 'cubic-bezier(0.4, 0, 0.2, 1)',
   'linear': 'linear',
   'in': 'cubic-bezier(0.4, 0, 1, 1)',
   'out': 'cubic-bezier(0, 0, 0.2, 1)',
   'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-}
+} satisfies Theme['easing']
 
 export const ringWidth = {
   DEFAULT: '1px',
   none: '0',
-}
+} satisfies Theme['ringWidth']

packages/preset-mini/src/_theme/preflight.ts

@@ -1,7 +1,8 @@
 import { boxShadowsBase, ringBase, transformBase } from '../rules'
+import type { Theme } from './types'
 
 export const preflightBase = {
   ...transformBase,
   ...boxShadowsBase,
   ...ringBase,
-}
+} satisfies Theme['preflightBase']

packages/preset-mini/src/_theme/size.ts

@@ -1,3 +1,5 @@
+import type { Theme } from './types'
+
 export const baseSize = {
   'xs': '20rem',
   'sm': '24rem',
@@ -17,24 +19,24 @@ export const width = {
   auto: 'auto',
   ...baseSize,
   screen: '100vw',
-}
+} satisfies Theme['width']
 
 export const maxWidth = {
   none: 'none',
   ...baseSize,
   screen: '100vw',
-}
+} satisfies Theme['maxWidth']
 
 export const height = {
   auto: 'auto',
   ...baseSize,
   screen: '100vh',
-}
+} satisfies Theme['height']
 
 export const maxHeight = {
   none: 'none',
   ...baseSize,
   screen: '100vh',
-}
+} satisfies Theme['maxHeight']
 
-export const containers = Object.fromEntries(Object.entries(baseSize).map(([k, v]) => [k, `(min-width: ${v})`]))
+export const containers = Object.fromEntries(Object.entries(baseSize).map(([k, v]) => [k, `(min-width: ${v})`])) satisfies Theme['containers']