feat: support use tailwind css(#17)

Author: akinoccc

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es2021": true,
+    "node": true
   },
   "extends": [
     "eslint:recommended",

packages/core/index.ts

@@ -1,15 +1,5 @@
-export { ThemeProvider, type DefaultTheme } from './src/providers/theme'
-export {
-  createGlobalStyle,
-  css,
-  cssClass,
-  withAttrs,
-  isTag,
-  isVueComponent,
-  isStyledComponent,
-  isValidElementType,
-  keyframes,
-} from './src/helper'
+export * from './src/providers/theme'
+export * from './src/helper'
 // export * from './hooks'
 
-export { styled as default, styled } from './src/styled'
+export * from './src/styled'

packages/core/src/helper/createGlobalStyle.ts

@@ -7,7 +7,9 @@ export const createGlobalStyle = (styles: TemplateStringsArray, ...expressions:
   return defineComponent(
     (_, { attrs }) => {
       const cssStringsWithExpression = insertExpressions(styles, expressions)
+
       injectStyle('', cssStringsWithExpression, attrs)
+
       return () => {
         return h('div', { style: 'display: none' })
       }

packages/core/src/helper/index.ts

@@ -4,3 +4,4 @@ export * from './createGlobalStyle'
 export * from './keyframes'
 export * from './css'
 export * from './cssClass'
+export * from './tw'

packages/core/src/helper/tw.ts

@@ -0,0 +1,10 @@
+export function tw(classNames: TemplateStringsArray, ...expressions: string[]): any {
+  return {
+    source: 'tw',
+    value: classNames[0]
+      ?.replace(/(\s|\\n)+/g, ' ')
+      .trim()
+      .split(' ')
+      .concat(expressions),
+  }
+}

packages/core/src/styled.ts

@@ -8,6 +8,7 @@ import {
   PropType,
   PublicProps,
   reactive,
+  ref,
   SlotsType,
   watch,
 } from 'vue'
@@ -65,14 +66,26 @@ function baseStyled<P extends Record<string, any>>(target: string | InstanceType
     const componentName = generateComponentName(type)
     return defineComponent(
       (props, { slots }) => {
-        const myAttrs = { ...attributes }
+        const tailwindClasses = ref<string[]>([])
+        const myAttrs = ref({ ...attributes })
         const theme = inject<Record<string, string | number>>('$theme', reactive({}))
         let context = {
           theme,
           ...props,
         }
 
-        myAttrs.class = generateClassName()
+        const defaultClassName = generateClassName()
+
+        myAttrs.value.class = defaultClassName
+
+        // Inject the tailwind classes to the class attribute
+        watch(
+          tailwindClasses,
+          (classNames) => {
+            myAttrs.value.class = `${defaultClassName} ${classNames.join(' ')}`
+          },
+          { deep: true },
+        )
 
         watch(
           [theme, props],
@@ -81,19 +94,19 @@ function baseStyled<P extends Record<string, any>>(target: string | InstanceType
               theme,
               ...props,
             }
-            injectStyle<T & { theme: DefaultTheme }>(myAttrs.class, cssWithExpression, context)
+            tailwindClasses.value = injectStyle<T & { theme: DefaultTheme }>(defaultClassName, cssWithExpression, context)
           },
           {
             deep: true,
           },
         )
 
         onMounted(() => {
-          injectStyle<T & { theme: DefaultTheme }>(myAttrs.class, cssWithExpression, context)
+          tailwindClasses.value = injectStyle<T & { theme: DefaultTheme }>(defaultClassName, cssWithExpression, context)
         })
 
         onUnmounted(() => {
-          removeStyle(myAttrs.class)
+          removeStyle(myAttrs.value.class)
         })
 
         // Return the render function
@@ -102,7 +115,7 @@ function baseStyled<P extends Record<string, any>>(target: string | InstanceType
           return h(
             node,
             {
-              ...myAttrs,
+              ...myAttrs.value,
             },
             slots,
           )

packages/core/src/utils/applyExpressions.ts

@@ -1,10 +1,24 @@
-export function applyExpressions(chunks: any[], executionContext: Record<string, any>): string[] {
+export function applyExpressions(chunks: any[], executionContext: Record<string, any>, tailwindClasses: string[]): string[] {
   return chunks.reduce((ruleSet, chunk) => {
-    if (chunk === undefined || chunk === null || chunk === false || chunk === '') return ruleSet
-    if (Array.isArray(chunk)) return [...ruleSet, ...applyExpressions(chunk, executionContext)]
+    if (chunk === undefined || chunk === null || chunk === false || chunk === '') {
+      return ruleSet
+    }
+
+    if (Array.isArray(chunk)) {
+      return [...ruleSet, ...applyExpressions(chunk, executionContext, tailwindClasses)]
+    }
+
     if (typeof chunk === 'function') {
-      return executionContext ? ruleSet.concat(...applyExpressions([chunk(executionContext)], executionContext)) : ruleSet.concat(chunk)
+      return executionContext
+        ? ruleSet.concat(...applyExpressions([chunk(executionContext)], executionContext, tailwindClasses))
+        : ruleSet.concat(chunk)
+    }
+
+    if (typeof chunk === 'object' && chunk?.source === 'tw') {
+      tailwindClasses.push(...chunk.value)
+      return ruleSet
     }
+
     return ruleSet.concat(chunk.toString())
   }, [])
 }

packages/core/src/utils/styleManagement.ts

@@ -26,7 +26,7 @@ function insert(className: string, cssString: string) {
 
   const ruleNode = insertedRuleMap[className]
   const rule = cssString
-
+  
   if (ruleNode) {
     ruleNode.data = rule
     return
@@ -47,12 +47,15 @@ export function removeStyle(className: string): void {
   }
 }
 
-export function injectStyle<T>(className: string, cssWithExpression: ExpressionType<T>[], context: Record<string, any>): void {
-  const appliedCss = applyExpressions(cssWithExpression, context).join('')
+export function injectStyle<T>(className: string, cssWithExpression: ExpressionType<T>[], context: Record<string, any>): string[] {
+  const tailwindClasses: string[] = []
+  const appliedCss = applyExpressions(cssWithExpression, context, tailwindClasses).join('')
   let cssString = appliedCss
   if (className !== '') {
     cssString = `.${className}{${appliedCss}}`
   }
   const compiledCss = serialize(compile(cssString), middleware([prefixer, stringify]))
   insert(className, compiledCss)
+
+  return tailwindClasses
 }

packages/playground/index.html

@@ -7,6 +7,6 @@
 </head>
 <body>
 <div id="app"></div>
-<script type="module" src="main.ts"></script>
+<script type="module" src="src/main.ts"></script>
 </body>
 </html>

packages/playground/package.json

@@ -5,5 +5,10 @@
   },
   "dependencies": {
     "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10"
   }
 }

packages/playground/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/playground/App.vue renamed to packages/playground/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass, createGlobalStyle } from '@vue-styled-components/core'
+import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass, createGlobalStyle, tw } from '@/index'
 import Component from './Component.vue'
 import { ref } from 'vue'
 
@@ -126,13 +126,18 @@ const Global = createGlobalStyle`
     display: flex
   }
 `
+const tt = 'bg-white'
+const TwComponent = styled.div`
+  ${tw`text-2xl text-gray-100 text-lg ${tt}`}
+`
 </script>
 
 <template>
   <ThemeProvider :theme="theme">
+    <TwComponent>Test</TwComponent>
     <Global />
     <div @click="visible = !visible">Test Remove</div>
-    <StyledComp3 @click="update">12345</StyledComp3>
+    <StyledComp3 class="text-white" @click="update">12345</StyledComp3>
     <StyledComp4>12345</StyledComp4>
     <StyledComp5>12345</StyledComp5>
     <WithAttrsComp color="red">123</WithAttrsComp>
@@ -144,8 +149,6 @@ const Global = createGlobalStyle`
     <TestEmbedComponent :show="show"> White </TestEmbedComponent>
     <TestEmbedComponent :show="!show" @click="show = !show"> Blue </TestEmbedComponent>
 
-    <IconInner color="red" size="55"> 666 </IconInner>
-
     <BlueButton v-if="visible" />
   </ThemeProvider>
 </template>

packages/playground/Component.vue renamed to packages/playground/src/Component.vue

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './style.css'
 
 const app = createApp(App)
 

packages/playground/main.ts renamed to packages/playground/src/main.ts

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/playground/src/style.css

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}