feat(search): adapt to Search Components#4124
Conversation
WalkthroughSwitches the search styling import from a commented adaptation file to an active responsive stylesheet, adds Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
James-9696
changed the title
James-9696
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/theme/src/search/responsive.less (1)
6-14: Consider removing redundant.inject-Search-vars()call to reduce CSS output size.The mixin is already called at the component level in
index.less(which imports this file). CSS custom properties inherit from the parent scope, so--tv-Search-responsive-selector-spacewill be available inside the media query without re-declaring all variables.The current implementation re-outputs all ~30 CSS variables inside the media query, which bloats the compiled CSS unnecessarily.
♻️ Suggested simplification
`@media` screen and (max-width: 1280px) { .@{search-prefix-cls} { - .inject-Search-vars(); - .@{search-prefix-cls}__input { padding-right: var(--tv-Search-responsive-selector-space); } } }Note: The Stylelint error about "Unknown word search-prefix-cls" is a false positive—this is valid Less variable interpolation syntax using
@{variable}.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/theme/src/search/responsive.less` around lines 6 - 14, Remove the redundant call to the .inject-Search-vars() mixin inside the media query: since index.less already calls .inject-Search-vars() at the component root, the CSS custom property --tv-Search-responsive-selector-space will be inherited and available inside the `@media` block, so delete the .inject-Search-vars() line from the rule for .@{search-prefix-cls} within the max-width:1280px media query to avoid re-emitting ~30 variables and reduce compiled CSS size.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/theme/src/search/responsive.less`:
- Around line 6-14: Remove the redundant call to the .inject-Search-vars() mixin
inside the media query: since index.less already calls .inject-Search-vars() at
the component root, the CSS custom property
--tv-Search-responsive-selector-space will be inherited and available inside the
`@media` block, so delete the .inject-Search-vars() line from the rule for
.@{search-prefix-cls} within the max-width:1280px media query to avoid
re-emitting ~30 variables and reduce compiled CSS size.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 52b50991-70cb-4539-9c08-7d4195325b84
📒 Files selected for processing (2)
packages/theme/src/search/responsive.lesspackages/theme/src/search/vars.less
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/theme/src/search/responsive.less`:
- Line 7: Stylelint is parsing LESS files as SCSS/CSS which fails on LESS
interpolation like .@{search-prefix-cls}; update your Stylelint config
(.stylelintrc.json) to set customSyntax to postcss-less for .less files (install
postcss-less if missing) or add an overrides block that applies "customSyntax":
"postcss-less" to packages/theme/src/**/*.less so the .@{search-prefix-cls}
token is parsed correctly. Ensure the override targets .less files and restart
linting so postcss-less is used for those files.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a978bcc4-50e9-4574-b4d0-424631a726b2
📒 Files selected for processing (2)
packages/theme/src/search/responsive.lesspackages/theme/src/search/vars.less
| @search-prefix-cls: ~'@{css-prefix}search'; | ||
|
|
||
| @media screen and (max-width: 1280px) { | ||
| .@{search-prefix-cls} { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Candidate Stylelint config files =="
fd -HI 'stylelint|\.stylelintrc|stylelint\.config'
echo
echo "== LESS parser-related settings in Stylelint configs =="
for f in $(fd -HI '(\.stylelintrc(\..*)?|stylelint\.config\.(js|cjs|mjs|json|yaml|yml))'); do
echo "--- $f ---"
rg -n -C2 'customSyntax|postcss-less|overrides|\.less' "$f" || true
done
echo
echo "== Existing LESS selector interpolation usage in theme files =="
rg -n --type-add 'less:*.less' --type less '\.@\{[A-Za-z0-9_-]+\}' packages/theme/src -C1 | head -n 120Repository: opentiny/tiny-vue
Length of output: 7285
🏁 Script executed:
cat -n .stylelintrc.jsonRepository: opentiny/tiny-vue
Length of output: 1277
🏁 Script executed:
cat -n packages/theme/src/search/responsive.less | head -n 20Repository: opentiny/tiny-vue
Length of output: 470
🏁 Script executed:
rg -n 'postcss|less' package.json package-lock.json -i | head -n 30Repository: opentiny/tiny-vue
Length of output: 1050
Configure Stylelint with LESS parser for *.less files.
The Stylelint config extends stylelint-config-standard-scss without configuring a custom syntax for LESS files. This causes Stylelint to parse .less files using the SCSS/CSS parser, which doesn't recognize LESS interpolation syntax like .@{search-prefix-cls}.
Add customSyntax to .stylelintrc.json to specify postcss-less for LESS files (install postcss-less if not already present). Alternatively, create file-specific overrides to apply LESS syntax parsing to the packages/theme/src/**/*.less directory.
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 7-7: Unknown word search-prefix-cls (CssSyntaxError)
(CssSyntaxError)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/theme/src/search/responsive.less` at line 7, Stylelint is parsing
LESS files as SCSS/CSS which fails on LESS interpolation like
.@{search-prefix-cls}; update your Stylelint config (.stylelintrc.json) to set
customSyntax to postcss-less for .less files (install postcss-less if missing)
or add an overrides block that applies "customSyntax": "postcss-less" to
packages/theme/src/**/*.less so the .@{search-prefix-cls} token is parsed
correctly. Ensure the override targets .less files and restart linting so
postcss-less is used for those files.
github-actions
Bot
added
enhancement
2 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
适配小屏幕显示
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit