feat(provider): [theme] add support for extending and implementing theme typedef

Author: akinoccc

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: pnpm release
 
-  sync:
+  sync-beta:
     runs-on: ubuntu-latest
     needs: release
     if: startsWith(github.ref, 'refs/heads/beta')
@@ -64,4 +64,22 @@ jobs:
         run: |
           git checkout main
           git pull --rebase origin beta
+          git push -f
+
+  sync-alpha:
+    runs-on: ubuntu-latest
+    needs: release
+    if: startsWith(github.ref, 'refs/heads/alpha')
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Sync
+        env:
+          ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git checkout main
+          git pull --rebase origin alpha
           git push -f

packages/core/package.json

@@ -5,7 +5,7 @@
   "files": [
     "dist/*"
   ],
-  "main": "./dist/index.umd.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": {

packages/core/src/providers/theme.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
 
-export type DefaultTheme = Record<string, any>
+export interface DefaultTheme {
+  [key: string]: any
+}
 
 export const ThemeProvider = defineComponent(
   (props, { slots }) => {

packages/core/src/styled.ts

@@ -14,6 +14,7 @@ import {
 import domElements, { type SupportedHTMLElements } from '@/src/constants/domElements'
 import { type ExpressionType, generateClassName, generateComponentName, insertExpressions, injectStyle, removeStyle } from '@/src/utils'
 import { isStyledComponent, isValidElementType, isVueComponent } from '@/src/helper'
+import { DefaultTheme } from './providers'
 
 interface IProps {
   as?: PropType<SupportedHTMLElements>
@@ -27,7 +28,7 @@ export type StyledComponentType<P = any> = DefineSetupFnComponent<IProps & P, an
 
 type StyledFactory = <T = Record<string, any>>(
   styles: TemplateStringsArray,
-  ...expressions: (ExpressionType<T> | ExpressionType<T>[])[]
+  ...expressions: (ExpressionType<T & { theme: DefaultTheme }> | ExpressionType<T & { theme: DefaultTheme }>[])[]
 ) => StyledComponentType
 type StyledComponent = StyledFactory & {
   attrs: <T extends Record<string, unknown>>(attrs: T) => StyledFactory
@@ -52,7 +53,7 @@ function baseStyled<P extends Record<string, any>>(target: string | InstanceType
     return styledComponent
   }
 
-  function createStyledComponent<T>(cssWithExpression: ExpressionType<T>[]): StyledComponentType {
+  function createStyledComponent<T>(cssWithExpression: ExpressionType<T & { theme: DefaultTheme }>[]): StyledComponentType {
     let type: string = target
     if (isVueComponent(target)) {
       type = 'vue-component'
@@ -80,15 +81,15 @@ function baseStyled<P extends Record<string, any>>(target: string | InstanceType
               theme: theme?.value ?? {},
               ...props,
             }
-            injectStyle<T>(myAttrs.class, cssWithExpression, context)
+            injectStyle<T & { theme: DefaultTheme }>(myAttrs.class, cssWithExpression, context)
           },
           {
             deep: true,
           },
         )
 
         onMounted(() => {
-          injectStyle<T>(myAttrs.class, cssWithExpression, context)
+          injectStyle<T & { theme: DefaultTheme }>(myAttrs.class, cssWithExpression, context)
         })
 
         onUnmounted(() => {

packages/core/vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
   },
   plugins: [
     dts({
-      include: ['index.ts', './src/**.ts'],
+      include: ['index.ts', './src/**/*.ts'],
       exclude: ['__test__'],
     }),
   ],

packages/playground/theme.d.ts

@@ -0,0 +1,5 @@
+// declare module '@vue-styled-components/core' {
+//   export interface DefaultTheme extends ThemeType {
+//     primary: 'blue'
+//   }
+// }