fix: externalize css types by adding type annotations

Author: BobbieGoede

src/reactiveStyle.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { Reactive, Ref } from 'vue'
 import { reactive, ref, watch } from 'vue'
 import type { StyleProperties } from './types'
 import { getValueAsType, getValueType } from './utils/style'
@@ -8,13 +8,13 @@ import { getValueAsType, getValueType } from './utils/style'
  *
  * @param props
  */
-export function reactiveStyle(props: StyleProperties = {}) {
+export function reactiveStyle(props: StyleProperties = {}): { state: Reactive<StyleProperties>, style: Ref<StyleProperties> } {
   // Reactive StyleProperties object
   const state = reactive<StyleProperties>({
     ...props,
   })
 
-  const style = ref({}) as Ref<StyleProperties>
+  const style = ref<StyleProperties>({})
 
   // Reactive DOM Element compatible `style` object bound to state
   watch(

src/reactiveTransform.ts

@@ -1,5 +1,6 @@
 import { px } from 'style-value-types'
 import { reactive, ref, watch } from 'vue'
+import type { Reactive, Ref } from 'vue'
 import type { TransformProperties } from './types'
 import { getValueAsType, getValueType } from './utils/style'
 
@@ -18,7 +19,7 @@ const translateAlias: Record<string, string> = {
  * @param props
  * @param enableHardwareAcceleration
  */
-export function reactiveTransform(props: TransformProperties = {}, enableHardwareAcceleration = true) {
+export function reactiveTransform(props: TransformProperties = {}, enableHardwareAcceleration = true): { state: Reactive<TransformProperties>, transform: Ref<string> } {
   // Reactive TransformProperties object
   const state = reactive<TransformProperties>({ ...props })
 

src/types/variants.ts

@@ -48,7 +48,6 @@ export interface TransformProperties {
 /**
  * Relevant styling properties
  */
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 export type StyleProperties = Omit<CSSProperties, 'transition' | 'rotate' | 'scale' | 'perspective' | 'transform' | 'transformBox' | 'transformOrigin' | 'transformStyle'>
 
 /**

src/useElementStyle.ts

@@ -1,4 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
+import type { Reactive } from 'vue'
 import { watch } from 'vue'
 import { reactiveStyle } from './reactiveStyle'
 import type { MotionTarget, PermissiveTarget, StyleProperties } from './types'
@@ -11,7 +12,7 @@ import { isTransformOriginProp, isTransformProp } from './utils/transform'
  *
  * @param target
  */
-export function useElementStyle(target: MaybeRef<PermissiveTarget>, onInit?: (initData: Partial<StyleProperties>) => void) {
+export function useElementStyle(target: MaybeRef<PermissiveTarget>, onInit?: (initData: Partial<StyleProperties>) => void): { style: Reactive<StyleProperties> } {
   // Transform cache available before the element is mounted
   let _cache: StyleProperties | undefined
   // Local target cache as we need to resolve the element from PermissiveTarget

src/useElementTransform.ts

@@ -1,5 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
 import { watch } from 'vue'
+import type { Reactive } from 'vue'
 import { reactiveTransform } from './reactiveTransform'
 import type { MotionTarget, PermissiveTarget, TransformProperties } from './types'
 import { usePermissiveTarget } from './usePermissiveTarget'
@@ -10,7 +11,7 @@ import { stateFromTransform } from './utils/transform-parser'
  *
  * @param target
  */
-export function useElementTransform(target: MaybeRef<PermissiveTarget>, onInit?: (initData: Partial<TransformProperties>) => void) {
+export function useElementTransform(target: MaybeRef<PermissiveTarget>, onInit?: (initData: Partial<TransformProperties>) => void): { transform: Reactive<TransformProperties> } {
   // Transform cache available before the element is mounted
   let _cache: string | undefined
   // Local target cache as we need to resolve the element from PermissiveTarget

src/useMotionProperties.ts

@@ -1,6 +1,7 @@
 import type { MaybeRef } from '@vueuse/core'
 import { reactive, watch } from 'vue'
-import type { MotionProperties, PermissiveTarget } from './types'
+import type { Reactive } from 'vue'
+import type { MotionProperties, PermissiveTarget, StyleProperties, TransformProperties } from './types'
 import { useElementStyle } from './useElementStyle'
 import { useElementTransform } from './useElementTransform'
 import { usePermissiveTarget } from './usePermissiveTarget'
@@ -12,7 +13,7 @@ import { objectEntries } from './utils/type-feature'
  *
  * @param target
  */
-export function useMotionProperties(target: MaybeRef<PermissiveTarget>, defaultValues?: Partial<MotionProperties>) {
+export function useMotionProperties(target: MaybeRef<PermissiveTarget>, defaultValues?: Partial<MotionProperties>): { motionProperties: Reactive<MotionProperties>, style: Reactive<StyleProperties>, transform: Reactive<TransformProperties> } {
   // Local motion properties
   const motionProperties = reactive<MotionProperties>({})