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

important modifier for style directive

Browse Source
pull/7489/head
tanhauhau 4 years ago
parent 6ac7038e47
commit a2e1f6f2b6
16 changed files with 194 additions and 7 deletions
Show Stats Download Patch File Download Diff File

6
src/compiler/compile/compiler_errors.ts
Unescape View File

@ -281,5 +281,9 @@ export default {
invalid_component_style_directive: {
code: 'invalid-component-style-directive',
message: 'Style directives cannot be used on components'
}
},
invalid_style_directive_modifier: (valid: string) => ({
code: 'invalid-style-directive-modifier',
message: `Valid modifiers for style directives are: ${valid}`
})
};

27
src/compiler/compile/nodes/StyleDirective.ts
Unescape View File

@ -1,20 +1,42 @@
import { TemplateNode } from '../../interfaces';
import list from '../../utils/list';
import compiler_errors from '../compiler_errors';
import Component from '../Component';
import { nodes_to_template_literal } from '../utils/nodes_to_template_literal';
import Expression from './shared/Expression';
import Node from './shared/Node';
import TemplateScope from './shared/TemplateScope';
const valid_modifiers = new Set(['important']);
export default class StyleDirective extends Node {
type: 'StyleDirective';
name: string;
modifiers: Set<string>;
expression: Expression;
should_cache: boolean;
constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
constructor(
component: Component,
parent: Node,
scope: TemplateScope,
info: TemplateNode
) {
super(component, parent, scope, info);
this.name = info.name;
this.modifiers = new Set(info.modifiers);
for (const modifier of this.modifiers) {
if (!valid_modifiers.has(modifier)) {
component.error(
this,
compiler_errors.invalid_style_directive_modifier(
list([...valid_modifiers])
)
);
}
}
// Convert the value array to an expression so it's easier to handle
// the StyleDirective going forward.
@ -34,6 +56,9 @@ export default class StyleDirective extends Node {
this.expression = new Expression(component, this, scope, raw_expression);
this.should_cache = raw_expression.expressions.length > 0;
}
}
get important() {
return this.modifiers.has('important');
}
}

4
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -1095,7 +1095,7 @@ export default class ElementWrapper extends Wrapper {
add_styles(block: Block) {
const has_spread = this.node.attributes.some(attr => attr.is_spread);
this.node.styles.forEach((style_directive) => {
const { name, expression, should_cache } = style_directive;
const { name, expression, should_cache, important } = style_directive;
const snippet = expression.manipulate(block);
let cached_snippet;
@ -1104,7 +1104,7 @@ export default class ElementWrapper extends Wrapper {
block.add_variable(cached_snippet, snippet);
}
const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, false)`;
const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, ${important ? 'true' : 'false'})`;
block.chunks.hydrate.push(updater);

5
src/compiler/compile/render_ssr/handlers/Element.ts
Unescape View File

@ -44,7 +44,10 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);
const style_expression_list = node.styles.map(style_directive => {
const { name, expression: { node: expression } } = style_directive;
let { name, important, expression: { node: expression } } = style_directive;
if (important) {
expression = x`${expression} + ' !important'`;
}
return p`"${name}": ${expression}`;
});

1
src/compiler/parse/state/tag.ts
Unescape View File

@ -387,6 +387,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
end,
type,
name: directive_name,
modifiers,
value
};
}

1
test/parser/samples/attribute-style-directive-modifiers/input.svelte
Unescape View File

@ -0,0 +1 @@
<div style:color|important={myColor}></div>

50
test/parser/samples/attribute-style-directive-modifiers/output.json
Unescape View File

@ -0,0 +1,50 @@
{
"html": {
"start": 0,
"end": 43,
"type": "Fragment",
"children": [
{
"start": 0,
"end": 43,
"type": "Element",
"name": "div",
"attributes": [
{
"start": 5,
"end": 36,
"type": "StyleDirective",
"name": "color",
"modifiers": [
"important"
],
"value": [
{
"start": 27,
"end": 36,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 28,
"end": 35,
"loc": {
"start": {
"line": 1,
"column": 28
},
"end": {
"line": 1,
"column": 35
}
},
"name": "myColor"
}
}
]
}
],
"children": []
}
]
}
}

