Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: style isolation failed if app name contains some character #842

Merged
merged 3 commits into from
Aug 10, 2020

Conversation

PeachScript
Copy link
Member

@PeachScript PeachScript commented Aug 10, 2020

Checklist
  • npm test passes
  • tests are included
  • documentation is changed or added
  • commit message follows commit guidelines
Description of change
html [type="button"] {}
/* will be rewrite by mistake */
 type="button"] {}
/* right result with the next feature */
div[prefix] [type="button"] {}
  • CSS styles will apply failed if app name contains some character:
/* invalid rules */
div[data-qiankun=1f2a3n] {}
div[data-qiankun=http://] {}
/* valid rules */
div[data-qiankun="1f2a3n"] {}
div[data-qiankun="http://"] {}

So the quotes of attribute selector is required for a framework, reference: https://mathiasbynens.be/notes/unquoted-attribute-values

kuitos
kuitos previously approved these changes Aug 10, 2020
Copy link
Member

@kuitos kuitos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@@ -190,7 +190,7 @@ const process = (appWrapper: HTMLElement, stylesheetElement: HTMLStyleElement |
const tag = (mountDOM.tagName || '').toLowerCase();

if (tag && stylesheetElement.tagName === 'STYLE') {
const prefix = `${tag}[${QiankunCSSRewriteAttr}=${appName}]`;
const prefix = `${tag}[${QiankunCSSRewriteAttr}="${appName}"]`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

咦,这个 "appName" 看起来和上面的 expectValue 结构并不匹配?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

看了下 expectValue 是自己传的 prefixprocessor,不走这个逻辑

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

所以,这里的实际 转译过后的结果是:

div[data-qiankun="react15"] ... 么

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是的,如果走 process 而不是 processor,那么实际结果就是带引号的;我把 case 全部更新一遍吧,这样内外一致

Copy link
Collaborator

@Saviio Saviio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有一个问题?

@kuitos kuitos merged commit a8b2e79 into master Aug 10, 2020
@kuitos kuitos deleted the hotfix/isolation-app-attr branch August 10, 2020 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants