feat/schema-css-object

Author: betterdancing

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

@@ -4,7 +4,7 @@ import RenderMain from '../RenderMain'
 import { handleScopedCss } from './handle-scoped-css'
 import { utils } from '@opentiny/tiny-engine-utils'
 
-const { obJectCssToString } = utils
+const { objectCssToString } = utils
 const pageSchema: Record<string, any> = {}
 
 async function fetchPageSchema(pageId: string) {
@@ -34,7 +34,7 @@ export function initStyle(key: string, content: string | object) {
     document.head.appendChild(styleSheet)
   }
 
-  handleScopedCss(key, obJectCssToString(content)).then((scopedCss) => {
+  handleScopedCss(key, objectCssToString(content)).then((scopedCss) => {
     styleSheet.textContent = scopedCss.css
   })
 }

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

@@ -115,14 +115,14 @@ export interface MaterialsOptions {
 }
 
 const generateCssString = (pageOptions: PageOptions, materialsOptions: MaterialsOptions) => {
-  let cssObject: any = {}
+  let cssObject: Record<string, any> = {}
   const parseStyle = (styleString: string) => {
-    const styleObj: any = {}
+    const styleObj: Record<string, string> = {}
     const styleItems = styleString.split(';')
     styleItems.forEach((item: string) => {
       if (item) {
         const stylekeyValue = item.split(':')
-        styleObj[stylekeyValue[0]] = stylekeyValue[1].trim()
+        styleObj[stylekeyValue[0].trim()] = stylekeyValue[1].trim()
       }
     })
     return styleObj

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

@@ -109,7 +109,7 @@ import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-en
 import { LinkButton } from '@opentiny/tiny-engine-common'
 import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
-import { stringify, getSelectorArr } from '../../js/parser'
+import { stringify, getSelectorArr, parser } from '../../js/parser'
 
 const { getSchema, propsUpdateKey, setProp } = useProperties()
 
@@ -447,39 +447,17 @@ 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 = cssStringToObject(content)
+  const { styleObject } = parser(content)
+  const cssObject = {}
+  for (const styleKey in styleObject) {
+    cssObject[styleKey] = styleObject[styleKey].rules
+  }
   const { addHistory } = useHistory()
   const { updateRect } = useCanvas().canvasApi.value
   const { updateSchema } = useCanvas()
 
-  updateSchema({ css: cssString })
+  updateSchema({ css: cssObject })
   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, obJectCssToString } = utils
+const { generateRandomLetters, parseExpression, objectCssToString } = utils
 
 const state = reactive({
   // 当前选中节点的  style，解析成对象返回
@@ -177,7 +177,7 @@ export const initStylePanelWatch = () => {
   watch(
     () => useCanvas().getPageSchema?.()?.css,
     (value) => {
-      state.cssContent = obJectCssToString(value) || ''
+      state.cssContent = objectCssToString(value) || ''
 
       // 解析css
       const { parseList, selectors, styleObject } = parser(state.cssContent)

packages/utils/src/utils/index.ts

@@ -455,11 +455,11 @@ export const obj2StyleString = (obj: any) => {
 
 /**
  * JSON转样式字符串
- * @param {*} string
+ * @param {*} object
  * @returns
  */
 
-export const obJectCssToString = (css) => {
+export const objectCssToString = (css) => {
   if (typeof css === 'string') {
     return css
   }

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

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