3
test/parser/samples/attribute-style-directive-shorthand/output.json
Unescape View File

@ -15,6 +15,7 @@
"end": 16,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": true
}
],
@ -22,4 +23,4 @@
}
]
}
}
}

9
test/parser/samples/attribute-style-directive-string/output.json
Unescape View File

@ -15,6 +15,7 @@
"end": 22,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 18,
@ -45,6 +46,7 @@
"start": 35,
"end": 52,
"type": "StyleDirective",
"modifiers": [],
"name": "color",
"value": [
{
@ -77,6 +79,7 @@
"end": 80,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 77,
@ -108,6 +111,7 @@
"end": 120,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 106,
@ -160,6 +164,7 @@
"end": 160,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 146,
@ -212,6 +217,7 @@
"end": 198,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 185,
@ -264,6 +270,7 @@
"end": 245,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 223,
@ -352,4 +359,4 @@
}
]
}
}
}

1
test/parser/samples/attribute-style-directive/output.json
Unescape View File

@ -15,6 +15,7 @@
"end": 26,
"type": "StyleDirective",
"name": "color",
"modifiers": [],
"value": [
{
"start": 17,

26
test/runtime-puppeteer/samples/inline-style-directive-important/_config.js
Unescape View File

@ -0,0 +1,26 @@
export default {
html: `
<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
<h1 class="svelte-szzkfu">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
`,
ssrHtml: `
<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red important;">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
`,
test({ assert, target, window, component }) {
const h1s = target.querySelectorAll('h1');
assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(h1s[2])['backgroundColor'], 'rgb(255, 0, 0)');
component.color = 'yellow';
assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(h1s[2])['backgroundColor'], 'rgb(255, 255, 0)');
}
};

13
test/runtime-puppeteer/samples/inline-style-directive-important/main.svelte
Unescape View File

@ -0,0 +1,13 @@
<script>
export let color = 'red'
</script>
<h1 style:background-color={color} >hello</h1>
<h1 style:background-color="{color} important">hello</h1>
<h1 style:background-color|important="{color}">hello</h1>
<style>
h1 {
background-color: blue !important;
}
</style>

26
test/runtime/samples/inline-style-directive-important/_config.js
Unescape View File

@ -0,0 +1,26 @@
export default {
html: `
<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
<h1 class="svelte-szzkfu">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
`,
ssrHtml: `
<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red important;">hello</h1>
<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
`,
skip: true,
test({ assert, target, window, component }) {
const h1s = target.querySelectorAll('h1');
assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'blue'); // TODO: This should be blue but ends up being red
assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'blue');
assert.equal(window.getComputedStyle(h1s[2])['backgroundColor'], 'red');
component.color = 'yellow';
assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'blue');
assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'blue');
assert.equal(window.getComputedStyle(h1s[2])['backgroundColor'], 'yellow');
}
};

13
test/runtime/samples/inline-style-directive-important/main.svelte
Unescape View File

@ -0,0 +1,13 @@
<script>
export let color = 'red'
</script>
<h1 style:background-color={color} >hello</h1>
<h1 style:background-color="{color} important">hello</h1>
<h1 style:background-color|important="{color}">hello</h1>
<style>
h1 {
background-color: blue !important;
}
</style>

15
test/validator/samples/style-directive-modifiers-invalid/errors.json
Unescape View File

@ -0,0 +1,15 @@
[{
"message": "Valid modifiers for style directives are: important",
"code": "invalid-style-directive-modifier",
"start": {
"line": 1,
"column": 8,
"character": 8
},
"end": {
"line": 1,
"column": 29,
"character": 29
},
"pos": 8
}]

1
test/validator/samples/style-directive-modifiers-invalid/input.svelte
Unescape View File

@ -0,0 +1 @@
<button style:color|bad='red'></button>
Write Preview
Loading…
Cancel
Save