mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
commit
282634d01b
|
Before Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,69 @@
|
|||||||
|
import EventHandler from '../../../nodes/EventHandler';
|
||||||
|
import Wrapper from '../shared/Wrapper';
|
||||||
|
import Block from '../../Block';
|
||||||
|
import { b, x, p } from 'code-red';
|
||||||
|
|
||||||
|
const TRUE = x`true`;
|
||||||
|
const FALSE = x`false`;
|
||||||
|
|
||||||
|
export default class EventHandlerWrapper {
|
||||||
|
node: EventHandler;
|
||||||
|
parent: Wrapper;
|
||||||
|
|
||||||
|
constructor(node: EventHandler, parent: Wrapper) {
|
||||||
|
this.node = node;
|
||||||
|
this.parent = parent;
|
||||||
|
|
||||||
|
if (!node.expression) {
|
||||||
|
this.parent.renderer.component.add_var({
|
||||||
|
name: node.handler_name.name,
|
||||||
|
internal: true,
|
||||||
|
referenced: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.parent.renderer.component.partly_hoisted.push(b`
|
||||||
|
function ${node.handler_name.name}(event) {
|
||||||
|
@bubble($$self, event);
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get_snippet(block) {
|
||||||
|
const snippet = this.node.expression ? this.node.expression.manipulate(block) : x`#ctx.${this.node.handler_name}`;
|
||||||
|
|
||||||
|
if (this.node.reassigned) {
|
||||||
|
block.maintain_context = true;
|
||||||
|
return x`function () { ${snippet}.apply(this, arguments); }`;
|
||||||
|
}
|
||||||
|
return snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(block: Block, target: string) {
|
||||||
|
let snippet = this.get_snippet(block);
|
||||||
|
|
||||||
|
if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
|
||||||
|
if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
|
||||||
|
if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`;
|
||||||
|
|
||||||
|
const args = [];
|
||||||
|
|
||||||
|
const opts = ['passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod));
|
||||||
|
if (opts.length) {
|
||||||
|
args.push((opts.length === 1 && opts[0] === 'capture')
|
||||||
|
? TRUE
|
||||||
|
: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
|
||||||
|
} else if (block.renderer.options.dev) {
|
||||||
|
args.push(FALSE);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (block.renderer.options.dev) {
|
||||||
|
args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
|
||||||
|
args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.event_listeners.push(
|
||||||
|
x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,39 +1,10 @@
|
|||||||
import Block from '../../Block';
|
import Block from '../../Block';
|
||||||
import EventHandler from '../../../nodes/EventHandler';
|
import EventHandler from '../Element/EventHandler';
|
||||||
import { x, p } from 'code-red';
|
|
||||||
|
|
||||||
const TRUE = x`true`;
|
|
||||||
const FALSE = x`false`;
|
|
||||||
|
|
||||||
export default function add_event_handlers(
|
export default function add_event_handlers(
|
||||||
block: Block,
|
block: Block,
|
||||||
target: string,
|
target: string,
|
||||||
handlers: EventHandler[]
|
handlers: EventHandler[]
|
||||||
) {
|
) {
|
||||||
handlers.forEach(handler => {
|
handlers.forEach(handler => handler.render(block, target));
|
||||||
let snippet = handler.render(block);
|
|
||||||
if (handler.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
|
|
||||||
if (handler.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
|
|
||||||
if (handler.modifiers.has('self')) snippet = x`@self(${snippet})`;
|
|
||||||
|
|
||||||
const args = [];
|
|
||||||
|
|
||||||
const opts = ['passive', 'once', 'capture'].filter(mod => handler.modifiers.has(mod));
|
|
||||||
if (opts.length) {
|
|
||||||
args.push((opts.length === 1 && opts[0] === 'capture')
|
|
||||||
? TRUE
|
|
||||||
: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
|
|
||||||
} else if (block.renderer.options.dev) {
|
|
||||||
args.push(FALSE);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (block.renderer.options.dev) {
|
|
||||||
args.push(handler.modifiers.has('stopPropagation') ? TRUE : FALSE);
|
|
||||||
args.push(handler.modifiers.has('preventDefault') ? TRUE : FALSE);
|
|
||||||
}
|
|
||||||
|
|
||||||
block.event_listeners.push(
|
|
||||||
x`@listen(${target}, "${handler.name}", ${snippet}, ${args})`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,156 +1,8 @@
|
|||||||
import { walk } from 'estree-walker';
|
import { Node } from 'estree';
|
||||||
import is_reference from 'is-reference';
|
import { analyze, Scope, extract_names, extract_identifiers } from 'periscopic';
|
||||||
import { Node, VariableDeclaration, ClassDeclaration, VariableDeclarator, ObjectPattern, Property, RestElement, ArrayPattern, Identifier } from 'estree';
|
|
||||||
import get_object from './get_object';
|
|
||||||
|
|
||||||
// TODO replace this with periscopic?
|
|
||||||
export function create_scopes(expression: Node) {
|
export function create_scopes(expression: Node) {
|
||||||
const map = new WeakMap();
|
return analyze(expression);
|
||||||
|
|
||||||
const globals: Map<string, Node> = new Map();
|
|
||||||
let scope = new Scope(null, false);
|
|
||||||
|
|
||||||
walk(expression, {
|
|
||||||
enter(node, parent) {
|
|
||||||
if (node.type === 'ImportDeclaration') {
|
|
||||||
node.specifiers.forEach(specifier => {
|
|
||||||
scope.declarations.set(specifier.local.name, specifier);
|
|
||||||
});
|
|
||||||
} else if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
|
|
||||||
if (node.type === 'FunctionDeclaration') {
|
|
||||||
scope.declarations.set(node.id.name, node);
|
|
||||||
scope = new Scope(scope, false);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else {
|
|
||||||
scope = new Scope(scope, false);
|
|
||||||
map.set(node, scope);
|
|
||||||
if (node.type === 'FunctionExpression' && node.id) {
|
|
||||||
scope.declarations.set(node.id.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
node.params.forEach((param) => {
|
|
||||||
extract_names(param).forEach(name => {
|
|
||||||
scope.declarations.set(name, node);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else if (/For(?:In|Of)?Statement/.test(node.type)) {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else if (node.type === 'BlockStatement') {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
} else if (node.type === 'ClassDeclaration' || node.type === 'VariableDeclaration') {
|
|
||||||
scope.add_declaration(node);
|
|
||||||
} else if (node.type === 'CatchClause') {
|
|
||||||
scope = new Scope(scope, true);
|
|
||||||
map.set(node, scope);
|
|
||||||
|
|
||||||
extract_names(node.param).forEach(name => {
|
|
||||||
scope.declarations.set(name, node.param);
|
|
||||||
});
|
|
||||||
} else if (node.type === 'Identifier' && is_reference(node as Node, parent as Node)) {
|
|
||||||
if (!scope.has(node.name) && !globals.has(node.name)) {
|
|
||||||
globals.set(node.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
leave(node: Node) {
|
|
||||||
if (map.has(node)) {
|
|
||||||
scope = scope.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
scope.declarations.forEach((_node, name) => {
|
|
||||||
globals.delete(name);
|
|
||||||
});
|
|
||||||
|
|
||||||
return { map, scope, globals };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Scope {
|
export { Scope, extract_names, extract_identifiers };
|
||||||
parent: Scope;
|
|
||||||
block: boolean;
|
|
||||||
|
|
||||||
declarations: Map<string, Node> = new Map();
|
|
||||||
initialised_declarations: Set<string> = new Set();
|
|
||||||
|
|
||||||
constructor(parent: Scope, block: boolean) {
|
|
||||||
this.parent = parent;
|
|
||||||
this.block = block;
|
|
||||||
}
|
|
||||||
|
|
||||||
add_declaration(node: VariableDeclaration | ClassDeclaration) {
|
|
||||||
if (node.type === 'VariableDeclaration') {
|
|
||||||
if (node.kind === 'var' && this.block && this.parent) {
|
|
||||||
this.parent.add_declaration(node);
|
|
||||||
} else {
|
|
||||||
node.declarations.forEach((declarator: VariableDeclarator) => {
|
|
||||||
extract_names(declarator.id).forEach(name => {
|
|
||||||
this.declarations.set(name, node);
|
|
||||||
if (declarator.init) this.initialised_declarations.add(name);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.declarations.set(node.id.name, node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
find_owner(name: string): Scope {
|
|
||||||
if (this.declarations.has(name)) return this;
|
|
||||||
return this.parent && this.parent.find_owner(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
has(name: string): boolean {
|
|
||||||
return (
|
|
||||||
this.declarations.has(name) || (this.parent && this.parent.has(name))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extract_names(param: Node): string[] {
|
|
||||||
return extract_identifiers(param).map((node: any) => node.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extract_identifiers(param: Node): Identifier[] {
|
|
||||||
const nodes: Identifier[] = [];
|
|
||||||
extractors[param.type] && extractors[param.type](nodes, param);
|
|
||||||
return nodes;
|
|
||||||
}
|
|
||||||
|
|
||||||
const extractors = {
|
|
||||||
Identifier(nodes: Node[], param: Node) {
|
|
||||||
nodes.push(param);
|
|
||||||
},
|
|
||||||
|
|
||||||
MemberExpression(nodes: Node[], param: Node) {
|
|
||||||
nodes.push(get_object(param));
|
|
||||||
},
|
|
||||||
|
|
||||||
ObjectPattern(nodes: Node[], param: ObjectPattern) {
|
|
||||||
param.properties.forEach((prop: Property | RestElement) => {
|
|
||||||
if (prop.type === 'RestElement') {
|
|
||||||
nodes.push(prop.argument);
|
|
||||||
} else {
|
|
||||||
extractors[prop.value.type](nodes, prop.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
ArrayPattern(nodes: Node[], param: ArrayPattern) {
|
|
||||||
param.elements.forEach((element: Node) => {
|
|
||||||
if (element) extractors[element.type](nodes, element);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
RestElement(nodes: Node[], param: any) {
|
|
||||||
extractors[param.argument.type](nodes, param.argument);
|
|
||||||
},
|
|
||||||
|
|
||||||
AssignmentPattern(nodes: Node[], param: any) {
|
|
||||||
extractors[param.left.type](nodes, param.left);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|||||||
@ -1,19 +1,3 @@
|
|||||||
declare module '*.svelte' {
|
declare module '*.svelte' {
|
||||||
type Props = Record<string, any>;
|
export { SvelteComponentDev as default } from 'svelte/internal';
|
||||||
|
|
||||||
export default class {
|
|
||||||
constructor(options: {
|
|
||||||
target: Element;
|
|
||||||
anchor?: Element;
|
|
||||||
props?: Props;
|
|
||||||
hydrate?: boolean;
|
|
||||||
intro?: boolean;
|
|
||||||
});
|
|
||||||
|
|
||||||
$set(props: Props): void;
|
|
||||||
$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void;
|
|
||||||
$destroy(): void;
|
|
||||||
|
|
||||||
[accessor: string]: any;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
p.svelte-xyz{color:red}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<p class=" svelte-xyz">Foo</p>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<style>p { color: red; }</style>
|
||||||
|
|
||||||
|
<p class={undefined}>Foo</p>
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
` 9: <style>
|
||||||
|
10: .foo {color: red;}
|
||||||
|
11: .fooaa {color: red;}
|
||||||
|
^
|
||||||
|
12: .foobb {color: red;}
|
||||||
|
13: .foocc {color: red;}`,
|
||||||
|
start: { line: 11, column: 2, character: 206 },
|
||||||
|
end: { line: 11, column: 8, character: 212 },
|
||||||
|
pos: 206,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`10: .foo {color: red;}
|
||||||
|
11: .fooaa {color: red;}
|
||||||
|
12: .foobb {color: red;}
|
||||||
|
^
|
||||||
|
13: .foocc {color: red;}
|
||||||
|
14: .foodd {color: red;}`,
|
||||||
|
start: { line: 12, column: 2, character: 229 },
|
||||||
|
end: { line: 12, column: 8, character: 235 },
|
||||||
|
pos: 229,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`12: .foobb {color: red;}
|
||||||
|
13: .foocc {color: red;}
|
||||||
|
14: .foodd {color: red;}
|
||||||
|
^
|
||||||
|
15: .aa {color: red;}
|
||||||
|
16: .bb {color: red;}`,
|
||||||
|
start: { line: 14, column: 2, character: 275 },
|
||||||
|
end: { line: 14, column: 8, character: 281 },
|
||||||
|
pos: 275,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`18: .dd {color: red;}
|
||||||
|
19: .aabar {color: red;}
|
||||||
|
20: .bbbar {color: red;}
|
||||||
|
^
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}`,
|
||||||
|
start: { line: 20, column: 2, character: 401 },
|
||||||
|
end: { line: 20, column: 8, character: 407 },
|
||||||
|
pos: 401,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`19: .aabar {color: red;}
|
||||||
|
20: .bbbar {color: red;}
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
^
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}`,
|
||||||
|
start: { line: 21, column: 2, character: 424 },
|
||||||
|
end: { line: 21, column: 8, character: 430 },
|
||||||
|
pos: 424,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`20: .bbbar {color: red;}
|
||||||
|
21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
^
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}`,
|
||||||
|
start: { line: 22, column: 2, character: 447 },
|
||||||
|
end: { line: 22, column: 8, character: 453 },
|
||||||
|
pos: 447,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`21: .ccbar {color: red;}
|
||||||
|
22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
^
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
25: .fooccbar {color: red;}`,
|
||||||
|
start: { line: 23, column: 2, character: 470 },
|
||||||
|
end: { line: 23, column: 11, character: 479 },
|
||||||
|
pos: 470,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`22: .ddbar {color: red;}
|
||||||
|
23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
^
|
||||||
|
25: .fooccbar {color: red;}
|
||||||
|
26: .fooddbar {color: red;}`,
|
||||||
|
start: { line: 24, column: 2, character: 496 },
|
||||||
|
end: { line: 24, column: 11, character: 505 },
|
||||||
|
pos: 496,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`23: .fooaabar {color: red;}
|
||||||
|
24: .foobbbar {color: red;}
|
||||||
|
25: .fooccbar {color: red;}
|
||||||
|
^
|
||||||
|
26: .fooddbar {color: red;}
|
||||||
|
27: .baz {color: red;}`,
|
||||||
|
start: { line: 25, column: 2, character: 522 },
|
||||||
|
end: { line: 25, column: 11, character: 531 },
|
||||||
|
pos: 522,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame:
|
||||||
|
`26: .fooddbar {color: red;}
|
||||||
|
27: .baz {color: red;}
|
||||||
|
28: .unused {color: red;}
|
||||||
|
^
|
||||||
|
29: </style>`,
|
||||||
|
start: { line: 28, column: 2, character: 595 },
|
||||||
|
end: { line: 28, column: 9, character: 602 },
|
||||||
|
pos: 595,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.foo.svelte-xyz{color:red}.foocc.svelte-xyz{color:red}.aa.svelte-xyz{color:red}.bb.svelte-xyz{color:red}.cc.svelte-xyz{color:red}.dd.svelte-xyz{color:red}.aabar.svelte-xyz{color:red}.fooddbar.svelte-xyz{color:red}.baz.svelte-xyz{color:red}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
export let a, b, c;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="foo{a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}bar baz {a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.foo {color: red;}
|
||||||
|
.fooaa {color: red;}
|
||||||
|
.foobb {color: red;}
|
||||||
|
.foocc {color: red;}
|
||||||
|
.foodd {color: red;}
|
||||||
|
.aa {color: red;}
|
||||||
|
.bb {color: red;}
|
||||||
|
.cc {color: red;}
|
||||||
|
.dd {color: red;}
|
||||||
|
.aabar {color: red;}
|
||||||
|
.bbbar {color: red;}
|
||||||
|
.ccbar {color: red;}
|
||||||
|
.ddbar {color: red;}
|
||||||
|
.fooaabar {color: red;}
|
||||||
|
.foobbbar {color: red;}
|
||||||
|
.fooccbar {color: red;}
|
||||||
|
.fooddbar {color: red;}
|
||||||
|
.baz {color: red;}
|
||||||
|
.unused {color: red;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}.hover.unused.svelte-xyz{color:blue}.unused.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
export let hover;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : hover}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
.hover { color: blue; }
|
||||||
|
.hover.unused { color: blue; }
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
end: {
|
||||||
|
character: 205,
|
||||||
|
column: 9,
|
||||||
|
line: 14,
|
||||||
|
},
|
||||||
|
frame: `
|
||||||
|
12: .thing.active {color: blue;}
|
||||||
|
13:
|
||||||
|
14: .unused {color: blue;}
|
||||||
|
^
|
||||||
|
15: </style>`,
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
pos: 198,
|
||||||
|
start: {
|
||||||
|
character: 198,
|
||||||
|
column: 2,
|
||||||
|
line: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : ''}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame: `
|
||||||
|
13: .thing.active {color: blue;}
|
||||||
|
14: .hover { color: blue; }
|
||||||
|
15: .hover.unused { color: blue; }
|
||||||
|
^
|
||||||
|
16:
|
||||||
|
17: .unused {color: blue;}`,
|
||||||
|
start: { line: 15, column: 2, character: 261 },
|
||||||
|
end: { line: 15, column: 15, character: 274 },
|
||||||
|
pos: 261,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
message: 'Unused CSS selector',
|
||||||
|
frame: `
|
||||||
|
15: .hover.unused { color: blue; }
|
||||||
|
16:
|
||||||
|
17: .unused {color: blue;}
|
||||||
|
^
|
||||||
|
18: </style>`,
|
||||||
|
start: { line: 17, column: 2, character: 295 },
|
||||||
|
end: { line: 17, column: 9, character: 302 },
|
||||||
|
pos: 295,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
export let active;
|
||||||
|
export let hover;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="thing {active ? 'active' : hover ? 'hover' : ''}">
|
||||||
|
some stuff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.thing {color: blue;}
|
||||||
|
.active {color: blue;}
|
||||||
|
.thing.active {color: blue;}
|
||||||
|
.hover { color: blue; }
|
||||||
|
.hover.unused { color: blue; }
|
||||||
|
|
||||||
|
.unused {color: blue;}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
attr,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
run_all,
|
||||||
|
safe_not_equal,
|
||||||
|
space
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let input0;
|
||||||
|
let t;
|
||||||
|
let input1;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
input0 = element("input");
|
||||||
|
t = space();
|
||||||
|
input1 = element("input");
|
||||||
|
attr(input0, "type", "file");
|
||||||
|
attr(input1, "type", "file");
|
||||||
|
|
||||||
|
dispose = [
|
||||||
|
listen(input0, "change", ctx.input0_change_handler),
|
||||||
|
listen(input1, "change", ctx.input1_change_handler)
|
||||||
|
];
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, input0, anchor);
|
||||||
|
insert(target, t, anchor);
|
||||||
|
insert(target, input1, anchor);
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(input0);
|
||||||
|
if (detaching) detach(t);
|
||||||
|
if (detaching) detach(input1);
|
||||||
|
run_all(dispose);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { files } = $$props;
|
||||||
|
|
||||||
|
function input0_change_handler() {
|
||||||
|
files = this.files;
|
||||||
|
$$invalidate("files", files);
|
||||||
|
}
|
||||||
|
|
||||||
|
function input1_change_handler() {
|
||||||
|
files = this.files;
|
||||||
|
$$invalidate("files", files);
|
||||||
|
}
|
||||||
|
|
||||||
|
$$self.$set = $$props => {
|
||||||
|
if ("files" in $$props) $$invalidate("files", files = $$props.files);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
files,
|
||||||
|
input0_change_handler,
|
||||||
|
input1_change_handler
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, { files: 0 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let files;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="file" bind:files>
|
||||||
|
<input bind:files type="file">
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue