-
Notifications
You must be signed in to change notification settings - Fork 395
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(template-compiler): normalize class and style attribute values (#…
…4553) Co-authored-by: Nolan Lawson <[email protected]> Co-authored-by: Will Harney <[email protected]>
- Loading branch information
1 parent
836de81
commit e9480f5
Showing
22 changed files
with
336 additions
and
24 deletions.
There are no files selected for viewing
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
Empty file.
58 changes: 58 additions & 0 deletions
58
packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/expected.html
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<x-foo> | ||
<template shadowrootmode="open"> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red !important;"> | ||
</div> | ||
<div style="color: red;"> | ||
</div> | ||
<div style="color: red; background-color: aqua;"> | ||
</div> | ||
<div style="color: red; background-color: aqua;"> | ||
</div> | ||
<div style="--its-a-tab: red;"> | ||
</div> | ||
<div style="--its-a-tab-and-a-space: red;"> | ||
</div> | ||
<div class="boo"> | ||
</div> | ||
<div class="boo"> | ||
</div> | ||
<div class="foo bar"> | ||
</div> | ||
<div class="foo bar baz"> | ||
</div> | ||
<div class="foo bar"> | ||
</div> | ||
<div class="foo bar"> | ||
</div> | ||
<div class="foo bar"> | ||
</div> | ||
<div class="foo bar"> | ||
</div> | ||
</template> | ||
</x-foo> |
3 changes: 3 additions & 0 deletions
3
packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/index.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const tagName = 'x-foo'; | ||
export { default } from 'x/foo'; | ||
export * from 'x/foo'; |
29 changes: 29 additions & 0 deletions
29
...s/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/modules/x/foo/foo.html
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<template> | ||
<div style="color: red !important "></div> | ||
<div style="color: red !important ;"></div> | ||
<div style="color: red !important "></div> | ||
<div style="color: red !important ;"></div> | ||
<div style="color: red ! important;"></div> | ||
<div style="color: red ! important"></div> | ||
<div style="color: red !IMPORTANT "></div> | ||
<div style="color: red !IMPORTANT ;"></div> | ||
<div style="color: red !IMPORTANT "></div> | ||
<div style="color: red !IMPORTANT ;"></div> | ||
<div style="color: red ! IMPORTANT;"></div> | ||
<div style="color: red ! IMPORTANT"></div> | ||
<div style=" color : red ! IMPORTANT ; "></div> | ||
<div style=" color : red ! IMPORTAnt ; "></div> | ||
<div style=" color : red ; "></div> | ||
<div style="color: red; background-color: aqua "></div> | ||
<div style="color: red ; background-color: aqua; "></div> | ||
<div style=" --its-a-tab: red ; "></div> | ||
<div style=" --its-a-tab-and-a-space: red ; "></div> | ||
<div class=" boo "></div> | ||
<div class=" boo"></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar baz "></div> | ||
<div class="foo bar"></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar "></div> | ||
</template> |
3 changes: 3 additions & 0 deletions
3
...ges/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/modules/x/foo/foo.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { LightningElement } from 'lwc'; | ||
|
||
export default class Foo extends LightningElement {} |
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
54 changes: 54 additions & 0 deletions
54
packages/@lwc/integration-karma/test/rendering/style-class-whitespace/index.spec.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { createElement } from 'lwc'; | ||
import Component from 'x/component'; | ||
|
||
describe('style and class whitespace normalization', () => { | ||
it('should normalize style whitespace', async () => { | ||
const elm = createElement('x-component', { is: Component }); | ||
document.body.appendChild(elm); | ||
await Promise.resolve(); | ||
|
||
const actual = [...elm.shadowRoot.querySelectorAll('[style]')].map((elm) => | ||
elm.getAttribute('style') | ||
); | ||
expect(actual).toEqual([ | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red !important;', | ||
'color: red;', | ||
'color: red; background-color: aqua;', | ||
'color: red; background-color: aqua;', | ||
'--its-a-tab: red;', | ||
'--its-a-tab-and-a-space: red;', | ||
]); | ||
}); | ||
it('should normalize class whitespace', async () => { | ||
const elm = createElement('x-component', { is: Component }); | ||
document.body.appendChild(elm); | ||
await Promise.resolve(); | ||
|
||
const actual = [...elm.shadowRoot.querySelectorAll('[class]')].map((elm) => | ||
elm.getAttribute('class') | ||
); | ||
expect(actual).toEqual([ | ||
'boo', | ||
'boo', | ||
'foo bar', | ||
'foo bar baz', | ||
'foo bar', | ||
'foo bar', | ||
'foo bar', | ||
'foo bar', | ||
]); | ||
}); | ||
}); |
29 changes: 29 additions & 0 deletions
29
...s/@lwc/integration-karma/test/rendering/style-class-whitespace/x/component/component.html
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<template> | ||
<div style="color: red !important "></div> | ||
<div style="color: red !important ;"></div> | ||
<div style="color: red !important "></div> | ||
<div style="color: red !important ;"></div> | ||
<div style="color: red ! important;"></div> | ||
<div style="color: red ! important"></div> | ||
<div style="color: red !IMPORTANT "></div> | ||
<div style="color: red !IMPORTANT ;"></div> | ||
<div style="color: red !IMPORTANT "></div> | ||
<div style="color: red !IMPORTANT ;"></div> | ||
<div style="color: red ! IMPORTANT;"></div> | ||
<div style="color: red ! IMPORTANT"></div> | ||
<div style=" color : red ! IMPORTANT ; "></div> | ||
<div style=" color : red ! IMPORTAnt ; "></div> | ||
<div style=" color : red ; "></div> | ||
<div style="color: red; background-color: aqua "></div> | ||
<div style="color: red ; background-color: aqua; "></div> | ||
<div style=" --its-a-tab: red ; "></div> | ||
<div style=" --its-a-tab-and-a-space: red ; "></div> | ||
<div class=" boo "></div> | ||
<div class=" boo"></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar baz "></div> | ||
<div class="foo bar"></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar "></div> | ||
<div class=" foo bar "></div> | ||
</template> |
3 changes: 3 additions & 0 deletions
3
...ges/@lwc/integration-karma/test/rendering/style-class-whitespace/x/component/component.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { LightningElement } from 'lwc'; | ||
|
||
export default class extends LightningElement {} |
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
2 changes: 1 addition & 1 deletion
2
packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
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
1 change: 1 addition & 0 deletions
1
packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/actual.html
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
<template> | ||
<div style="background: blue !important; color: red; opacity: 0.5 !important"></div> | ||
<div style="background: blue !IMPORTANT; color: red; opacity: 0.5 !IMPORTANT"></div> | ||
</template> |
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
8 changes: 6 additions & 2 deletions
8
packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
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
1 change: 1 addition & 0 deletions
1
packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/actual.html
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
<template> | ||
<section style="font-size: 12px; color: red; margin: 10px 5px 10px"></section> | ||
<section style="--my-color: blue; color: var(--my-color)"></section> | ||
<section style="font-size: 12px;color:red;margin:10px 5px 10px"></section> | ||
</template> |
Oops, something went wrong.