Fix type connection issue

.changeset/early-walls-roll.md

@@ -0,0 +1,11 @@
+---
+'@devup-ui/rsbuild-plugin': patch
+'@devup-ui/webpack-plugin': patch
+'@devup-ui/next-plugin': patch
+'@devup-ui/vite-plugin': patch
+'@devup-ui/components': patch
+'@devup-ui/reset-css': patch
+'@devup-ui/react': patch
+---
+
+Update css typing

packages/components/package.json

@@ -43,7 +43,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@devup-ui/react": "workspace:*",
-    "csstype": "^3.1.3",
+    "csstype-extra": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "clsx": "^2.1"
@@ -64,7 +64,7 @@
   },
   "peerDependencies": {
     "@devup-ui/react": "workspace:*",
-    "csstype": "*",
+    "csstype-extra": "*",
     "react": "*"
   }
 }

packages/next-plugin/src/plugin.ts

@@ -68,7 +68,7 @@ export function DevupUI(
     registerTheme(theme)
     const themeInterface = getThemeInterface(
       libPackage,
-      'DevupThemeColors',
+      'CustomColors',
       'DevupThemeTypography',
       'DevupTheme',
     )

packages/react/package.json

@@ -40,7 +40,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "react": "^19.2",
-    "csstype": "latest"
+    "csstype-extra": "latest"
   },
   "devDependencies": {
     "rollup-plugin-preserve-directives": "^0.4",
@@ -52,6 +52,6 @@
   },
   "peerDependencies": {
     "react": "*",
-    "csstype": "*"
+    "csstype-extra": "*"
   }
 }

packages/react/src/index.ts

@@ -10,7 +10,7 @@ export { ThemeScript } from './components/ThemeScript'
 export { VStack } from './components/VStack'
 export { useTheme } from './hooks/use-theme'
 export type { DevupProps } from './types/props'
-export type { DevupTheme, DevupThemeColors } from './types/theme'
+export type { DevupTheme } from './types/theme'
 export type {
   DevupThemeTypography,
   DevupThemeTypographyKeys,
@@ -21,3 +21,4 @@ export { globalCss } from './utils/global-css'
 export { initTheme } from './utils/init-theme'
 export { keyframes } from './utils/keyframes'
 export { setTheme } from './utils/set-theme'
+export type { CustomColors } from 'csstype-extra'

packages/react/src/types/props/__tests__/index.test-d.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype'
+import { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../../responsive-value'
 import type {

packages/react/src/types/props/background.ts

@@ -1,18 +1,12 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
-import type { DevupThemeColors } from '../theme'
 
 export interface DevupUiBackgroundProps {
-  bg?: ResponsiveValue<Property.Background | keyof DevupThemeColors>
+  bg?: ResponsiveValue<Property.Background>
   bgAttachment?: ResponsiveValue<Property.BackgroundAttachment>
   bgClip?: ResponsiveValue<Property.BackgroundClip>
-  bgColor?: ResponsiveValue<Property.BackgroundColor | keyof DevupThemeColors>
-  color?: ResponsiveValue<Property.Color | keyof DevupThemeColors>
-  background?: ResponsiveValue<Property.Background | keyof DevupThemeColors>
-  backgroundColor?: ResponsiveValue<
-    Property.BackgroundColor | keyof DevupThemeColors
-  >
+  bgColor?: ResponsiveValue<Property.BackgroundColor>
   bgImage?: ResponsiveValue<Property.BackgroundImage>
   bgOrigin?: ResponsiveValue<Property.BackgroundOrigin>
   bgPosition?: ResponsiveValue<Property.BackgroundPosition>

packages/react/src/types/props/border.ts

@@ -1,60 +1,18 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
-import type { DevupThemeColors } from '../theme'
 
 export interface DevupUiBorderProps {
-  border?: ResponsiveValue<Property.Border>
-  borderBottom?: ResponsiveValue<Property.BorderBottom>
-  borderBottomColor?: ResponsiveValue<
-    Property.BorderBottomColor | keyof DevupThemeColors
-  >
-  borderBottomLeftRadius?: ResponsiveValue<Property.BorderBottomLeftRadius>
-  borderBottomRightRadius?: ResponsiveValue<Property.BorderBottomRightRadius>
   borderBottomRadius?: ResponsiveValue<
     Property.BorderBottomRightRadius | Property.BorderBottomLeftRadius
   >
-  borderBottomStyle?: ResponsiveValue<Property.BorderBottomStyle>
-  borderBottomWidth?: ResponsiveValue<Property.BorderBottomWidth>
-  borderCollapse?: ResponsiveValue<Property.BorderCollapse>
-  borderColor?: ResponsiveValue<Property.BorderColor | keyof DevupThemeColors>
-  borderImage?: ResponsiveValue<Property.BorderImage>
-  borderImageOutset?: ResponsiveValue<Property.BorderImageOutset>
-  borderImageRepeat?: ResponsiveValue<Property.BorderImageRepeat>
-  borderImageSlice?: ResponsiveValue<Property.BorderImageSlice>
-  borderImageSource?: ResponsiveValue<Property.BorderImageSource>
-  borderImageWidth?: ResponsiveValue<Property.BorderImageWidth>
-  borderLeft?: ResponsiveValue<Property.BorderLeft>
-  borderLeftColor?: ResponsiveValue<
-    Property.BorderLeftColor | keyof DevupThemeColors
-  >
   borderLeftRadius?: ResponsiveValue<
     Property.BorderBottomLeftRadius | Property.BorderTopLeftRadius
   >
-  borderLeftStyle?: ResponsiveValue<Property.BorderLeftStyle>
-  borderLeftWidth?: ResponsiveValue<Property.BorderLeftWidth>
-  borderRadius?: ResponsiveValue<Property.BorderRadius>
-  borderRight?: ResponsiveValue<Property.BorderRight>
-  borderRightColor?: ResponsiveValue<
-    Property.BorderRightColor | keyof DevupThemeColors
-  >
   borderRightRadius?: ResponsiveValue<
     Property.BorderBottomRightRadius | Property.BorderTopRightRadius
   >
-  borderRightStyle?: ResponsiveValue<Property.BorderRightStyle>
-  borderRightWidth?: ResponsiveValue<Property.BorderRightWidth>
-  borderStyle?: ResponsiveValue<Property.BorderStyle>
-  borderTop?: ResponsiveValue<Property.BorderTop>
-  borderTopColor?: ResponsiveValue<
-    Property.BorderTopColor | keyof DevupThemeColors
-  >
-  borderTopLeftRadius?: ResponsiveValue<Property.BorderTopLeftRadius>
-  borderTopRightRadius?: ResponsiveValue<Property.BorderTopRightRadius>
   borderTopRadius?: ResponsiveValue<
     Property.BorderTopRightRadius | Property.BorderTopLeftRadius
   >
-  borderTopStyle?: ResponsiveValue<Property.BorderTopStyle>
-  borderTopWidth?: ResponsiveValue<Property.BorderTopWidth>
-  borderWidth?: ResponsiveValue<Property.BorderWidth>
-  boxShadow?: ResponsiveValue<Property.BoxShadow>
 }

packages/react/src/types/props/box-model.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/box-sizing.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/flex.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/image.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/index.ts

@@ -1,4 +1,4 @@
-import type { Properties } from 'csstype'
+import type { Properties } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 import type { Merge } from '../utils'

packages/react/src/types/props/mask.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/motion-path.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/position.ts

@@ -1,4 +1,4 @@
-import type { Property } from 'csstype'
+import type { Property } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/props/selector/index.ts

@@ -1,4 +1,4 @@
-import type { AdvancedPseudos, SimplePseudos } from 'csstype'
+import type { AdvancedPseudos, SimplePseudos } from 'csstype-extra'
 
 import type { ResponsiveValue } from '../../responsive-value'
 import type { DevupTheme } from '../../theme'

packages/react/src/types/props/vendor.ts

@@ -1,7 +1,7 @@
 import type {
   VendorLonghandProperties,
   VendorShorthandProperties,
-} from 'csstype'
+} from 'csstype-extra'
 
 import type { ResponsiveValue } from '../responsive-value'
 

packages/react/src/types/theme.ts

@@ -1,5 +1,2 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-export interface DevupThemeColors {}
-
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 export interface DevupTheme {}

packages/reset-css/src/index.ts

@@ -13,10 +13,9 @@ globalCss({
     cursor: 'default',
     lineHeight: 1.5,
     overflowWrap: 'break-word',
-    MozTabSize: 4,
     tabSize: 4,
     WebkitTapHighlightColor: 'transparent',
-    WebkitTextSizeAdjust: '100%',
+    textSizeAdjust: '100%',
   },
   ':where(body)': {
     m: 0,
@@ -47,8 +46,8 @@ globalCss({
   },
   ':where(abbr[title])': {
     textDecoration: 'underline dotted',
-    WebkitTextDecorationStyle: 'dotted',
-    WebkitTextDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationLine: 'underline',
   },
   ':where(b,strong)': {
     fontWeight: 'bolder',

packages/rsbuild-plugin/src/__tests__/plugin.test.ts

@@ -319,7 +319,7 @@ const App = () => <Box></Box>`,
       expect(registerTheme).toHaveBeenCalledWith({})
       expect(getThemeInterface).toHaveBeenCalledWith(
         '@devup-ui/react',
-        'DevupThemeColors',
+        'CustomColors',
         'DevupThemeTypography',
         'DevupTheme',
       )

packages/rsbuild-plugin/src/plugin.ts

@@ -40,7 +40,7 @@ async function writeDataFiles(
       registerTheme(JSON.parse(content)?.['theme'] ?? {})
       const interfaceCode = getThemeInterface(
         options.package,
-        'DevupThemeColors',
+        'CustomColors',
         'DevupThemeTypography',
         'DevupTheme',
       )

packages/vite-plugin/src/__tests__/plugin.test.ts

@@ -109,7 +109,7 @@ describe('devupUIVitePlugin', () => {
       expect(registerTheme).toHaveBeenCalledWith({})
       expect(getThemeInterface).toHaveBeenCalledWith(
         '@devup-ui/react',
-        'DevupThemeColors',
+        'CustomColors',
         'DevupThemeTypography',
         'DevupTheme',
       )

packages/vite-plugin/src/plugin.ts

@@ -40,7 +40,7 @@ async function writeDataFiles(
       registerTheme(JSON.parse(content)?.['theme'] ?? {})
       const interfaceCode = getThemeInterface(
         options.package,
-        'DevupThemeColors',
+        'CustomColors',
         'DevupThemeTypography',
         'DevupTheme',
       )

packages/webpack-plugin/src/__tests__/plugin.test.ts

@@ -111,7 +111,7 @@ describe('devupUIWebpackPlugin', () => {
         )
         expect(getThemeInterface).toHaveBeenCalledWith(
           options.package,
-          'DevupThemeColors',
+          'CustomColors',
           'DevupThemeTypography',
           'DevupTheme',
         )

packages/webpack-plugin/src/plugin.ts

@@ -68,7 +68,7 @@ export class DevupUIWebpackPlugin {
         registerTheme(JSON.parse(content)?.['theme'] ?? {})
         const interfaceCode = getThemeInterface(
           this.options.package,
-          'DevupThemeColors',
+          'CustomColors',
           'DevupThemeTypography',
           'DevupTheme',
         )