diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js index 35de776e1c..e0eb04d823 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js @@ -250,6 +250,7 @@ export function build_set_style(node_id, attribute, style_directives, context) { if (style_directives.length) { next = build_style_directives_object(style_directives, context); has_state ||= style_directives.some((d) => d.metadata.expression.has_state); + if (has_state) { previous_id = b.id(context.state.scope.generate('styles')); context.state.init.push(b.declaration('let', [b.declarator(previous_id)])); diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js index 12ced8c373..00ea5265ad 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js @@ -208,6 +208,7 @@ export function build_element_attributes(node, context) { build_element_spread_attributes(node, attributes, style_directives, class_directives, context); } else { const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null; + for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) { const name = get_attribute_name(node, attribute); const can_use_literal = @@ -222,9 +223,11 @@ export function build_element_attributes(node, context) { WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name) ) ).value; + if (name === 'class' && css_hash) { literal_value = (String(literal_value) + ' ' + css_hash).trim(); } + if (name !== 'class' || literal_value) { context.state.template.push( b.literal( @@ -236,6 +239,7 @@ export function build_element_attributes(node, context) { ) ); } + continue; } @@ -371,6 +375,7 @@ function build_element_spread_attributes( function build_attr_class(class_directives, expression, context, hash) { /** @type {ObjectExpression | undefined} */ let directives; + if (class_directives.length) { directives = b.object( class_directives.map((directive) => @@ -382,6 +387,7 @@ function build_attr_class(class_directives, expression, context, hash) { ) ); } + let css_hash; if (hash) { @@ -393,6 +399,7 @@ function build_attr_class(class_directives, expression, context, hash) { } else if (directives) { css_hash = b.null; } + return b.call('$.attr_class', expression, css_hash, directives); } @@ -405,6 +412,7 @@ function build_attr_class(class_directives, expression, context, hash) { function build_attr_style(style_directives, expression, context) { /** @type {ArrayExpression | ObjectExpression | undefined} */ let directives; + if (style_directives.length) { let normal_properties = []; let important_properties = []; diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js index 46abcb475c..aac9c37dbe 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -291,10 +291,7 @@ function style_object_to_string(style_object) { */ export function attr_class(value, hash, directives) { var result = to_class(value, hash, directives); - if (result) { - return ` class="${escape_html(result, true)}"`; - } - return ''; + return result ? ` class="${escape_html(result, true)}"` : ''; } /**