feat: support tailwindcss function and directives feature (opentiny#1653)

Author: chilingling

packages/build/vite-config/src/default-config.js

@@ -89,6 +89,9 @@ const getDefaultConfig = (engineConfig) => {
         ]
       }
     },
+    define: {
+      'process.env': {}
+    },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true,

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -290,7 +290,8 @@ export default {
         getBlockByName: useMaterial().getBlockByName,
         useModal,
         useMessage,
-        useNotify
+        useNotify,
+        enableTailwindCSS: getMergeMeta('engine.config')?.enableTailwindCSS
       },
       isBlock,
       getMoveDragBarState,

packages/canvas/render/src/material-function/page-getter.ts

@@ -12,21 +12,31 @@ async function fetchPageSchema(pageId: string) {
       return res.page_content
     })
 }
-const styleSheetMap = new Map()
+
+// tailwindcss function and directive 特性需要使用 <style type="text/tailwindcss"> 标签
+// https://tailwindcss.com/docs/functions-and-directives
+// 所以原来 new CSSStyleSheet 的方式改成了 document.createElement('style') 的方式
 export function initStyle(key: string, content: string) {
   if (!content) {
     return
   }
-  let styleSheet = styleSheetMap.get(key)
+
+  let styleSheet = document.querySelector(`#${key}`)
+
   if (!styleSheet) {
-    styleSheet = new CSSStyleSheet()
-    styleSheetMap.set(key, styleSheet)
-    document.adoptedStyleSheets.push(styleSheet)
+    styleSheet = document.createElement('style')
+    styleSheet.setAttribute('id', key)
+    if (getController().enableTailwindCSS) {
+      styleSheet.setAttribute('type', 'text/tailwindcss')
+    }
+    document.head.appendChild(styleSheet)
   }
+
   handleScopedCss(key, content).then((scopedCss) => {
-    styleSheet.replaceSync(scopedCss)
+    styleSheet.textContent = scopedCss.css
   })
 }
+
 export const wrapPageComponent = (pageId: string) => {
   const key = `data-te-page-${pageId}`
   const asyncData = ref(null)

packages/design-core/src/preview/src/preview/generate.js

@@ -163,6 +163,7 @@ export const processAppJsCode = (code, cssList, enableTailwindCSS) => {
 
   if (enableTailwindCSS && !code.includes('@tailwindcss/browser')) {
     res += `\nimport('@tailwindcss/browser')\n`
+    res += `\nenableTailwindCSS()\n`
   }
 
   return res

packages/design-core/src/preview/src/preview/srcFiles/app.js

@@ -18,3 +18,38 @@ function addCss(href) {
 }
 addCss('${VITE_CDN_DOMAIN}/@opentiny/vue-theme${versionDelimiter}3.20${fileDelimiter}/index.css')
 addCss('${VITE_CDN_DOMAIN}/@opentiny/vue-theme-mobile${versionDelimiter}3.20${fileDelimiter}/index.css')
+
+// tailwindcss function and directive 特性需要使用 <style type="text/tailwindcss"> 标签
+// https://tailwindcss.com/docs/functions-and-directives
+// vue-repl 默认是使用 style[css] 标签，我们需要将它转换为 <style type="text/tailwindcss"> 标签
+// 并重新插入一遍使得 tailwindcss 识别并生效
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function enableTailwindCSS(tryCount = 0) {
+  if (tryCount > 100) {
+    return
+  }
+
+  while (!document.querySelectorAll('style[css]').length) {
+    await new Promise((resolve) => setTimeout(resolve, 200))
+    enableTailwindCSS(tryCount + 1)
+    return
+  }
+
+  const allStyles = document.querySelectorAll('style[css]')
+  allStyles.forEach((el) => {
+    const content = el.innerHTML
+    const attributes = {}
+    Array.from(el.attributes).forEach((attr) => {
+      attributes[attr.name] = attr.value
+    })
+
+    el.remove()
+
+    attributes.type = 'text/tailwindcss'
+    const attributeText = Object.entries(attributes)
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(' ')
+
+    document.head.insertAdjacentHTML('beforeend', `<style ${attributeText}>${content}</style>`)
+  })
+}