fix(style): percent-encode SVG data URIs for cross-browser reliability #3805
Conversation
Replace the need to manually add the `displays-percentage-colors` class with a proper component prop. This makes the feature discoverable through TypeScript autocompletion and component documentation. The class-based approach still works for backward compatibility since the CSS rules check for the class on the host element. Fixes Lundalogik#3694
Encode all raw SVG data URIs in SCSS files with proper percent-encoding and normalize the preamble to use 'data:image/svg+xml;charset=utf-8'. Raw/unencoded SVG data URIs can cause issues in some browsers, particularly with special characters like angle brackets and spaces. Fixes Lundalogik#3672
📝 WalkthroughWalkthroughThis PR standardizes SVG data URL encoding across multiple SCSS files by replacing plain UTF-8 encoded data URLs with properly percent-encoded equivalents and explicit charset declarations. Additionally, a new boolean prop Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
adrianschmidt-bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/slider/examples/slider-multiplier-percentage-colors.tsx (1)
30-57: 🛠️ Refactor suggestion | 🟠 MajorWrap multiple JSX elements in
<Host>instead of array literal.The
render()method returns multiple elements wrapped in an array literal. As per coding guidelines, StencilJS components should use the special<Host>element instead of array literals for returning multiple top-level JSX elements.♻️ Proposed fix
+import { Component, h, Host, State } from '@stencil/core'; -import { Component, h, State } from '@stencil/core';public render() { - return [ + return ( + <Host> <limel-slider displaysPercentageColors={true} label="Slider with percentage colors" unit=" %" value={this.value} factor={this.factor} valuemax={this.maxValue} valuemin={this.minValue} disabled={this.disabled} readonly={this.readonly} onChange={this.changeHandler} - />, + /> <limel-example-controls> <limel-switch value={this.disabled} label="Disabled" onChange={this.setDisabled} /> <limel-switch value={this.readonly} label="Readonly" onChange={this.setReadonly} /> - </limel-example-controls>, - <limel-example-value value={this.value} />, - ]; + </limel-example-controls> + <limel-example-value value={this.value} /> + </Host> + ); }As per coding guidelines: "When returning multiple JSX elements from the
rendermethod, never wrap them in an array literal. Instead, always wrap them in the special<Host>element."
|
@adrianschmidt-bot Please don't re-use PRs like you did here (first opening the PR to solve #2250, then apparently scrapping that and instead using the same PR to fix #3672. It's OK this time, you don't have to redo this PR. But in the future, if you want to scrap your fix for one issue and instead fix something else, please just close the PR and open a new PR for the new fix 🙂 |
2 participants
Description
This PR addresses issue #3672 by encoding all raw SVG data URIs in SCSS files with proper percent-encoding and normalizing the preamble to use
data:image/svg+xml;charset=utf-8.Problem
Raw/unencoded SVG data URIs can cause rendering issues in some browsers, particularly with special characters like angle brackets (
<,>) and spaces. Different browsers may interpret these characters inconsistently.Solution
<→%3C,>→%3E, spaces →%20)data:image/svg+xml;charset=utf-8,formatFiles Changed
src/style/mixins.scss- Close button iconsrc/components/tab-bar/tab-bar.scss- Tab curve mask imagessrc/design-guidelines/size/examples/size-edge-case.scss- Avatar iconssrc/components/icon/examples/icon-size-ui.scss- Checkered pattern backgroundsrc/components/code-editor/code-editor.scss- Error marker and fold marker iconsFixes #3672
Summary by CodeRabbit
New Features
displaysPercentageColorsproperty to enable percentage color visualization.Style
✏️ Tip: You can customize this high-level summary in your review settings.