Merge pull request #3435 from sveltejs/gh-1834

Handle !important in inline styles
pull/3451/head
Rich Harris 5 years ago committed by GitHub
commit b567eb2677
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -10,6 +10,7 @@ import Text from '../../../nodes/Text';
export interface StyleProp { export interface StyleProp {
key: string; key: string;
value: Array<Text|Expression>; value: Array<Text|Expression>;
important: boolean;
} }
export default class StyleAttributeWrapper extends AttributeWrapper { export default class StyleAttributeWrapper extends AttributeWrapper {
@ -50,7 +51,7 @@ export default class StyleAttributeWrapper extends AttributeWrapper {
block.builders.update.add_conditional( block.builders.update.add_conditional(
condition, condition,
`@set_style(${this.parent.var}, "${prop.key}", ${value});` `@set_style(${this.parent.var}, "${prop.key}", ${value}${prop.important ? ', 1' : ''});`
); );
} }
} else { } else {
@ -58,7 +59,7 @@ export default class StyleAttributeWrapper extends AttributeWrapper {
} }
block.builders.hydrate.add_line( block.builders.hydrate.add_line(
`@set_style(${this.parent.var}, "${prop.key}", ${value});` `@set_style(${this.parent.var}, "${prop.key}", ${value}${prop.important ? ', 1' : ''});`
); );
}); });
} }
@ -96,7 +97,7 @@ function optimize_style(value: Array<Text|Expression>) {
const result = get_style_value(chunks); const result = get_style_value(chunks);
props.push({ key, value: result.value }); props.push({ key, value: result.value, important: result.important });
chunks = result.chunks; chunks = result.chunks;
} }
@ -168,9 +169,19 @@ function get_style_value(chunks: Array<Text | Expression>) {
} }
} }
let important = false;
const last_chunk = value[value.length - 1];
if (last_chunk && last_chunk.type === 'Text' && /\s*!important\s*$/.test(last_chunk.data)) {
important = true;
last_chunk.data = last_chunk.data.replace(/\s*!important\s*$/, '');
if (!last_chunk.data) value.pop();
}
return { return {
chunks, chunks,
value value,
important
}; };
} }

@ -183,8 +183,8 @@ export function set_input_type(input, type) {
} }
} }
export function set_style(node, key, value) { export function set_style(node, key, value, important) {
node.style.setProperty(key, value); node.style.setProperty(key, value, important ? 'important' : '');
} }
export function select_option(select, value) { export function select_option(select, value) {

@ -0,0 +1,18 @@
export default {
html: `
<p class="svelte-y94hdy" style="color: red !important; font-size: 20px !important; opacity: 1;">red</p>
`,
test({ assert, component, target, window }) {
const p = target.querySelector('p');
let styles = window.getComputedStyle(p);
assert.equal(styles.color, 'red');
assert.equal(styles.fontSize, '20px');
component.color = 'green';
styles = window.getComputedStyle(p);
assert.equal(styles.color, 'green');
}
}

@ -0,0 +1,12 @@
<script>
export let color = `red`;
</script>
<p style="color: {color} !important; font-size: 20px !important; opacity: 1;">{color}</p>
<style>
p {
color: blue !important;
font-size: 10px !important;
}
</style>
Loading…
Cancel
Save