Feat/schema css object: The style class is presented as an object in the page schema.

packages/canvas/render/src/RenderMain.ts

@@ -172,7 +172,8 @@ export default defineComponent({
         () => activeSchema.css,
         (value) => {
           setPageCss(value)
-        }
+        },
+        { deep: true }
       )
 
       const utilsWatchCanceler = window.host.watch(

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

@@ -2,7 +2,9 @@ import { defineComponent, h, ref, onMounted } from 'vue'
 import { getController } from '../canvas-function'
 import RenderMain from '../RenderMain'
 import { handleScopedCss } from './handle-scoped-css'
+import { utils } from '@opentiny/tiny-engine-utils'
 
+const { obJectCssToString } = utils
 const pageSchema: Record<string, any> = {}
 
 async function fetchPageSchema(pageId: string) {
@@ -16,7 +18,7 @@ async function fetchPageSchema(pageId: string) {
 // 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) {
+export function initStyle(key: string, content: string | object) {
   if (!content) {
     return
   }
@@ -32,7 +34,7 @@ export function initStyle(key: string, content: string) {
     document.head.appendChild(styleSheet)
   }
 
-  handleScopedCss(key, content).then((scopedCss) => {
+  handleScopedCss(key, obJectCssToString(content)).then((scopedCss) => {
     styleSheet.textContent = scopedCss.css
   })
 }

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

@@ -115,22 +115,31 @@ export interface MaterialsOptions {
 }
 
 const generateCssString = (pageOptions: PageOptions, materialsOptions: MaterialsOptions) => {
-  if (!pageOptions?.pageBaseStyle?.className || !pageOptions?.pageBaseStyle?.style) {
-    return ''
+  let cssObject: any = {}
+  const parseStyle = (styleString: string) => {
+    const styleObj: any = {}
+    const styleItems = styleString.split(';')
+    styleItems.forEach((item: string) => {
+      if (item) {
+        const stylekeyValue = item.split(':')
+        styleObj[stylekeyValue[0]] = stylekeyValue[1].trim()
+      }
+    })
+    return styleObj
+  }
+  if (pageOptions?.pageBaseStyle?.className && pageOptions?.pageBaseStyle?.style) {
+    cssObject[`.${pageOptions.pageBaseStyle.className}`] = parseStyle(pageOptions.pageBaseStyle.style)
   }
 
-  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
+  if (materialsOptions.useBaseStyle) {
+    cssObject = {
+      ...cssObject,
+      [`.${materialsOptions.blockBaseStyle.className}`]: parseStyle(materialsOptions.blockBaseStyle.style),
+      [`.${materialsOptions.componentBaseStyle.className}`]: parseStyle(materialsOptions.componentBaseStyle.style)
+    }
   }
 
-  return [
-    formatCssRule(pageOptions.pageBaseStyle.className, pageOptions.pageBaseStyle.style),
-    formatCssRule(materialsOptions.blockBaseStyle.className, materialsOptions.blockBaseStyle.style),
-    formatCssRule(materialsOptions.componentBaseStyle.className, materialsOptions.componentBaseStyle.style)
-  ].join('\n')
+  return cssObject
 }
 
 const getDefaultPage = () => {

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

@@ -108,7 +108,6 @@ import { Select as TinySelect } from '@opentiny/vue'
 import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-meta-register'
 import { LinkButton } from '@opentiny/tiny-engine-common'
 import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
-import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr } from '../../js/parser'
 
@@ -448,15 +447,40 @@ watchEffect(() => {
   selectorValidator(classNameState.newSelector)
 })
 
+const cssStringToObject = (cssString) => {
+  cssString = cssString.replace(/\s+/g, ' ').trim()
+  const result = {}
+  const regex = /([^{]+)\{([^}]+)\}/g
+
+  let match
+  while ((match = regex.exec(cssString)) !== null) {
+    const selector = match[1].trim()
+    const properties = match[2].trim()
+
+    const propertiesObj = {}
+
+    const propertyRegex = /([^{;]+):([^;]+)/g
+    let propertyMatch
+
+    while ((propertyMatch = propertyRegex.exec(properties)) !== null) {
+      const key = propertyMatch[1].trim()
+      const value = propertyMatch[2].trim()
+      propertiesObj[key] = value
+    }
+
+    result[selector] = propertiesObj
+  }
+  return result
+}
+
 const save = ({ content }) => {
-  const cssString = formatString(content.replace(/"/g, "'"), 'css')
+  const cssString = cssStringToObject(content)
   const { addHistory } = useHistory()
   const { updateRect } = useCanvas().canvasApi.value
   const { updateSchema } = useCanvas()
 
   updateSchema({ css: cssString })
   state.schemaUpdateKey++
-
   addHistory()
   updateRect()
 }

packages/settings/styles/src/js/useStyle.ts

@@ -18,7 +18,7 @@ import { constants, utils } from '@opentiny/tiny-engine-utils'
 import { parser, stringify, getSelectorArr } from './parser'
 
 const { EXPRESSION_TYPE } = constants
-const { generateRandomLetters, parseExpression } = utils
+const { generateRandomLetters, parseExpression, obJectCssToString } = utils
 
 const state = reactive({
   // 当前选中节点的  style，解析成对象返回
@@ -177,10 +177,10 @@ export const initStylePanelWatch = () => {
   watch(
     () => useCanvas().getPageSchema?.()?.css,
     (value) => {
-      state.cssContent = value || ''
+      state.cssContent = obJectCssToString(value) || ''
 
       // 解析css
-      const { parseList, selectors, styleObject } = parser(value)
+      const { parseList, selectors, styleObject } = parser(state.cssContent)
 
       state.cssParseList = parseList
       state.selectors = selectors

packages/utils/src/utils/index.ts

@@ -452,3 +452,29 @@ export const obj2StyleString = (obj: any) => {
       .join('; ')
   )
 }
+
+/**
+ * JSON转样式字符串
+ * @param {*} string
+ * @returns
+ */
+
+export const obJectCssToString = (css) => {
+  if (typeof css === 'string') {
+    return css
+  }
+  let cssString = ''
+
+  for (const selector in css) {
+    const properties = css[selector]
+    let ruleString = `${selector} {\r\n`
+
+    for (const property in properties) {
+      ruleString += ` ${property}: ${properties[property]};\r\n`
+    }
+
+    ruleString += '}\n'
+    cssString += ruleString
+  }
+  return cssString
+}

packages/vue-generator/package.json

@@ -32,6 +32,7 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/shared": "^3.3.4",
     "vue": "^3.4.15",

packages/vue-generator/src/generator/vue/sfc/generateStyle.js

@@ -1,3 +1,6 @@
+import { utils } from '@opentiny/tiny-engine-utils'
+
+const { obJectCssToString } = utils
 export const generateStyleTag = (schema, config = {}) => {
   const { css } = schema
   const { scoped = true, lang = '' } = config
@@ -12,6 +15,6 @@ export const generateStyleTag = (schema, config = {}) => {
   if (lang) {
     langDesc = `lang=${langDesc}`
   }
-
-  return `<style ${langDesc} ${scopedStr}> ${css || ''} </style>`
+  const cssString = obJectCssToString(css)
+  return `<style ${langDesc} ${scopedStr}> ${cssString || ''} </style>`
 }