Skip to content

Commit

Permalink
chore(template-compiler): normalize class and style attribute values (#…
Browse files Browse the repository at this point in the history 
…4553)

Co-authored-by: Nolan Lawson <nlawson@salesforce.com>
Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
  • Loading branch information
@ekashida @nolanlawson @wjhsf
3 people committed Sep 17, 2024
1 parent 836de81 commit e9480f5
Show file tree
Hide file tree
Showing 22 changed files with 336 additions and 24 deletions.
2 changes: 1 addition & 1 deletion packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>
<div style="border-width: 1px; border-style: solid; border-color: red;">
</div>
<div style="border-width: 1px !important; border-style: solid; border-color: red !important;">
<div style="border-width: 1px !important; border-style: solid; border-color: red !important;">
</div>
<div style="color: salmon; background-color: chocolate;">
</div>
Expand Down
Empty file added packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/error.txt
View file
Empty file.
58 changes: 58 additions & 0 deletions packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/expected.html
View file
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 packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/index.js
View file
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 ...s/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/modules/x/foo/foo.html
View file
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 ...ges/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/modules/x/foo/foo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { LightningElement } from 'lwc';

export default class Foo extends LightningElement {}
4 changes: 2 additions & 2 deletions packages/@lwc/engine-server/src/__tests__/fixtures/svgs/expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="static" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop class="static" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop class="static" offset="0%" style="stop-color: rgb(255,255,0); stop-opacity: 1;"/>
<stop class="static" offset="100%" style="stop-color: rgb(255,0,0); stop-opacity: 1;"/>
</linearGradient>
</defs>
<ellipse class="static" cx="200" cy="70" fill="url(#grad1)" rx="85" ry="55"/>
Expand Down
54 changes: 54 additions & 0 deletions packages/@lwc/integration-karma/test/rendering/style-class-whitespace/index.spec.js
View file
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 ...s/@lwc/integration-karma/test/rendering/style-class-whitespace/x/component/component.html
View file
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 ...ges/@lwc/integration-karma/test/rendering/style-class-whitespace/x/component/component.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { LightningElement } from 'lwc';

export default class extends LightningElement {}
4 changes: 2 additions & 2 deletions packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import _implicitScopedStylesheets from "./class.scoped.css?scoped=true";
import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
const $fragment1 = parseFragment`<div class="foo${0}"${2}></div>`;
const $fragment2 = parseFragment`<div class="foo bar${0}"${2}></div>`;
const $fragment3 = parseFragment`<div class=" foo bar ${0}"${2}></div>`;
const $fragment4 = parseFragment`<div class="foo bar${0}"${2}></div>`;
const $fragment3 = parseFragment`<div class="foo bar${0}"${2}></div>`;
const $fragment4 = parseFragment`<div class="foo bar${0}"${2}></div>`;
function tmpl($api, $cmp, $slotset, $ctx) {
const { st: api_static_fragment } = $api;
return [
Expand Down
2 changes: 1 addition & 1 deletion packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import _implicitStylesheets from "./class.css";
import _implicitScopedStylesheets from "./class.scoped.css?scoped=true";
import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
const $fragment1 = parseFragment`<section class="foo bar baz-fiz${0}"${2}></section>`;
const $fragment1 = parseFragment`<section class="foo bar baz-fiz${0}"${2}></section>`;
function tmpl($api, $cmp, $slotset, $ctx) {
const { st: api_static_fragment } = $api;
return [api_static_fragment($fragment1, 1)];
Expand Down
1 change: 1 addition & 0 deletions packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/actual.html
View file
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>
63 changes: 57 additions & 6 deletions packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/ast.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
"location": {
"startLine": 1,
"startColumn": 1,
"endLine": 3,
"endLine": 4,
"endColumn": 12,
"start": 0,
"end": 111,
"end": 200,
"startTag": {
"startLine": 1,
"startColumn": 1,
Expand All @@ -17,12 +17,12 @@
"end": 10
},
"endTag": {
"startLine": 3,
"startLine": 4,
"startColumn": 1,
"endLine": 3,
"endLine": 4,
"endColumn": 12,
"start": 100,
"end": 111
"start": 189,
"end": 200
}
},
"directives": [],
Expand Down Expand Up @@ -77,6 +77,57 @@
"directives": [],
"listeners": [],
"children": []
},
{
"type": "Element",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"location": {
"startLine": 3,
"startColumn": 5,
"endLine": 3,
"endColumn": 89,
"start": 104,
"end": 188,
"startTag": {
"startLine": 3,
"startColumn": 5,
"endLine": 3,
"endColumn": 83,
"start": 104,
"end": 182
},
"endTag": {
"startLine": 3,
"startColumn": 83,
"endLine": 3,
"endColumn": 89,
"start": 182,
"end": 188
}
},
"attributes": [
{
"type": "Attribute",
"name": "style",
"value": {
"type": "Literal",
"value": "background: blue !IMPORTANT; color: red; opacity: 0.5 !IMPORTANT"
},
"location": {
"startLine": 3,
"startColumn": 10,
"endLine": 3,
"endColumn": 82,
"start": 109,
"end": 181
}
}
],
"properties": [],
"directives": [],
"listeners": [],
"children": []
}
]
}
Expand Down
8 changes: 6 additions & 2 deletions packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import _implicitStylesheets from "./style-important.css";
import _implicitScopedStylesheets from "./style-important.scoped.css?scoped=true";
import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
const $fragment1 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important"${3}></div>`;
const $fragment1 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important;"${3}></div>`;
const $fragment2 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important;"${3}></div>`;
function tmpl($api, $cmp, $slotset, $ctx) {
const { st: api_static_fragment } = $api;
return [api_static_fragment($fragment1, 1)];
return [
api_static_fragment($fragment1, 1),
api_static_fragment($fragment2, 3),
];
/*LWC compiler vX.X.X*/
}
export default registerTemplate(tmpl);
Expand Down
1 change: 1 addition & 0 deletions packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/actual.html
View file
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>
Loading

0 comments on commit e9480f5

Please sign in to comment.