msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

collapse whitespace in class and style attributes (#6613)

Browse Source
pull/6671/head
Tan Li Hau 3 years ago committed by GitHub
parent 1a2dd8d893
commit f25a995f7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 179 additions and 4 deletions
Show Stats Download Patch File Download Diff File

23
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -96,6 +96,8 @@ const react_attributes = new Map([
['htmlFor', 'for']
]);
const attributes_to_compact_whitespace = ['class', 'style'];
function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
const parent_element = parent.find_nearest(/^Element/);
@ -241,6 +243,8 @@ export default class Element extends Node {
this.validate();
this.optimise();
component.apply_stylesheet(this);
}
@ -750,6 +754,25 @@ export default class Element extends Node {
get slot_template_name() {
return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
}
optimise() {
attributes_to_compact_whitespace.forEach(attribute_name => {
const attribute = this.attributes.find(a => a.name === attribute_name);
if (attribute && !attribute.is_true) {
attribute.chunks.forEach((chunk, index) => {
if (chunk.type === 'Text') {
let data = chunk.data.replace(/[\s\n\t]+/g, ' ');
if (index === 0) {
data = data.trimLeft();
} else if (index === attribute.chunks.length - 1) {
data = data.trimRight();
}
chunk.data = data;
}
});
}
});
}
}
function should_have_attribute(

114
test/js/samples/collapse-element-class-name/expected.js
Unescape View File

@ -0,0 +1,114 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
assign,
attr,
compute_rest_props,
create_component,
destroy_component,
detach,
element,
exclude_internal_props,
init,
insert,
mount_component,
safe_not_equal,
space,
transition_in,
transition_out
} from "svelte/internal";
import Component from "./Component.svelte";
function create_fragment(ctx) {
let div;
let div_class_value;
let div_style_value;
let div_other_value;
let t;
let component;
let current;
component = new Component({
props: {
class: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''),
style: "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n \ttransform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles,
other: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '')
}
});
return {
c() {
div = element("div");
t = space();
create_component(component.$$.fragment);
attr(div, "class", div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''));
attr(div, "style", div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles);
attr(div, "other", div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''));
},
m(target, anchor) {
insert(target, div, anchor);
insert(target, t, anchor);
mount_component(component, target, anchor);
current = true;
},
p(ctx, [dirty]) {
if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_class_value !== (div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''))) {
attr(div, "class", div_class_value);
}
if (!current || dirty & /*size, $$restProps*/ 5 && div_style_value !== (div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles)) {
attr(div, "style", div_style_value);
}
if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_other_value !== (div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''))) {
attr(div, "other", div_other_value);
}
const component_changes = {};
if (dirty & /*size, theme, $$restProps*/ 7) component_changes.class = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '');
if (dirty & /*size, $$restProps*/ 5) component_changes.style = "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n \ttransform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles;
if (dirty & /*size, theme, $$restProps*/ 7) component_changes.other = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '');
component.$set(component_changes);
},
i(local) {
if (current) return;
transition_in(component.$$.fragment, local);
current = true;
},
o(local) {
transition_out(component.$$.fragment, local);
current = false;
},
d(detaching) {
if (detaching) detach(div);
if (detaching) detach(t);
destroy_component(component, detaching);
}
};
}
function instance($$self, $$props, $$invalidate) {
const omit_props_names = ["size","theme"];
let $$restProps = compute_rest_props($$props, omit_props_names);
let { size } = $$props;
let { theme } = $$props;
$$self.$$set = $$new_props => {
$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
$$invalidate(2, $$restProps = compute_rest_props($$props, omit_props_names));
if ('size' in $$new_props) $$invalidate(0, size = $$new_props.size);
if ('theme' in $$new_props) $$invalidate(1, theme = $$new_props.theme);
};
return [size, theme, $$restProps];
}
class Component_1 extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, { size: 0, theme: 1 });
}
}
export default Component_1;

41
test/js/samples/collapse-element-class-name/input.svelte
Unescape View File

@ -0,0 +1,41 @@
<script>
import Component from "./Component.svelte";
export let size;
export let theme;
</script>
<div
class="
button
button--size--{size}
button--theme--{theme}
{$$restProps.class || ''}"
style="
color: green;
background: white;
font-size: {size};
transform: {$$restProps.scale} {$$restProps.rotate};
{$$restProps.styles}"
other="
button
button--size--{size}
button--theme--{theme}
{$$restProps.class || ''}" />
<Component
class="
button
button--size--{size}
button--theme--{theme}
{$$restProps.class || ''}"
style="
color: green;
background: white;
font-size: {size};
transform: {$$restProps.scale} {$$restProps.rotate};
{$$restProps.styles}"
other="
button
button--size--{size}
button--theme--{theme}
{$$restProps.class || ''}" />

5
test/server-side-rendering/samples/spread-attributes-white-space/_expected.html
Unescape View File

@ -2,7 +2,4 @@
bar
">
<input class="
white
space
">
<input class="white space ">
Write Preview
Loading…
Cancel
Save