Merge pull request #25 from vue-styled-components/feat/tailwindcss

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"
   }
 }