fix: page css miss atrule style

Author: hexqi

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

@@ -448,11 +448,30 @@ watchEffect(() => {
 })
 
 const save = ({ content }) => {
-  const { styleObject } = parser(content)
+  const { parseList, styleObject } = parser(content)
   const cssObject = {}
-  Object.keys(styleObject).forEach((styleKey) => {
-    cssObject[styleKey] = styleObject[styleKey].rules
+
+  // 保证存入 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 { addHistory } = useHistory()
   const { updateRect } = useCanvas().canvasApi.value
   const { updateSchema } = useCanvas()

packages/utils/src/utils/index.ts

@@ -464,9 +464,27 @@ export const objectCssToString = (css) => {
     return css
   }
   let cssString = ''
+  let topString = ''
 
   for (const selector in css) {
     const properties = css[selector]
+
+    if (typeof properties === 'string' || (Array.isArray(properties) && typeof properties[0] === 'string')) {
+      const isTopRule =
+        selector.startsWith('@charset') || selector.startsWith('@import') || selector.startsWith('@namespace')
+      const propsArray = Array.isArray(properties) ? properties : [properties]
+
+      propsArray.forEach((prop) => {
+        const line = prop ? `${selector} ${prop}\n` : `${selector}\n`
+        if (isTopRule) {
+          topString += line
+        } else {
+          cssString += line
+        }
+      })
+      continue
+    }
+
     let ruleString = `${selector} {\r\n`
 
     for (const property in properties) {
@@ -476,5 +494,5 @@ export const objectCssToString = (css) => {
     ruleString += '}\n'
     cssString += ruleString
   }
-  return cssString
+  return topString + cssString
 }