Skip to content

Commit 186b770

Browse files
Rich-HarrisRich-Harris
committed
use helper for setting styles
1 parent d54d00c commit 186b770

File tree

8 files changed

+37
-21
lines changed

8 files changed

+37
-21
lines changed

‎src/generators/dom/visitors/Element/StyleAttribute.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@ export default function visitStyleAttribute(
6060

6161
block.builders.update.addConditional(
6262
condition,
63-
`${node.var}.style.setProperty('${prop.key}', ${value});`
63+
`@setStyle(${node.var}, '${prop.key}', ${value});`
6464
);
6565
}
6666
} else {
6767
value = stringify(prop.value[0].data);
6868
}
6969

7070
block.builders.hydrate.addLine(
71-
`${node.var}.style.setProperty('${prop.key}', ${value});`
71+
`@setStyle(${node.var}, '${prop.key}', ${value});`
7272
);
7373
});
7474
}

‎src/shared/dom.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,8 @@ export function setInputType(input, type) {
137137
try {
138138
input.type = type;
139139
} catch (e) {}
140+
}
141+
142+
export function setStyle(node, key, value) {
143+
node.style.setProperty(key, value);
140144
}

‎test/js/samples/inline-style-optimized-multiple/expected-bundle.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ function createElement(name) {
2525
return document.createElement(name);
2626
}
2727

28+
function setStyle(node, key, value) {
29+
node.style.setProperty(key, value);
30+
}
31+
2832
function destroy(detach) {
2933
this.destroy = noop;
3034
this.fire('destroy');
@@ -163,8 +167,8 @@ function create_main_fragment ( state, component ) {
163167
},
164168

165169
hydrate: function ( nodes ) {
166-
div.style.setProperty('color', state.color);
167-
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
170+
setStyle(div, 'color', state.color);
171+
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
168172
},
169173

170174
mount: function ( target, anchor ) {
@@ -173,11 +177,11 @@ function create_main_fragment ( state, component ) {
173177

174178
update: function ( changed, state ) {
175179
if ( changed.color ) {
176-
div.style.setProperty('color', state.color);
180+
setStyle(div, 'color', state.color);
177181
}
178182

179183
if ( changed.x || changed.y ) {
180-
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
184+
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
181185
}
182186
},
183187

‎test/js/samples/inline-style-optimized-multiple/expected.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
1+
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
22

33
function create_main_fragment ( state, component ) {
44
var div;
@@ -10,8 +10,8 @@ function create_main_fragment ( state, component ) {
1010
},
1111

1212
hydrate: function ( nodes ) {
13-
div.style.setProperty('color', state.color);
14-
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
13+
setStyle(div, 'color', state.color);
14+
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
1515
},
1616

1717
mount: function ( target, anchor ) {
@@ -20,11 +20,11 @@ function create_main_fragment ( state, component ) {
2020

2121
update: function ( changed, state ) {
2222
if ( changed.color ) {
23-
div.style.setProperty('color', state.color);
23+
setStyle(div, 'color', state.color);
2424
}
2525

2626
if ( changed.x || changed.y ) {
27-
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
27+
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
2828
}
2929
},
3030

‎test/js/samples/inline-style-optimized-url/expected-bundle.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ function createElement(name) {
2525
return document.createElement(name);
2626
}
2727

28+
function setStyle(node, key, value) {
29+
node.style.setProperty(key, value);
30+
}
31+
2832
function destroy(detach) {
2933
this.destroy = noop;
3034
this.fire('destroy');
@@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
163167
},
164168

165169
hydrate: function ( nodes ) {
166-
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
170+
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
167171
},
168172

169173
mount: function ( target, anchor ) {
@@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
172176

173177
update: function ( changed, state ) {
174178
if ( changed.data ) {
175-
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
179+
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
176180
}
177181
},
178182

‎test/js/samples/inline-style-optimized-url/expected.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
1+
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
22

33
function create_main_fragment ( state, component ) {
44
var div;
@@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
1010
},
1111

1212
hydrate: function ( nodes ) {
13-
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
13+
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
1414
},
1515

1616
mount: function ( target, anchor ) {
@@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
1919

2020
update: function ( changed, state ) {
2121
if ( changed.data ) {
22-
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
22+
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
2323
}
2424
},
2525

‎test/js/samples/inline-style-optimized/expected-bundle.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ function createElement(name) {
2525
return document.createElement(name);
2626
}
2727

28+
function setStyle(node, key, value) {
29+
node.style.setProperty(key, value);
30+
}
31+
2832
function destroy(detach) {
2933
this.destroy = noop;
3034
this.fire('destroy');
@@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
163167
},
164168

165169
hydrate: function ( nodes ) {
166-
div.style.setProperty('color', state.color);
170+
setStyle(div, 'color', state.color);
167171
},
168172

169173
mount: function ( target, anchor ) {
@@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
172176

173177
update: function ( changed, state ) {
174178
if ( changed.color ) {
175-
div.style.setProperty('color', state.color);
179+
setStyle(div, 'color', state.color);
176180
}
177181
},
178182

‎test/js/samples/inline-style-optimized/expected.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
1+
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
22

33
function create_main_fragment ( state, component ) {
44
var div;
@@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
1010
},
1111

1212
hydrate: function ( nodes ) {
13-
div.style.setProperty('color', state.color);
13+
setStyle(div, 'color', state.color);
1414
},
1515

1616
mount: function ( target, anchor ) {
@@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
1919

2020
update: function ( changed, state ) {
2121
if ( changed.color ) {
22-
div.style.setProperty('color', state.color);
22+
setStyle(div, 'color', state.color);
2323
}
2424
},
2525

0 commit comments

Comments
 (0)