fix: add flag to fix css issue (#1784)

designer-demo/engine.config.js

@@ -5,5 +5,7 @@ export default {
   scripts: [],
   styles: [],
   // 是否开启 TailWindCSS 特性
-  enableTailwindCSS: true
+  enableTailwindCSS: true,
+  // 是否开启 使用结构化CSS 特性
+  enableStructuredCss: false
 }

packages/plugins/page/src/composable/usePage.ts

@@ -22,6 +22,7 @@ import {
   useModal,
   useNotify,
   getMetaApi,
+  getMergeMeta,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import http from '../http'
@@ -115,6 +116,27 @@ export interface MaterialsOptions {
 }
 
 const generateCssString = (pageOptions: PageOptions, materialsOptions: MaterialsOptions) => {
+  const enableStructuredCss = getMergeMeta('engine.config')?.enableStructuredCss
+
+  if (!enableStructuredCss) {
+    if (!pageOptions?.pageBaseStyle?.className || !pageOptions?.pageBaseStyle?.style) {
+      return ''
+    }
+
+    const formatCssRule = (className: string, style: string) => `.${className} {\n  ${style.trim()}\n}\n`
+    const baseStyle = `.${pageOptions.pageBaseStyle.className}{\r\n ${pageOptions.pageBaseStyle.style}\r\n}\r\n`
+
+    if (!materialsOptions.useBaseStyle) {
+      return baseStyle
+    }
+
+    return [
+      formatCssRule(pageOptions.pageBaseStyle.className, pageOptions.pageBaseStyle.style),
+      formatCssRule(materialsOptions.blockBaseStyle.className, materialsOptions.blockBaseStyle.style),
+      formatCssRule(materialsOptions.componentBaseStyle.className, materialsOptions.componentBaseStyle.style)
+    ].join('\n')
+  }
+
   let cssObject: Record<string, any> = {}
   const parseStyle = (styleString: string) => {
     const styleObj: Record<string, string> = {}

packages/settings/styles/src/components/classNamesContainer/index.vue

@@ -105,8 +105,9 @@
 /* metaService: engine.setting.styles.ClassNamesContainer-index */
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
-import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useCanvas, useHistory, useHelp, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { LinkButton } from '@opentiny/tiny-engine-common'
+import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr, parser } from '../../js/parser'
@@ -448,16 +449,25 @@ watchEffect(() => {
 })
 
 const save = ({ content }) => {
-  const { styleObject } = parser(content)
-  const cssObject = {}
-  Object.keys(styleObject).forEach((styleKey) => {
-    cssObject[styleKey] = styleObject[styleKey].rules
-  })
+  const enableStructuredCss = getMergeMeta('engine.config')?.enableStructuredCss
+  let cssData = null
+
+  if (enableStructuredCss) {
+    const { styleObject } = parser(content)
+    const cssObject = {}
+    Object.keys(styleObject).forEach((styleKey) => {
+      cssObject[styleKey] = styleObject[styleKey].rules
+    })
+    cssData = cssObject
+  } else {
+    cssData = formatString(content.replace(/"/g, "'"), 'css')
+  }
+
   const { addHistory } = useHistory()
   const { updateRect } = useCanvas().canvasApi.value
   const { updateSchema } = useCanvas()
 
-  updateSchema({ css: cssObject })
+  updateSchema({ css: cssData })
   state.schemaUpdateKey++
   addHistory()
   updateRect()