fix: indexof issue

Author: hexqi

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, parser } from '../../js/parser'
+import { stringify, getSelectorArr, buildCssObjectFromContent } from '../../js/parser'
 
 const { getSchema, propsUpdateKey, setProp } = useProperties()
 
@@ -448,29 +448,7 @@ watchEffect(() => {
 })
 
 const save = ({ content }) => {
-  const { parseList, styleObject } = parser(content)
-  const cssObject = {}
-
-  // 保证存入 cssObject 的键值顺序与编辑器中的源码字符顺序一致
-  parseList.forEach((item) => {
-    // parser 中的 handleRules 没有给普通 rule 赋 type 属性，只具备 selectors 和 style
-    if (!item.type && item.selectors) {
-      if (styleObject[item.selectors]) {
-        cssObject[item.selectors] = styleObject[item.selectors].rules
-      }
-    } else if (item.type === 'atrule') {
-      const rawValue = item.style?.value || ''
-      const braceIdx = rawValue.indexOf('{')
-      const key = braceIdx !== -1 ? rawValue.slice(0, braceIdx).trim() : rawValue.trim()
-      const value = braceIdx !== -1 ? rawValue.slice(braceIdx).trim() : ''
-
-      if (cssObject[key] !== undefined) {
-        cssObject[key] = Array.isArray(cssObject[key]) ? [...cssObject[key], value] : [cssObject[key], value]
-      } else {
-        cssObject[key] = value
-      }
-    }
-  })
+  const cssObject = buildCssObjectFromContent(content)
 
   const { addHistory } = useHistory()
   const { updateRect } = useCanvas().canvasApi.value

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

@@ -42,6 +42,7 @@ const handleAtRules = (node: any) => {
 
   return {
     type,
+    hasBlock: node.nodes !== undefined,
     style: {
       type,
       value: rawString
@@ -143,6 +144,47 @@ export const parser = (css: string) => {
   }
 }
 
+/**
+ * 根据编辑器 css 内容生成对象，保留源码顺序并支持 at-rule
+ * @param {string} content
+ * @returns {Record<string, any>}
+ */
+export const buildCssObjectFromContent = (content: string) => {
+  const { parseList, styleObject } = parser(content)
+  const cssObject = {}
+
+  // 保证存入 cssObject 的键值顺序与编辑器中的源码字符顺序一致
+  parseList.forEach((item) => {
+    // parser 中的 handleRules 没有给普通 rule 赋 type 属性，只具备 selectors 和 style
+    if (!item.type && item.selectors) {
+      if (styleObject[item.selectors]) {
+        cssObject[item.selectors] = styleObject[item.selectors].rules
+      }
+    } else if (item.type === 'atrule') {
+      const rawValue = item.style?.value || ''
+      let key = ''
+      let value = ''
+
+      if (item.hasBlock) {
+        const braceIdx = rawValue.indexOf('{')
+        key = braceIdx !== -1 ? rawValue.slice(0, braceIdx).trim() : rawValue.trim()
+        value = braceIdx !== -1 ? rawValue.slice(braceIdx).trim() : ''
+      } else {
+        key = rawValue.trim()
+        value = ''
+      }
+
+      if (cssObject[key] !== undefined) {
+        cssObject[key] = Array.isArray(cssObject[key]) ? [...cssObject[key], value] : [cssObject[key], value]
+      } else {
+        cssObject[key] = value
+      }
+    }
+  })
+
+  return cssObject
+}
+
 /**
  * 拿到组合选择器的数组，比如 .test1.test2 得到 ['.test1', '.test2']
  * @param {string} selector