fix: fix the issue of missing the tiny prefix in CSS after packaging

[wuyiping0628]

PR

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)

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:

What is the current behavior?

Issue Number: #3444

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • None.
• Bug Fixes
  • Scoped grid-system styles to NavMenu and Row to prevent unintended global overrides, reducing layout bleed and improving visual consistency.
• Refactor
  • Moved grid-system imports into NavMenu and Row style scopes for clearer cascading and better isolation.
• Chores
  • No changes to public APIs or class names; purely stylesheet scoping adjustments.

[coderabbitai]

Walkthrough

Moved the grid-system LESS import from the global scope into component-scoped blocks for NavMenu and Row, limiting grid styles to their respective prefixed classes. No public API or class name changes.

Changes

Cohort / File(s)	Summary
Scope grid-system import to component blocks packages/theme/src/nav-menu/index.less, packages/theme/src/row/index.less	Removed top-level @import '../grid-system/index.less'; and re-added it inside .@{nav-menu-prefix-cls} (after .inject-NavMenu-vars()) and inside .@{row-prefix-cls} (after .clearfix()), respectively, to scope grid styles to each component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• 🐛 [Bug]: vue-theme/nav-menu的css的tiny前缀没了，导致会覆盖库外面的样式 #3444 — Scopes grid-system to NavMenu, preventing leakage of unprefixed grid classes as described.

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "fix: fix the issue of missing the tiny prefix in CSS after packaging" clearly states the primary intent—repairing a missing "tiny" CSS prefix introduced during packaging—and aligns with the changes that scope grid-system imports into component scopes, so it is relevant and specific enough for reviewers.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

A nibble of CSS, a tuck and a seam,
I hopped through grids, scoped neat as a dream.
No more leaks from rows that roam—
Now each component keeps its home.
Tap-tap my paws: styles align,
Lettuce-green checks—everything’s fine. 🥕✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch wyp/nav-menu-theme-0910

---

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: 0

🧹 Nitpick comments (2)

packages/theme/src/row/index.less (1)

21-21: Document the intent to prevent future hoisting.

Add a brief comment so future refactors don’t move this import back to top-level.

Apply:

   .clearfix();
-  @import '../grid-system/index.less';
+  // Scope grid-system under the row block to preserve the 'tiny-' prefix post-packaging. Do not hoist.
+  @import '../grid-system/index.less';

packages/theme/src/nav-menu/index.less (1)

20-20: Add a guardrail comment mirroring Row.

Clarify that the import is intentionally scoped to fix the packaging prefix issue.

Apply:

   .inject-NavMenu-vars();
-  @import '../grid-system/index.less';
+  // Scope grid-system under the nav-menu block to avoid losing 'tiny-' prefix during packaging.
+  @import '../grid-system/index.less';

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7284629 and 1184928.

📒 Files selected for processing (2)

• packages/theme/src/nav-menu/index.less (1 hunks)
• packages/theme/src/row/index.less (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: PR E2E Test (pnpm test:e2e3)

🔇 Additional comments (2)

packages/theme/src/row/index.less (1)

21-21: Scoped import looks correct — confirm toolchain supports @import inside rulesets

Found "less" == 4.3.0 in package.json; @import '../grid-system/index.less' present at:

• packages/theme/src/row/index.less:21
• packages/theme/src/nav-menu/index.less:20
• packages/theme-saas/src/row/index.less:3

less-loader not present in package.json and no compiled CSS (dist) was available, so nesting could not be verified. Run a local build and confirm the grid rules are nested under the row prefix (e.g. .tiny-row .tiny-col-*) and that no top-level .tiny-col-* selectors remain:

npm run build
rg -nP '.tiny-row\b.*.tiny-(xs|sm|md|lg|col)-\d+' dist -S
rg -nP '^.(tiny-(xs|sm|md|lg|col)-\d+)\b' dist -S

packages/theme/src/nav-menu/index.less (1)

20-20: Verify/remove grid-system import from NavMenu

packages/theme/src/nav-menu/index.less imports ../grid-system/index.less (≈ line 20). Repo scan found no .tiny-* grid classes or other grid references; grid-system/index.less exists but couldn't be fully inspected in the sandbox — confirm whether it emits global .tiny-col/.tiny-row selectors or only exposes mixins/variables. If only mixins are needed, import those specifically; if it emits unused global CSS, remove the import to avoid extra bundle weight. After building, search generated CSS (dist/*.css) for .tiny-(col|row|xs|sm|md|lg) and compare size impact.