swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-12-25 14:43:33 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(html/minifier): Compress exportparts (#6187)

Browse Source
This commit is contained in:
Alexander Akait 2022-10-18 17:48:47 +03:00 committed by GitHub
parent 3fe4c45a08
commit 0ba464d643
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 141 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
crates/swc_atoms/words.txt
View File

@ -783,6 +783,7 @@ eval
even
ex
export
exportparts
extends
face
false

3
crates/swc_html_minifier/src/lib.rs
View File

@ -450,6 +450,7 @@ impl Minifier<'_> {
{
true
}
_ if attribute_name == "exportparts" => true,
_ => COMMA_SEPARATED_HTML_ATTRIBUTES.contains(&(&element.tag_name, attribute_name)),
},
Namespace::SVG => {
@ -2413,6 +2414,8 @@ impl VisitMut for Minifier<'_> {
}
} else if matches!(n.name, js_word!("points")) {
self.collapse_whitespace(value.trim())
} else if matches!(n.name, js_word!("exportparts")) {
value.chars().filter(|c| !c.is_whitespace()).collect()
} else {
value.trim().to_string()
}

115
crates/swc_html_minifier/tests/fixture/attribute/exportparts/input.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow parts example</title>
<style>
tabbed-custom-element::part(tab) {
color: #0c0c0dcc;
border-bottom: transparent solid 2px;
}
tabbed-custom-element::part(tab):hover {
background-color: #0c0c0d19;
border-color: #0c0c0d33;
}
tabbed-custom-element::part(tab):hover:active {
background-color: #0c0c0d33;
}
tabbed-custom-element::part(tab):focus {
box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
tabbed-custom-element::part(active) {
color: #0060df;
border-color: #0a84ff !important;
}
tabbed-custom-element-exportparts::part(bgtab) {
font-weight: bold;
}
tabbed-custom-element-exportparts::part(active) {
color: red;
}
</style>
</head>
<body>
<h1>Shadow part styling for tabbed custom element</h1>
<template id="tabbed-custom-element">
<style type="text/css">
*, ::before, ::after {
box-sizing: border-box;
padding: 1rem;
}
:host {
display: flex;
}
</style>
<div part="tab active">Tab 1</div>
<div part="tab">Tab 2</div>
<div part="tab">Tab 3</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
<hr>
<template id="tabbed-custom-element-exportparts">
<tabbed-custom-element exportparts=" tab: bgtab "></tabbed-custom-element>
<tabbed-custom-element exportparts=" tab: bgtab, active "></tabbed-custom-element>
<tabbed-custom-element exportparts=" tab : bgtab, active "></tabbed-custom-element>
</template>
<tabbed-custom-element-exportparts></tabbed-custom-element-exportparts>
<script type="module">
globalThis.customElements.define("tabbed-custom-element", class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("tabbed-custom-element").content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(template.cloneNode(true));
let tabs = [];
let children = this.shadowRoot.children;
for (let elem of children) {
if (elem.getAttribute('part')) {
tabs.push(elem);
}
}
tabs.forEach((tab) => {
tab.addEventListener('click', (e) => {
tabs.forEach((tab) => {
tab.part = 'tab';
})
e.target.part = 'tab active';
});
})
}
});
</script>
<script type="module">
globalThis.customElements.define("tabbed-custom-element-exportparts", class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("tabbed-custom-element-exportparts").content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(template.cloneNode(true));
}
});
</script>
</body>
</html>

22
crates/swc_html_minifier/tests/fixture/attribute/exportparts/output.min.html Normal file
View File

@ -0,0 +1,22 @@
<!doctype html><meta charset=utf-8><title>Shadow parts example</title><style>tabbed-custom-element::part(tab){color:#0c0c0dcc;border-bottom:transparent solid 2px}tabbed-custom-element::part(tab):hover{background-color:#0c0c0d19;border-color:#0c0c0d33}tabbed-custom-element::part(tab):hover:active{background-color:#0c0c0d33}tabbed-custom-element::part(tab):focus{box-shadow:0 0 0 1px#0a84ff inset,0 0 0 1px#0a84ff,0 0 0 4px rgba(10,132,255,.3)}tabbed-custom-element::part(active){color:#0060df;border-color:#0a84ff!important}tabbed-custom-element-exportparts::part(bgtab){font-weight:700}tabbed-custom-element-exportparts::part(active){color:red}</style><h1>Shadow part styling for tabbed custom element</h1>
<template id=tabbed-custom-element>
<style>*,:before,:after{box-sizing:border-box;padding:1rem}:host{display:flex}</style>
<div part="active tab">Tab 1</div>
<div part=tab>Tab 2</div>
<div part=tab>Tab 3</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
<hr>
<template id=tabbed-custom-element-exportparts>
<tabbed-custom-element exportparts=tab:bgtab></tabbed-custom-element>
<tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
<tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
</template>
<tabbed-custom-element-exportparts></tabbed-custom-element-exportparts>
<script type=module>globalThis.customElements.define("tabbed-custom-element",class extends HTMLElement{constructor(){super();let t=document.getElementById("tabbed-custom-element").content,e=this.attachShadow({mode:"open"});e.appendChild(t.cloneNode(!0));let o=[],a=this.shadowRoot.children;for(let n of a)n.getAttribute("part")&&o.push(n);o.forEach(t=>{t.addEventListener("click",t=>{o.forEach(t=>{t.part="tab"}),t.target.part="tab active"})})}})</script><script type=module>globalThis.customElements.define("tabbed-custom-element-exportparts",class extends HTMLElement{constructor(){super();let e=document.getElementById("tabbed-custom-element-exportparts").content,t=this.attachShadow({mode:"open"});t.appendChild(e.cloneNode(!0))}})</script>