Merge pull request #255 from BobbieGoede/fix/externalize-css-properties-types

fix: externalize `CSSProperties` types

Author: BobbieGoede

package.json

@@ -82,7 +82,6 @@
   "dependencies": {
     "@vueuse/core": "^13.0.0",
     "@vueuse/shared": "^13.0.0",
-    "csstype": "^3.1.3",
     "framesync": "^6.1.2",
     "popmotion": "^11.0.5",
     "style-value-types": "^5.1.2"
@@ -111,7 +110,7 @@
     "unbuild": "^3.5.0",
     "vite": "5.2.12",
     "vitest": "^1.6.0",
-    "vue": "^3.4.38",
+    "vue": "^3.5.13",
     "yorkie": "^2.0.0"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -1,5 +1,4 @@
-import type { Component } from '@nuxt/schema'
-import type { PropType } from 'vue'
+import type { Component, PropType } from 'vue'
 
 import { defineComponent, h, useSlots } from 'vue'
 import { variantToStyle } from '../utils/transform'

src/components/Motion.ts

@@ -1,5 +1,4 @@
-import type { PropType, VNode } from 'vue'
-import type { Component } from '@nuxt/schema'
+import type { Component, PropType, VNode } from 'vue'
 
 import { Fragment, defineComponent, h, useSlots } from 'vue'
 import { variantToStyle } from '../utils/transform'

src/components/MotionGroup.ts

@@ -8,13 +8,7 @@
     "moduleResolution": "Node",
 
     "resolveJsonModule": true,
-    "types": [
-      "node",
-      "csstype",
-      "vitest",
-      "vitest/globals",
-      "vite/client"
-    ],
+    "types": ["node", "vitest", "vitest/globals", "vite/client"],
     "allowJs": true,
     "strict": true,
     "noEmit": true,

src/nuxt/tsconfig.json

@@ -32,7 +32,7 @@ export const MotionPlugin = {
         const variants = options.directives[key] as MotionVariants<any>
 
         // Development warning, showing definitions missing `initial` key
-        if (!variants.initial && import.meta.dev) {
+        if (!variants.initial && import.meta.env.MODE === 'development') {
           console.warn(
             `Your directive v-motion-${key} is missing initial variant!`,
           )

src/plugin/index.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/reactiveStyle.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/reactiveTransform.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/types/variants.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/useElementStyle.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/useElementTransform.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>({})
 

src/useMotionProperties.ts

@@ -195,7 +195,7 @@ export function setupMotionComponent(
   })
 
   // Replay animations on component update Vue
-  if (import.meta.dev) {
+  if (import.meta.env.MODE === 'development') {
     // Validate passed preset
     if (
       props.preset != null

src/utils/component.ts

@@ -1,3 +1,3 @@
 export const CUSTOM_PRESETS = Symbol(
-  import.meta.dev ? 'motionCustomPresets' : '',
+  import.meta.env.MODE === 'development' ? 'motionCustomPresets' : '',
 )

src/utils/keys.ts

@@ -29,7 +29,7 @@
       "#components": [".nuxt/components"]
     },
     "resolveJsonModule": true,
-    "types": ["node", "csstype", "vitest", "vitest/globals", "vite/client"],
+    "types": ["node", "vitest/globals", "vite/client"],
     "allowJs": true,
     "strict": true,
     "noEmit": true,