fix: add scopeNormalizeStyle method #857
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough该拉取请求包含对多个文件的更改。 Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
package.json(1 hunks)packages/shineout-style/src/normalize.ts(2 hunks)packages/shineout/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🔇 Additional comments (1)
packages/shineout/src/index.ts (1)
58-58: 成功导出scopeNormalizeStyle方法
正确地从@sheinx/shineout-style模块中导出了scopeNormalizeStyle方法，便于在其他地方使用。
Comment on lines
+389
to
+419
| export const scopeNormalizeStyle = (csScopePrefix = '#app') => { | ||
| const styleElement = document.getElementById(uniqueStyleId) as HTMLStyleElement; | ||
| // 移除styleElement | ||
|
|
||
| const styleSheet = styleElement?.sheet; | ||
| const cssRules = styleSheet?.cssRules; | ||
| // 遍历cssRules，给每一个selectorText添加前缀 | ||
| if(cssRules){ | ||
| for(let i = 0; i < cssRules.length; i++){ | ||
| const rule = cssRules[i]; | ||
| if (rule instanceof CSSStyleRule) { | ||
| // 如果选择器包含了body或html，则替换，不是加前缀 | ||
| if(rule.selectorText.includes('body')){ | ||
| rule.selectorText = rule.selectorText.replace('body', csScopePrefix); | ||
| }else if(rule.selectorText.includes('html')){ | ||
| rule.selectorText = rule.selectorText.replace('html', csScopePrefix); | ||
| }else{ | ||
| const selectors = rule.selectorText.split(','); | ||
| const newSelectors = selectors.map(selector => `${csScopePrefix} ${selector}`); | ||
| rule.selectorText = newSelectors.join(','); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const scopedStyleString = cssRules ? Array.from(cssRules).map(rule => rule.cssText).join('') : ''; | ||
|
|
||
| document.head.removeChild(styleElement); | ||
|
|
||
| appendNormalizeStyle(scopedStyleString, uniqueStyleId); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
直接修改CSSRule.selectorText可能导致兼容性问题
在scopeNormalizeStyle函数中，通过遍历cssRules并修改selectorText来添加作用域前缀。然而，直接修改selectorText在某些浏览器（尤其是旧版IE和某些移动浏览器）中可能不被支持，可能会引发兼容性问题。
建议在插入样式之前，对normalizeStyle字符串进行处理，添加作用域前缀，然后再将处理后的样式字符串插入到页面中。这样可以避免直接操作CSSOM，提高代码的兼容性和稳定性。
可以考虑如下方式修改代码：
export const scopeNormalizeStyle = (csScopePrefix = '#app') => {
- const styleElement = document.getElementById(uniqueStyleId) as HTMLStyleElement;
- const styleSheet = styleElement?.sheet;
- const cssRules = styleSheet?.cssRules;
- if(cssRules){
- for(let i = 0; i < cssRules.length; i++){
- const rule = cssRules[i];
- if (rule instanceof CSSStyleRule) {
- if(rule.selectorText.includes('body')){
- rule.selectorText = rule.selectorText.replace('body', csScopePrefix);
- }else if(rule.selectorText.includes('html')){
- rule.selectorText = rule.selectorText.replace('html', csScopePrefix);
- }else{
- const selectors = rule.selectorText.split(',');
- const newSelectors = selectors.map(selector => `${csScopePrefix} ${selector}`);
- rule.selectorText = newSelectors.join(',');
- }
- }
- }
- }
- const scopedStyleString = cssRules ? Array.from(cssRules).map(rule => rule.cssText).join('') : '';
- document.head.removeChild(styleElement);
- appendNormalizeStyle(scopedStyleString, uniqueStyleId);
+ const scopedStyleString = normalizeStyle.replace(/(^|\n)([^\{\}]+)\{/g, (match, p1, p2) => {
+ let selectors = p2.trim().split(',');
+ selectors = selectors.map(selector => {
+ selector = selector.trim();
+ if (selector.includes('body') || selector.includes('html')) {
+ return selector.replace(/body|html/g, csScopePrefix);
+ } else {
+ return `${csScopePrefix} ${selector}`;
+ }
+ });
+ return `${p1}${selectors.join(', ')} {`;
+ });
+ appendNormalizeStyle(scopedStyleString, uniqueStyleId);
};这样，我们对normalizeStyle字符串进行正则替换，添加作用域前缀，避免直接操作CSSOM。
Committable suggestion skipped: line range outside the PR's diff.
16 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Types of changes
Background
Changelog
Summary by CodeRabbit
新特性
3.5.4-beta.9。scopeNormalizeStyle函数，增强了CSS样式管理和跨浏览器兼容性。appendNormalizeStyle函数，用于创建和附加样式元素。样式