fix: add flag to fix css issue

[hexqi]

English | 简体中文

PR

添加 css结构化 特性开关，临时解决 #1776 样式丢失问题
原始PR #1749
验证：https://hexqi.github.io/tiny-engine/?type=app&tenant=1

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features

  • Added a new configuration option enableStructuredCss to control CSS processing behavior throughout the application.

• Configuration Changes

  • New boolean property in engine configuration (default: false) enables structured CSS mode as an alternative processing format.

[coderabbitai]

Walkthrough

The changes introduce a new feature flag enableStructuredCss to the engine configuration and implement conditional CSS processing logic that switches between structured CSS object format and string format based on this flag.

Changes

Cohort / File(s)	Summary
Configuration designer-demo/engine.config.js	Added boolean property enableStructuredCss (default false) to engine configuration alongside existing enableTailwindCSS property.
CSS Processing packages/plugins/page/src/composable/usePage.ts, packages/settings/styles/src/components/classNamesContainer/index.vue	Implemented feature-flag checks for enableStructuredCss to conditionally process CSS as either structured objects or formatted strings. Added imports for getMergeMeta and formatString utilities to support the conditional logic paths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A flag hops into view, enableStructuredCss so new,
CSS paths split in two—object or string, both true!
Configuration blooms, composables zoom,
With conditional logic clearing the room. 🎨✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: add flag to fix css issue' is vague and generic. It mentions adding a flag but lacks specificity about what CSS issue is being addressed or how the flag functions.	Revise the title to be more specific, such as 'fix: add enableStructuredCss flag to prevent style loss' to clearly convey the purpose of the feature flag.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/plugins/page/src/composable/usePage.ts (1)

126-137: Inconsistent CSS formatting between code paths.

The baseStyle variable (line 127) uses \r\n newlines without trimming, while formatCssRule (line 126) uses \n newlines with trimming. When useBaseStyle is falsy, baseStyle is returned; when truthy, formatCssRule is used for the same pageBaseStyle data. This creates inconsistent output formatting.

Additionally, baseStyle is redundant when useBaseStyle is truthy since formatCssRule is used instead.

♻️ Suggested refactor for consistent formatting

-    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`
+    const formatCssRule = (className: string, style: string) => `.${className} {\n  ${style.trim()}\n}\n`
+    const baseStyle = formatCssRule(pageOptions.pageBaseStyle.className, pageOptions.pageBaseStyle.style)

     if (!materialsOptions.useBaseStyle) {
       return baseStyle
     }

     return [
-      formatCssRule(pageOptions.pageBaseStyle.className, pageOptions.pageBaseStyle.style),
+      baseStyle,
       formatCssRule(materialsOptions.blockBaseStyle.className, materialsOptions.blockBaseStyle.style),
       formatCssRule(materialsOptions.componentBaseStyle.className, materialsOptions.componentBaseStyle.style)
     ].join('\n')

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/plugins/page/src/composable/usePage.ts` around lines 126 - 137, The
code returns a differently formatted CSS string depending on
materialsOptions.useBaseStyle because baseStyle uses CRLF and no trimming while
formatCssRule uses LF and trims; to fix, remove the redundant hardcoded
baseStyle and always produce page base CSS via
formatCssRule(pageOptions.pageBaseStyle.className,
pageOptions.pageBaseStyle.style) so both code paths use identical formatting,
and ensure formatCssRule remains the single source of truth for generating CSS
rules (update any return that currently uses baseStyle to call formatCssRule
instead).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/settings/styles/src/components/classNamesContainer/index.vue`:
- Around line 462-464: The code is preemptively replacing double quotes with
single quotes before formatting which is redundant and can corrupt escaped
quotes; remove the content.replace(/"/g, "'") step and pass the raw content into
formatString so cssData is set via cssData = formatString(content, 'css')
(locate the assignment to cssData and the use of formatString in the
classNamesContainer component to update accordingly).

---

Nitpick comments:
In `@packages/plugins/page/src/composable/usePage.ts`:
- Around line 126-137: The code returns a differently formatted CSS string
depending on materialsOptions.useBaseStyle because baseStyle uses CRLF and no
trimming while formatCssRule uses LF and trims; to fix, remove the redundant
hardcoded baseStyle and always produce page base CSS via
formatCssRule(pageOptions.pageBaseStyle.className,
pageOptions.pageBaseStyle.style) so both code paths use identical formatting,
and ensure formatCssRule remains the single source of truth for generating CSS
rules (update any return that currently uses baseStyle to call formatCssRule
instead).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a6c1c353-5d7a-4c45-95e1-7fb7bb26f1ff

📥 Commits

Reviewing files that changed from the base of the PR and between 7c4bdc0 and 491f94d.

📒 Files selected for processing (3)

• designer-demo/engine.config.js
• packages/plugins/page/src/composable/usePage.ts
• packages/settings/styles/src/components/classNamesContainer/index.vue