remove support for CSS ref selectors, remove some other unused code

src/compile/css/Selector.ts

@@ -71,18 +71,6 @@ export default class Selector {
 
 				break;
 			}
-
-			i = block.selectors.length;
-			while (i--) {
-				const selector = block.selectors[i];
-
-				if (selector.type === 'RefSelector') {
-					code.overwrite(selector.start, selector.end, `.svelte-ref-${selector.name}`, {
-						contentOnly: true,
-						storeName: false
-					});
-				}
-			}
 		}
 
 		this.blocks.forEach((block, i) => {
@@ -173,15 +161,6 @@ function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stac
 			if (node.name.toLowerCase() !== selector.name.toLowerCase() && selector.name !== '*') return false;
 		}
 
-		else if (selector.type === 'RefSelector') {
-			if (node.ref && node.ref.name === selector.name) {
-				stylesheet.nodesWithRefCssClass.set(selector.name, node);
-				toEncapsulate.push({ node, block });
-				return true;
-			}
-			return;
-		}
-
 		else {
 			// bail. TODO figure out what these could be
 			toEncapsulate.push({ node, block });

src/compile/css/Stylesheet.ts

@@ -342,9 +342,6 @@ export default class Stylesheet {
 		this.nodesWithCssClass.forEach((node: Node) => {
 			node.addCssClass();
 		});
-		this.nodesWithRefCssClass.forEach((node: Node, name: String) => {
-			node.addCssClass(`svelte-ref-${name}`);
-		})
 	}
 
 	render(cssOutputFilename: string, shouldTransformSelectors: boolean) {

src/compile/nodes/Element.ts

@@ -13,7 +13,6 @@ import { namespaces } from '../../utils/namespaces';
 import mapChildren from './shared/mapChildren';
 import { dimensions } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
-import Ref from './Ref';
 import list from '../../utils/list';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
@@ -86,8 +85,6 @@ export default class Element extends Node {
 	outro?: Transition = null;
 	animation?: Animation = null;
 	children: Node[];
-
-	ref: Ref;
 	namespace: string;
 
 	constructor(component, parent, scope, info: any) {
@@ -181,10 +178,6 @@ export default class Element extends Node {
 					this.animation = new Animation(component, this, scope, node);
 					break;
 
-				case 'Ref':
-					this.ref = new Ref(component, this, scope, node);
-					break;
-
 				default:
 					throw new Error(`Not implemented: ${node.type}`);
 			}

src/compile/nodes/InlineComponent.ts

@@ -5,7 +5,6 @@ import Binding from './Binding';
 import EventHandler from './EventHandler';
 import Expression from './shared/Expression';
 import Component from '../Component';
-import Ref from './Ref';
 
 export default class InlineComponent extends Node {
 	type: 'InlineComponent';
@@ -15,7 +14,6 @@ export default class InlineComponent extends Node {
 	bindings: Binding[];
 	handlers: EventHandler[];
 	children: Node[];
-	ref: Ref;
 
 	constructor(component: Component, parent, scope, info) {
 		super(component, parent, scope, info);
@@ -62,10 +60,6 @@ export default class InlineComponent extends Node {
 					this.handlers.push(new EventHandler(component, this, scope, node));
 					break;
 
-				case 'Ref':
-					this.ref = new Ref(component, this, scope, node);
-					break;
-
 				case 'Transition':
 					component.error(node, {
 						code: `invalid-transition`,

src/compile/nodes/Ref.ts

@@ -1,31 +0,0 @@
-import Node from './shared/Node';
-import isValidIdentifier from '../../utils/isValidIdentifier';
-
-export default class Ref extends Node {
-	type: 'Ref';
-	name: string;
-
-	constructor(component, parent, scope, info) {
-		super(component, parent, scope, info);
-
-		if (parent.ref) {
-			component.error({
-				code: 'duplicate-refs',
-				message: `Duplicate refs`
-			});
-		}
-
-		if (!isValidIdentifier(info.name)) {
-			const suggestion = info.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
-
-			component.error(info, {
-				code: `invalid-reference-name`,
-				message: `Reference name '${info.name}' is invalid — must be a valid identifier such as ${suggestion}`
-			});
-		} else {
-			component.refs.add(info.name);
-		}
-
-		this.name = info.name;
-	}
-}

src/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -345,7 +345,6 @@ export default class InlineComponentWrapper extends Wrapper {
 			block.builders.mount.addBlock(deindent`
 				if (${name}) {
 					@mount_component(${name}, ${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
-					${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`}
 				}
 			`);
 
@@ -381,15 +380,8 @@ export default class InlineComponentWrapper extends Wrapper {
 						${this.node.handlers.map(handler => deindent`
 							${name}.$on("${handler.name}", ${handler.var});
 						`)}
-
-						${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`}
 					} else {
 						${name} = null;
-						${this.node.ref && deindent`
-						if (#component.$$.refs.${this.node.ref.name} === ${name}) {
-							#component.$$.refs.${this.node.ref.name} = null;
-							#component.$$.inject_refs(#component.$$.refs);
-						}`}
 					}
 				}
 			`);
@@ -418,8 +410,6 @@ export default class InlineComponentWrapper extends Wrapper {
 
 				${munged_bindings}
 				${munged_handlers}
-
-				${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`}
 			`);
 
 			block.builders.create.addLine(`${name}.$$.fragment.c();`);
@@ -444,12 +434,6 @@ export default class InlineComponentWrapper extends Wrapper {
 
 			block.builders.destroy.addBlock(deindent`
 				${name}.$destroy(${parentNode ? '' : 'detach'});
-				${this.node.ref && deindent`
-					if (#component.$$.refs.${this.node.ref.name} === ${name}) {
-						#component.$$.refs.${this.node.ref.name} = null;
-						#component.$$.inject_refs(#component.$$.refs);
-					}
-				`}
 			`);
 		}
 

src/parse/read/style.ts

@@ -38,12 +38,10 @@ export default function readStyle(parser: Parser, start: number, attributes: Nod
 					const b = node.children[i + 1];
 
 					if (isRefSelector(a, b)) {
-						node.children.splice(i, 2, {
+						parser.error({
-							type: 'RefSelector',
+							code: `invalid-ref-selector`,
-							start: a.loc.start.offset,
+							message: 'ref selectors are no longer supported'
-							end: b.loc.end.offset,
+						}, a.loc.start.offset);
-							name: b.name
-						});
 					}
 				}
 			}

src/parse/state/tag.ts

@@ -390,6 +390,13 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
 	if (type) {
 		const [directive_name, ...modifiers] = name.slice(colon_index + 1).split('|');
 
+		if (type === 'Ref') {
+			parser.error({
+				code: `invalid-ref-directive`,
+				message: `The ref directive is no longer supported — use \`bind:this={${directive_name}}\` instead`
+			}, start);
+		}
+
 		if (value[0]) {
 			if (value.length > 1 || value[0].type === 'Text') {
 				parser.error({

test/css/samples/refs-qualified/_config.js

@@ -1,28 +0,0 @@
-export default {
-	props: {
-		active: true
-	},
-
-	warnings: [{
-		code: `css-unused-selector`,
-		message: 'Unused CSS selector',
-		start: {
-			column: 1,
-			line: 17,
-			character: 222
-		},
-		end: {
-			column: 20,
-			line: 17,
-			character: 241
-		},
-		pos: 222,
-		frame: `
-			15:   }
-			16:
-			17:   ref:button.inactive {
-			      ^
-			18:     color: green;
-			19:   }`
-	}]
-};

test/css/samples/refs-qualified/expected.css

@@ -1 +0,0 @@
-.svelte-ref-button.active.svelte-xyz{color:red}

test/css/samples/refs-qualified/expected.html

@@ -1 +0,0 @@
-<button class="active svelte-xyz svelte-ref-button">deactivate</button>

test/css/samples/refs-qualified/input.html

@@ -1,20 +0,0 @@
-<script>
-	export let active;
-	let button;
-</script>
-
-{#if active}
-	<button ref:button class='active'>deactivate</button>
-{:else}
-	<button ref:button>activate</button>
-{/if}
-
-<style>
-	ref:button.active {
-		color: red;
-	}
-
-	ref:button.inactive {
-		color: green;
-	}
-</style>

test/css/samples/refs/_config.js

@@ -1,24 +0,0 @@
-export default {
-	warnings: [{
-		code: `css-unused-selector`,
-		message: 'Unused CSS selector',
-		start: {
-			column: 1,
-			line: 14,
-			character: 120
-		},
-		end: {
-			column: 6,
-			line: 14,
-			character: 125
-		},
-		pos: 120,
-		frame: `
-			12:   }
-			13:
-			14:   ref:d {
-			      ^
-			15:     color: blue;
-			16:   }`
-	}]
-};

test/css/samples/refs/expected.css

@@ -1 +0,0 @@
-.svelte-ref-a.svelte-xyz{color:red}.svelte-ref-b.svelte-xyz{color:green}

test/css/samples/refs/expected.html

@@ -1,3 +0,0 @@
-<div class="svelte-xyz svelte-ref-a"></div>
-<div class="svelte-xyz svelte-ref-b"></div>
-<div></div>

test/css/samples/refs/input.html

@@ -1,17 +0,0 @@
-<div ref:a></div>
-<div ref:b></div>
-<div ref:c></div>
-
-<style>
-	ref:a {
-		color: red;
-	}
-
-	ref:b {
-		color: green;
-	}
-
-	ref:d {
-		color: blue;
-	}
-</style>

test/validator/samples/ref-not-supported-in-css/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-ref-selector",
+	"message": "ref selectors are no longer supported",
+	"pos": 68,
+	"start": {
+		"line": 8,
+		"column": 1,
+		"character": 68
+	},
+	"end": {
+		"line": 8,
+		"column": 1,
+		"character": 68
+	}
+}]

test/validator/samples/ref-not-supported-in-css/input.html

@@ -0,0 +1,11 @@
+<script>
+	let foo;
+</script>
+
+<div bind:this={foo}></div>
+
+<style>
+	ref:foo {
+		color: red;
+	}
+</style>

test/validator/samples/ref-not-supported/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-ref-directive",
+	"message": "The ref directive is no longer supported — use `bind:this={foo}` instead",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	}
+}]

test/validator/samples/ref-not-supported/input.html

@@ -0,0 +1 @@
+<div ref:foo></div>