inline-style-editor 1.1.3 → 1.2.1

package/dist/inline-style-editor.mjs

@@ -1914,7 +1914,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	}
 
 	function _onChange(color) {
-		setValue(color.rgbaString);
+		setValue(color.hex);
 	}
 
 	onMount(() => {
@@ -2000,57 +2000,77 @@ function getFonts() {
         }
     }
 
-    return [...availableFonts.values()]
+    return [...listFonts(), ...availableFonts.values()]
+}
+
+function listFonts() {
+    let { fonts } = document;
+    const it = fonts.entries();
+
+    let arr = [];
+    let done = false;
+
+    while (!done) {
+        const font = it.next();
+        if (!font.done) {
+            arr.push(font.value[0].family);
+        } else {
+            done = font.done;
+        }
+    }
+
+    // converted to set then arr to filter repetitive values
+    return [...new Set(arr)];
 }
 
 /* src/components/InlineStyleEditor.svelte generated by Svelte v3.49.0 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[58] = list[i][0];
-	child_ctx[59] = list[i][1];
-	child_ctx[61] = list;
-	child_ctx[62] = i;
-	const constants_0 = /*choices*/ child_ctx[59].props[/*choices*/ child_ctx[59].selected];
-	child_ctx[60] = constants_0;
+	child_ctx[61] = list[i][0];
+	child_ctx[62] = list[i][1];
+	child_ctx[64] = list;
+	child_ctx[65] = i;
+	const constants_0 = /*choices*/ child_ctx[62].props[/*choices*/ child_ctx[62].selected];
+	child_ctx[63] = constants_0;
 	return child_ctx;
 }
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[63] = list[i];
+	child_ctx[66] = list[i];
 	return child_ctx;
 }
 
 function get_each_context_2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[66] = list[i];
-	child_ctx[68] = i;
+	child_ctx[69] = list[i];
+	child_ctx[71] = i;
 	return child_ctx;
 }
 
 function get_each_context_3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[69] = list[i];
-	child_ctx[71] = i;
+	child_ctx[72] = list[i];
+	child_ctx[74] = i;
 	return child_ctx;
 }
 
 function get_each_context_4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[72] = list[i];
-	child_ctx[74] = i;
+	child_ctx[75] = list[i];
+	child_ctx[77] = i;
 	return child_ctx;
 }
 
 function get_each_context_5(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[75] = list[i];
-	child_ctx[77] = i;
+	child_ctx[78] = list[i];
+	child_ctx[80] = i;
 	return child_ctx;
 }
 
-// (372:4) {#if targetsToSearch.length > 1}
+// (387:4) {#if targetsToSearch.length > 1}
 function create_if_block_7(ctx) {
 	let div;
 	let b;
@@ -2115,7 +2135,7 @@ function create_if_block_7(ctx) {
 	};
 }
 
-// (375:8) {#each targetsToSearch as target, elemIndex}
+// (390:8) {#each targetsToSearch as target, elemIndex}
 function create_each_block_5(ctx) {
 	let span;
 	let t0;
@@ -2125,16 +2145,16 @@ function create_each_block_5(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[32](/*elemIndex*/ ctx[77]);
+		return /*click_handler*/ ctx[32](/*elemIndex*/ ctx[80]);
 	}
 
 	return {
 		c() {
 			span = element("span");
 			t0 = text("Elem ");
-			t1 = text(/*elemIndex*/ ctx[77]);
+			t1 = text(/*elemIndex*/ ctx[80]);
 			t2 = space();
-			toggle_class(span, "selected", /*selectedElemIndex*/ ctx[4] === /*elemIndex*/ ctx[77]);
+			toggle_class(span, "selected", /*selectedElemIndex*/ ctx[4] === /*elemIndex*/ ctx[80]);
 		},
 		m(target, anchor) {
 			insert(target, span, anchor);
@@ -2151,7 +2171,7 @@ function create_each_block_5(ctx) {
 			ctx = new_ctx;
 
 			if (dirty[0] & /*selectedElemIndex*/ 16) {
-				toggle_class(span, "selected", /*selectedElemIndex*/ ctx[4] === /*elemIndex*/ ctx[77]);
+				toggle_class(span, "selected", /*selectedElemIndex*/ ctx[4] === /*elemIndex*/ ctx[80]);
 			}
 		},
 		d(detaching) {
@@ -2162,25 +2182,25 @@ function create_each_block_5(ctx) {
 	};
 }
 
-// (384:8) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
+// (399:8) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
 function create_each_block_4(ctx) {
 	let span;
-	let t_value = /*ruleName*/ ctx[72] + "";
+	let t_value = /*ruleName*/ ctx[75] + "";
 	let t;
 	let span_title_value;
 	let mounted;
 	let dispose;
 
 	function click_handler_1() {
-		return /*click_handler_1*/ ctx[33](/*ruleIndex*/ ctx[74]);
+		return /*click_handler_1*/ ctx[33](/*ruleIndex*/ ctx[77]);
 	}
 
 	return {
 		c() {
 			span = element("span");
 			t = text(t_value);
-			attr(span, "title", span_title_value = /*ruleName*/ ctx[72]);
-			toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[5] === /*ruleIndex*/ ctx[74]);
+			attr(span, "title", span_title_value = /*ruleName*/ ctx[75]);
+			toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[5] === /*ruleIndex*/ ctx[77]);
 		},
 		m(target, anchor) {
 			insert(target, span, anchor);
@@ -2193,14 +2213,14 @@ function create_each_block_4(ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*allRules, selectedElemIndex*/ 20 && t_value !== (t_value = /*ruleName*/ ctx[72] + "")) set_data(t, t_value);
+			if (dirty[0] & /*allRules, selectedElemIndex*/ 20 && t_value !== (t_value = /*ruleName*/ ctx[75] + "")) set_data(t, t_value);
 
-			if (dirty[0] & /*allRules, selectedElemIndex*/ 20 && span_title_value !== (span_title_value = /*ruleName*/ ctx[72])) {
+			if (dirty[0] & /*allRules, selectedElemIndex*/ 20 && span_title_value !== (span_title_value = /*ruleName*/ ctx[75])) {
 				attr(span, "title", span_title_value);
 			}
 
 			if (dirty[0] & /*selectedRuleIndex*/ 32) {
-				toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[5] === /*ruleIndex*/ ctx[74]);
+				toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[5] === /*ruleIndex*/ ctx[77]);
 			}
 		},
 		d(detaching) {
@@ -2211,17 +2231,17 @@ function create_each_block_4(ctx) {
 	};
 }
 
-// (395:12) {#if type !== 'custom' || (currentRule === 'inline' && type === 'custom' && hasDisplayedCustom )}
+// (410:12) {#if type !== 'custom' || (currentRule === 'inline' && type === 'custom' && hasDisplayedCustom )}
 function create_if_block_6(ctx) {
 	let span;
-	let t0_value = /*type*/ ctx[69] + "";
+	let t0_value = /*type*/ ctx[72] + "";
 	let t0;
 	let t1;
 	let mounted;
 	let dispose;
 
 	function click_handler_2() {
-		return /*click_handler_2*/ ctx[34](/*typeIndex*/ ctx[71]);
+		return /*click_handler_2*/ ctx[34](/*typeIndex*/ ctx[74]);
 	}
 
 	return {
@@ -2229,7 +2249,7 @@ function create_if_block_6(ctx) {
 			span = element("span");
 			t0 = text(t0_value);
 			t1 = space();
-			toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[6] === /*typeIndex*/ ctx[71]);
+			toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[6] === /*typeIndex*/ ctx[74]);
 		},
 		m(target, anchor) {
 			insert(target, span, anchor);
@@ -2243,10 +2263,10 @@ function create_if_block_6(ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*allTypes, selectedElemIndex*/ 24 && t0_value !== (t0_value = /*type*/ ctx[69] + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*allTypes, selectedElemIndex*/ 24 && t0_value !== (t0_value = /*type*/ ctx[72] + "")) set_data(t0, t0_value);
 
 			if (dirty[0] & /*selectedTypeIndex*/ 64) {
-				toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[6] === /*typeIndex*/ ctx[71]);
+				toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[6] === /*typeIndex*/ ctx[74]);
 			}
 		},
 		d(detaching) {
@@ -2257,10 +2277,10 @@ function create_if_block_6(ctx) {
 	};
 }
 
-// (393:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
+// (408:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
 function create_each_block_3(ctx) {
 	let if_block_anchor;
-	let if_block = (/*type*/ ctx[69] !== 'custom' || /*currentRule*/ ctx[7] === 'inline' && /*type*/ ctx[69] === 'custom' && /*hasDisplayedCustom*/ ctx[16]) && create_if_block_6(ctx);
+	let if_block = (/*type*/ ctx[72] !== 'custom' || /*currentRule*/ ctx[16] === 'inline' && /*type*/ ctx[72] === 'custom' && /*hasDisplayedCustom*/ ctx[15]) && create_if_block_6(ctx);
 
 	return {
 		c() {
@@ -2272,7 +2292,7 @@ function create_each_block_3(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (/*type*/ ctx[69] !== 'custom' || /*currentRule*/ ctx[7] === 'inline' && /*type*/ ctx[69] === 'custom' && /*hasDisplayedCustom*/ ctx[16]) {
+			if (/*type*/ ctx[72] !== 'custom' || /*currentRule*/ ctx[16] === 'inline' && /*type*/ ctx[72] === 'custom' && /*hasDisplayedCustom*/ ctx[15]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2292,12 +2312,12 @@ function create_each_block_3(ctx) {
 	};
 }
 
-// (400:4) {#if allTypes[selectedElemIndex]}
+// (415:4) {#if allTypes[selectedElemIndex]}
 function create_if_block(ctx) {
 	let div;
 	let t;
 	let current;
-	let each_value = Object.entries(/*propsByType*/ ctx[13]);
+	let each_value = Object.entries(/*propsByType*/ ctx[12]);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -2308,7 +2328,7 @@ function create_if_block(ctx) {
 		each_blocks[i] = null;
 	});
 
-	let if_block = /*currentRule*/ ctx[7] === 'inline' && /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[4]] !== null && create_if_block_1(ctx);
+	let if_block = /*currentRule*/ ctx[16] === 'inline' && /*bringableToFront*/ ctx[14][/*selectedElemIndex*/ ctx[4]] !== null && create_if_block_1(ctx);
 
 	return {
 		c() {
@@ -2334,8 +2354,8 @@ function create_if_block(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*allCurrentPropDefs, propsByType, updateProp*/ 286720) {
-				each_value = Object.entries(/*propsByType*/ ctx[13]);
+			if (dirty[0] & /*allCurrentPropDefs, propsByType, updateProp, deleteProp*/ 1323008) {
+				each_value = Object.entries(/*propsByType*/ ctx[12]);
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -2361,7 +2381,7 @@ function create_if_block(ctx) {
 				check_outros();
 			}
 
-			if (/*currentRule*/ ctx[7] === 'inline' && /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[4]] !== null) {
+			if (/*currentRule*/ ctx[16] === 'inline' && /*bringableToFront*/ ctx[14][/*selectedElemIndex*/ ctx[4]] !== null) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2400,10 +2420,10 @@ function create_if_block(ctx) {
 	};
 }
 
-// (411:16) {:else}
+// (426:16) {:else}
 function create_else_block(ctx) {
 	let span;
-	let t_value = /*selectedName*/ ctx[60] + "";
+	let t_value = /*selectedName*/ ctx[63] + "";
 	let t;
 
 	return {
@@ -2416,7 +2436,7 @@ function create_else_block(ctx) {
 			append(span, t);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*propsByType*/ 8192 && t_value !== (t_value = /*selectedName*/ ctx[60] + "")) set_data(t, t_value);
+			if (dirty[0] & /*propsByType*/ 4096 && t_value !== (t_value = /*selectedName*/ ctx[63] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(span);
@@ -2424,13 +2444,13 @@ function create_else_block(ctx) {
 	};
 }
 
-// (405:16) {#if choices.props.length > 1}
+// (420:16) {#if choices.props.length > 1}
 function create_if_block_5(ctx) {
 	let div;
 	let select;
 	let mounted;
 	let dispose;
-	let each_value_2 = /*choices*/ ctx[59].props;
+	let each_value_2 = /*choices*/ ctx[62].props;
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value_2.length; i += 1) {
@@ -2438,7 +2458,7 @@ function create_if_block_5(ctx) {
 	}
 
 	function change_handler(...args) {
-		return /*change_handler*/ ctx[35](/*choices*/ ctx[59], /*each_value*/ ctx[61], /*each_index*/ ctx[62], ...args);
+		return /*change_handler*/ ctx[35](/*choices*/ ctx[62], /*each_value*/ ctx[64], /*each_index*/ ctx[65], ...args);
 	}
 
 	return {
@@ -2466,8 +2486,8 @@ function create_if_block_5(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty[0] & /*propsByType*/ 8192) {
-				each_value_2 = /*choices*/ ctx[59].props;
+			if (dirty[0] & /*propsByType*/ 4096) {
+				each_value_2 = /*choices*/ ctx[62].props;
 				let i;
 
 				for (i = 0; i < each_value_2.length; i += 1) {
@@ -2498,10 +2518,10 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (407:24) {#each choices.props as propName, i}
+// (422:24) {#each choices.props as propName, i}
 function create_each_block_2(ctx) {
 	let option;
-	let t0_value = /*propName*/ ctx[66] + "";
+	let t0_value = /*propName*/ ctx[69] + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -2511,8 +2531,8 @@ function create_each_block_2(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*i*/ ctx[68] === /*choices*/ ctx[59].selected;
-			option.__value = /*i*/ ctx[68];
+			option.selected = option_selected_value = /*i*/ ctx[71] === /*choices*/ ctx[62].selected;
+			option.__value = /*i*/ ctx[71];
 			option.value = option.__value;
 		},
 		m(target, anchor) {
@@ -2521,9 +2541,9 @@ function create_each_block_2(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*propsByType*/ 8192 && t0_value !== (t0_value = /*propName*/ ctx[66] + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*propsByType*/ 4096 && t0_value !== (t0_value = /*propName*/ ctx[69] + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*propsByType*/ 8192 && option_selected_value !== (option_selected_value = /*i*/ ctx[68] === /*choices*/ ctx[59].selected)) {
+			if (dirty[0] & /*propsByType*/ 4096 && option_selected_value !== (option_selected_value = /*i*/ ctx[71] === /*choices*/ ctx[62].selected)) {
 				option.selected = option_selected_value;
 			}
 		},
@@ -2533,18 +2553,18 @@ function create_each_block_2(ctx) {
 	};
 }
 
-// (428:46) 
+// (445:46) 
 function create_if_block_4(ctx) {
 	let colorpicker;
 	let current;
 
 	function func(...args) {
-		return /*func*/ ctx[38](/*selectedName*/ ctx[60], ...args);
+		return /*func*/ ctx[39](/*selectedName*/ ctx[63], ...args);
 	}
 
 	colorpicker = new ColorPicker$1({
 			props: {
-				value: /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value,
+				value: /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value,
 				onChange: func
 			}
 		});
@@ -2560,8 +2580,8 @@ function create_if_block_4(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const colorpicker_changes = {};
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576) colorpicker_changes.value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value;
-			if (dirty[0] & /*propsByType*/ 8192) colorpicker_changes.onChange = func;
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288) colorpicker_changes.value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value;
+			if (dirty[0] & /*propsByType*/ 4096) colorpicker_changes.onChange = func;
 			colorpicker.$set(colorpicker_changes);
 		},
 		i(local) {
@@ -2579,12 +2599,12 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (422:47) 
+// (439:47) 
 function create_if_block_3(ctx) {
 	let select;
 	let mounted;
 	let dispose;
-	let each_value_1 = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].choices();
+	let each_value_1 = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].choices();
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
@@ -2592,7 +2612,7 @@ function create_if_block_3(ctx) {
 	}
 
 	function change_handler_2(...args) {
-		return /*change_handler_2*/ ctx[37](/*selectedName*/ ctx[60], ...args);
+		return /*change_handler_2*/ ctx[38](/*selectedName*/ ctx[63], ...args);
 	}
 
 	return {
@@ -2618,8 +2638,8 @@ function create_if_block_3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576) {
-				each_value_1 = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].choices();
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288) {
+				each_value_1 = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].choices();
 				let i;
 
 				for (i = 0; i < each_value_1.length; i += 1) {
@@ -2652,7 +2672,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (414:16) {#if propType === 'slider'}
+// (430:16) {#if propType === 'slider'}
 function create_if_block_2(ctx) {
 	let input;
 	let input_min_value;
@@ -2661,13 +2681,13 @@ function create_if_block_2(ctx) {
 	let input_value_value;
 	let t0;
 	let span;
-	let t1_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].displayed + "";
+	let t1_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].displayed + "";
 	let t1;
 	let mounted;
 	let dispose;
 
 	function change_handler_1(...args) {
-		return /*change_handler_1*/ ctx[36](/*selectedName*/ ctx[60], ...args);
+		return /*change_handler_1*/ ctx[37](/*selectedName*/ ctx[63], ...args);
 	}
 
 	return {
@@ -2677,10 +2697,10 @@ function create_if_block_2(ctx) {
 			span = element("span");
 			t1 = text(t1_value);
 			attr(input, "type", "range");
-			attr(input, "min", input_min_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].min);
-			attr(input, "max", input_max_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].max);
-			attr(input, "step", input_step_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].step || 1);
-			input.value = input_value_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value;
+			attr(input, "min", input_min_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].min);
+			attr(input, "max", input_max_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].max);
+			attr(input, "step", input_step_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].step || 1);
+			input.value = input_value_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value;
 			attr(span, "class", "current-value");
 		},
 		m(target, anchor) {
@@ -2697,23 +2717,23 @@ function create_if_block_2(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_min_value !== (input_min_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].min)) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && input_min_value !== (input_min_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].min)) {
 				attr(input, "min", input_min_value);
 			}
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_max_value !== (input_max_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].max)) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && input_max_value !== (input_max_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].max)) {
 				attr(input, "max", input_max_value);
 			}
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_step_value !== (input_step_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].step || 1)) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && input_step_value !== (input_step_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].step || 1)) {
 				attr(input, "step", input_step_value);
 			}
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_value_value !== (input_value_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value)) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && input_value_value !== (input_value_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value)) {
 				input.value = input_value_value;
 			}
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && t1_value !== (t1_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].displayed + "")) set_data(t1, t1_value);
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && t1_value !== (t1_value = /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].displayed + "")) set_data(t1, t1_value);
 		},
 		i: noop$1,
 		o: noop$1,
@@ -2727,10 +2747,10 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (424:24) {#each allCurrentPropDefs[selectedName].choices() as choice}
+// (441:24) {#each allCurrentPropDefs[selectedName].choices() as choice}
 function create_each_block_1(ctx) {
 	let option;
-	let t_value = /*choice*/ ctx[63] + "";
+	let t_value = /*choice*/ ctx[66] + "";
 	let t;
 	let option_selected_value;
 	let option_value_value;
@@ -2739,8 +2759,8 @@ function create_each_block_1(ctx) {
 		c() {
 			option = element("option");
 			t = text(t_value);
-			option.selected = option_selected_value = /*choice*/ ctx[63] == /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value || null;
-			option.__value = option_value_value = " " + /*choice*/ ctx[63] + " ";
+			option.selected = option_selected_value = /*choice*/ ctx[66] == /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value || null;
+			option.__value = option_value_value = " " + /*choice*/ ctx[66] + " ";
 			option.value = option.__value;
 		},
 		m(target, anchor) {
@@ -2748,13 +2768,13 @@ function create_each_block_1(ctx) {
 			append(option, t);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && t_value !== (t_value = /*choice*/ ctx[63] + "")) set_data(t, t_value);
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && t_value !== (t_value = /*choice*/ ctx[66] + "")) set_data(t, t_value);
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && option_selected_value !== (option_selected_value = /*choice*/ ctx[63] == /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[60]].value || null)) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && option_selected_value !== (option_selected_value = /*choice*/ ctx[66] == /*allCurrentPropDefs*/ ctx[13][/*selectedName*/ ctx[63]].value || null)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && option_value_value !== (option_value_value = " " + /*choice*/ ctx[63] + " ")) {
+			if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 12288 && option_value_value !== (option_value_value = " " + /*choice*/ ctx[66] + " ")) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
@@ -2765,28 +2785,37 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (402:8) {#each Object.entries(propsByType) as [propType, choices]}
+// (417:8) {#each Object.entries(propsByType) as [propType, choices]}
 function create_each_block(ctx) {
 	let div;
-	let t;
+	let t0;
+	let span;
+	let t2;
 	let current_block_type_index;
 	let if_block1;
 	let current;
+	let mounted;
+	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*choices*/ ctx[59].props.length > 1) return create_if_block_5;
+		if (/*choices*/ ctx[62].props.length > 1) return create_if_block_5;
 		return create_else_block;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
+
+	function click_handler_3() {
+		return /*click_handler_3*/ ctx[36](/*selectedName*/ ctx[63]);
+	}
+
 	const if_block_creators = [create_if_block_2, create_if_block_3, create_if_block_4];
 	const if_blocks = [];
 
 	function select_block_type_1(ctx, dirty) {
-		if (/*propType*/ ctx[58] === 'slider') return 0;
-		if (/*propType*/ ctx[58] == 'select') return 1;
-		if (/*propType*/ ctx[58] == 'color') return 2;
+		if (/*propType*/ ctx[61] === 'slider') return 0;
+		if (/*propType*/ ctx[61] == 'select') return 1;
+		if (/*propType*/ ctx[61] == 'color') return 2;
 		return -1;
 	}
 
@@ -2798,22 +2827,35 @@ function create_each_block(ctx) {
 		c() {
 			div = element("div");
 			if_block0.c();
-			t = space();
+			t0 = space();
+			span = element("span");
+			span.textContent = "✕";
+			t2 = space();
 			if (if_block1) if_block1.c();
+			attr(span, "class", "delete");
 			attr(div, "class", "prop-section");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if_block0.m(div, null);
-			append(div, t);
+			append(div, t0);
+			append(div, span);
+			append(div, t2);
 
 			if (~current_block_type_index) {
 				if_blocks[current_block_type_index].m(div, null);
 			}
 
 			current = true;
+
+			if (!mounted) {
+				dispose = listen(span, "click", click_handler_3);
+				mounted = true;
+			}
 		},
-		p(ctx, dirty) {
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
 				if_block0.p(ctx, dirty);
 			} else {
@@ -2822,7 +2864,7 @@ function create_each_block(ctx) {
 
 				if (if_block0) {
 					if_block0.c();
-					if_block0.m(div, t);
+					if_block0.m(div, t0);
 				}
 			}
 
@@ -2877,11 +2919,14 @@ function create_each_block(ctx) {
 			if (~current_block_type_index) {
 				if_blocks[current_block_type_index].d();
 			}
+
+			mounted = false;
+			dispose();
 		}
 	};
 }
 
-// (436:8) {#if currentRule === 'inline' && bringableToFront[selectedElemIndex] !== null}
+// (453:8) {#if currentRule === 'inline' && bringableToFront[selectedElemIndex] !== null}
 function create_if_block_1(ctx) {
 	let div;
 	let mounted;
@@ -2892,7 +2937,7 @@ function create_if_block_1(ctx) {
 			div = element("div");
 			div.textContent = "Bring to front";
 			attr(div, "class", "btn");
-			toggle_class(div, "active", /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[4]] === true);
+			toggle_class(div, "active", /*bringableToFront*/ ctx[14][/*selectedElemIndex*/ ctx[4]] === true);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2903,8 +2948,8 @@ function create_if_block_1(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*bringableToFront, selectedElemIndex*/ 32784) {
-				toggle_class(div, "active", /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[4]] === true);
+			if (dirty[0] & /*bringableToFront, selectedElemIndex*/ 16400) {
+				toggle_class(div, "active", /*bringableToFront*/ ctx[14][/*selectedElemIndex*/ ctx[4]] === true);
 			}
 		},
 		d(detaching) {
@@ -2994,7 +3039,7 @@ function create_fragment(ctx) {
 			t10 = space();
 			if (if_block1) if_block1.c();
 			set_style(div0, "position", "absolute");
-			attr(path, "d", /*pathWithHoles*/ ctx[11]);
+			attr(path, "d", /*pathWithHoles*/ ctx[10]);
 			attr(clipPath, "id", "overlay-clip");
 			attr(clipPath, "clip-rule", "evenodd");
 			attr(rect, "y", "0");
@@ -3006,8 +3051,8 @@ function create_fragment(ctx) {
 			attr(svg, "version", "1.1");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "width", svg_width_value = /*pageDimensions*/ ctx[12].width);
-			attr(svg, "height", svg_height_value = /*pageDimensions*/ ctx[12].height);
+			attr(svg, "width", svg_width_value = /*pageDimensions*/ ctx[11].width);
+			attr(svg, "height", svg_height_value = /*pageDimensions*/ ctx[11].height);
 			attr(div1, "class", "close-button");
 			attr(div2, "class", "select-tab");
 			attr(div3, "class", "select-tab");
@@ -3047,7 +3092,7 @@ function create_fragment(ctx) {
 
 			append(div4, t10);
 			if (if_block1) if_block1.m(div4, null);
-			/*div4_binding*/ ctx[39](div4);
+			/*div4_binding*/ ctx[40](div4);
 			current = true;
 
 			if (!mounted) {
@@ -3060,15 +3105,15 @@ function create_fragment(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (!current || dirty[0] & /*pathWithHoles*/ 2048) {
-				attr(path, "d", /*pathWithHoles*/ ctx[11]);
+			if (!current || dirty[0] & /*pathWithHoles*/ 1024) {
+				attr(path, "d", /*pathWithHoles*/ ctx[10]);
 			}
 
-			if (!current || dirty[0] & /*pageDimensions*/ 4096 && svg_width_value !== (svg_width_value = /*pageDimensions*/ ctx[12].width)) {
+			if (!current || dirty[0] & /*pageDimensions*/ 2048 && svg_width_value !== (svg_width_value = /*pageDimensions*/ ctx[11].width)) {
 				attr(svg, "width", svg_width_value);
 			}
 
-			if (!current || dirty[0] & /*pageDimensions*/ 4096 && svg_height_value !== (svg_height_value = /*pageDimensions*/ ctx[12].height)) {
+			if (!current || dirty[0] & /*pageDimensions*/ 2048 && svg_height_value !== (svg_height_value = /*pageDimensions*/ ctx[11].height)) {
 				attr(svg, "height", svg_height_value);
 			}
 
@@ -3085,7 +3130,7 @@ function create_fragment(ctx) {
 				if_block0 = null;
 			}
 
-			if (dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex, selectRule*/ 1048628) {
+			if (dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex, selectRule*/ 2097204) {
 				each_value_4 = getRuleNames(/*allRules*/ ctx[2][/*selectedElemIndex*/ ctx[4]]);
 				let i;
 
@@ -3108,7 +3153,7 @@ function create_fragment(ctx) {
 				each_blocks_1.length = each_value_4.length;
 			}
 
-			if (dirty[0] & /*selectedTypeIndex, allTypes, selectedElemIndex, currentRule, hasDisplayedCustom*/ 65752) {
+			if (dirty[0] & /*selectedTypeIndex, allTypes, selectedElemIndex, currentRule, hasDisplayedCustom*/ 98392) {
 				each_value_3 = /*allTypes*/ ctx[3][/*selectedElemIndex*/ ctx[4]] || [];
 				let i;
 
@@ -3175,7 +3220,7 @@ function create_fragment(ctx) {
 			destroy_each(each_blocks_1, detaching);
 			destroy_each(each_blocks, detaching);
 			if (if_block1) if_block1.d();
-			/*div4_binding*/ ctx[39](null);
+			/*div4_binding*/ ctx[40](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -3289,10 +3334,10 @@ function instance($$self, $$props, $$invalidate) {
 		"font-size": {
 			type: "slider",
 			min: 0,
-			max: 30,
+			max: 40,
 			suffix: 'px'
 		},
-		"font-weight": { type: "slider", min: 0, max: 500 },
+		"font-weight": { type: "slider", min: 0, max: 800 },
 		"color": { type: "color" },
 		"stroke-width": {
 			type: "slider",
@@ -3348,13 +3393,11 @@ function instance($$self, $$props, $$invalidate) {
 	let allCurrentPropDefs = {}; // propName => selectorDef
 	let bringableToFront = []; // null = not bringable, true = bringable, false = was bringed
 	let hasDisplayedCustom = false;
-
-	// $: curType = allTypes[selectedElemIndex]?.[selectedTypeIndex];
 	let curType;
 
 	onMount(() => {
 		close();
-		$$invalidate(27, elementToListen = self.parentNode);
+		$$invalidate(28, elementToListen = self.parentNode);
 		document.body.appendChild(self);
 		document.body.appendChild(helperElemWrapper);
 		document.body.appendChild(positionAnchor);
@@ -3380,6 +3423,44 @@ function instance($$self, $$props, $$invalidate) {
 		return getFonts();
 	}
 
+	function initAndGroup() {
+		const allProps = { ...cssPropByType, ...customProps };
+		const _allCurrentPropDefs = pick(allProps, propByType[curType]);
+
+		Object.keys(_allCurrentPropDefs).forEach(key => {
+			const propSelectType = _allCurrentPropDefs[key].type;
+			let retrieveType = 'number';
+			if (propSelectType === 'color') retrieveType = 'rgb'; else if (propSelectType === 'select') retrieveType = 'raw';
+
+			if (_allCurrentPropDefs[key].getter) {
+				const val = _allCurrentPropDefs[key].getter(currentElement);
+
+				if (val === null) {
+					delete _allCurrentPropDefs[key];
+					return;
+				}
+
+				_allCurrentPropDefs[key].value = val;
+				_allCurrentPropDefs[key].displayed = val;
+			} else {
+				_allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, 'raw');
+				_allCurrentPropDefs[key].value = getComputedPropValue(currentElement, key, retrieveType);
+			}
+		});
+
+		$$invalidate(12, propsByType = Object.entries(_allCurrentPropDefs).reduce(
+			(byType, [propName, selectorDef]) => {
+				const selectorType = selectorDef.type;
+				if (!(selectorType in byType)) byType[selectorType] = { selected: 0, props: [propName] }; else byType[selectorType].props.push(propName);
+				return byType;
+			},
+			{}
+		));
+
+		$$invalidate(13, allCurrentPropDefs = _allCurrentPropDefs);
+		updateHelpers();
+	}
+
 	let warningDisplayed = new Set();
 
 	function getMatchedCSSRules(elems) {
@@ -3464,17 +3545,17 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(4, selectedElemIndex = 0);
 		$$invalidate(5, selectedRuleIndex = 0);
 		$$invalidate(6, selectedTypeIndex = 0);
-		$$invalidate(15, bringableToFront = []);
+		$$invalidate(14, bringableToFront = []);
 		$$invalidate(3, allTypes = []);
 		$$invalidate(2, allRules = []);
 		$$invalidate(1, targetsToSearch = [el, ...getAdditionalElems(el)]);
 		$$invalidate(3, allTypes = getEditableTypes(targetsToSearch));
-		$$invalidate(16, hasDisplayedCustom = false);
+		$$invalidate(15, hasDisplayedCustom = false);
 		$$invalidate(2, allRules = getMatchedCSSRules(targetsToSearch));
 
 		for (let def of Object.values(customProps)) {
 			if (def.getter(el) !== null) {
-				$$invalidate(16, hasDisplayedCustom = true);
+				$$invalidate(15, hasDisplayedCustom = true);
 				break;
 			}
 		}
@@ -3490,9 +3571,9 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	function close() {
-		$$invalidate(9, self.style.display = "none", self);
-		$$invalidate(10, helperElemWrapper.style.display = "none", helperElemWrapper);
-		$$invalidate(11, pathWithHoles = '');
+		$$invalidate(8, self.style.display = "none", self);
+		$$invalidate(9, helperElemWrapper.style.display = "none", helperElemWrapper);
+		$$invalidate(10, pathWithHoles = '');
 	}
 
 	function isOpened() {
@@ -3512,13 +3593,14 @@ function instance($$self, $$props, $$invalidate) {
 		? pageDimensions.height - 450
 		: y + 10;
 
-		$$invalidate(9, self.style.left = x + "px", self);
-		$$invalidate(9, self.style.top = y + "px", self);
-		$$invalidate(10, helperElemWrapper.style.display = "block", helperElemWrapper);
-		$$invalidate(9, self.style.display = "block", self);
+		$$invalidate(8, self.style.left = x + "px", self);
+		$$invalidate(8, self.style.top = y + "px", self);
+		$$invalidate(9, helperElemWrapper.style.display = "block", helperElemWrapper);
+		$$invalidate(8, self.style.display = "block", self);
 	}
 
-	function updateHelpers() {
+	async function updateHelpers() {
+		await tick();
 		if (!currentRule) return;
 		let matching;
 
@@ -3528,7 +3610,7 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		const boundingBoxes = matching.map(el => getBoundingBoxInfos(el, 10));
-		$$invalidate(11, pathWithHoles = computeContours(boundingBoxes, pageDimensions));
+		$$invalidate(10, pathWithHoles = computeContours(boundingBoxes, pageDimensions));
 	}
 
 	function _updateProp(propName, val, suffix) {
@@ -3543,8 +3625,8 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		} else currentRule.style.setProperty(propName, finalValue);
 
-		$$invalidate(14, allCurrentPropDefs[propName].value = val, allCurrentPropDefs);
-		$$invalidate(14, allCurrentPropDefs[propName].displayed = finalValue, allCurrentPropDefs);
+		$$invalidate(13, allCurrentPropDefs[propName].value = val, allCurrentPropDefs);
+		$$invalidate(13, allCurrentPropDefs[propName].displayed = finalValue, allCurrentPropDefs);
 		onStyleChanged(currentElement, currentRule, propName, finalValue);
 		updateHelpers();
 	}
@@ -3558,7 +3640,7 @@ function instance($$self, $$props, $$invalidate) {
 		const marginTop = parseInt(bodyStyle.marginTop);
 		const marginBottom = parseInt(bodyStyle.marginBottom);
 
-		$$invalidate(12, pageDimensions = {
+		$$invalidate(11, pageDimensions = {
 			width: document.body.offsetWidth + marginLeft + marginRight,
 			height: document.body.offsetHeight + marginTop + marginBottom
 		});
@@ -3576,10 +3658,20 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	function bringToFront() {
-		$$invalidate(15, bringableToFront[selectedElemIndex] = false, bringableToFront);
+		$$invalidate(14, bringableToFront[selectedElemIndex] = false, bringableToFront);
 		currentElement.parentNode.appendChild(currentElement);
 	}
 
+	function deleteProp(propName) {
+		if (currentRule === 'inline') {
+			currentElement.style.removeProperty(propName);
+		} else {
+			currentRule.style.removeProperty(propName);
+		}
+
+		initAndGroup();
+	}
+
 	function selectRule(ruleIndex) {
 		const newRule = allRules[selectedElemIndex]?.[ruleIndex];
 
@@ -3593,14 +3685,14 @@ function instance($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			positionAnchor = $$value;
-			$$invalidate(8, positionAnchor);
+			$$invalidate(7, positionAnchor);
 		});
 	}
 
 	function svg_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			helperElemWrapper = $$value;
-			$$invalidate(10, helperElemWrapper);
+			$$invalidate(9, helperElemWrapper);
 		});
 	}
 
@@ -3618,10 +3710,11 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	const change_handler = async (choices, each_value, each_index, e) => {
-		$$invalidate(13, each_value[each_index][1].selected = e.target.value, propsByType);
+		$$invalidate(12, each_value[each_index][1].selected = e.target.value, propsByType);
 		await tick();
 	};
 
+	const click_handler_3 = selectedName => deleteProp(selectedName);
 	const change_handler_1 = (selectedName, e) => updateProp(selectedName, e.target.value, allCurrentPropDefs[selectedName].suffix, e.target);
 	const change_handler_2 = (selectedName, e) => updateProp(selectedName, e.target.value);
 	const func = (selectedName, color) => updateProp(selectedName, color);
@@ -3629,19 +3722,19 @@ function instance($$self, $$props, $$invalidate) {
 	function div4_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			self = $$value;
-			$$invalidate(9, self);
+			$$invalidate(8, self);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('getAdditionalElems' in $$props) $$invalidate(21, getAdditionalElems = $$props.getAdditionalElems);
-		if ('listenOnClick' in $$props) $$invalidate(22, listenOnClick = $$props.listenOnClick);
-		if ('onStyleChanged' in $$props) $$invalidate(23, onStyleChanged = $$props.onStyleChanged);
-		if ('customProps' in $$props) $$invalidate(24, customProps = $$props.customProps);
+		if ('getAdditionalElems' in $$props) $$invalidate(22, getAdditionalElems = $$props.getAdditionalElems);
+		if ('listenOnClick' in $$props) $$invalidate(23, listenOnClick = $$props.listenOnClick);
+		if ('onStyleChanged' in $$props) $$invalidate(24, onStyleChanged = $$props.onStyleChanged);
+		if ('customProps' in $$props) $$invalidate(25, customProps = $$props.customProps);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*elementToListen*/ 134217728) {
+		if ($$self.$$.dirty[0] & /*elementToListen*/ 268435456) {
 			{
 				if (elementToListen !== null) {
 					init();
@@ -3650,58 +3743,25 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[0] & /*targetsToSearch, selectedElemIndex*/ 18) {
-			$$invalidate(29, currentElement = targetsToSearch[selectedElemIndex]);
+			currentElement = targetsToSearch[selectedElemIndex];
 		}
 
 		if ($$self.$$.dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex*/ 52) {
-			$$invalidate(7, currentRule = allRules[selectedElemIndex]?.[selectedRuleIndex]);
+			$$invalidate(16, currentRule = allRules[selectedElemIndex]?.[selectedRuleIndex]);
 		}
 
-		if ($$self.$$.dirty[0] & /*allTypes, selectedElemIndex, selectedTypeIndex, curType*/ 268435544) {
+		if ($$self.$$.dirty[0] & /*allTypes, selectedElemIndex, selectedTypeIndex, curType*/ 536871000) {
 			{
 				if (allTypes[selectedElemIndex]?.[selectedTypeIndex] !== curType) {
-					$$invalidate(28, curType = allTypes[selectedElemIndex]?.[selectedTypeIndex]);
+					$$invalidate(29, curType = allTypes[selectedElemIndex]?.[selectedTypeIndex]);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*curType, currentRule, customProps, currentElement*/ 822083712) {
+		if ($$self.$$.dirty[0] & /*curType, selectedRuleIndex, selectedElemIndex*/ 536870960) {
 			{
-				if (curType && currentRule) {
-					const allProps = { ...cssPropByType, ...customProps };
-					const _allCurrentPropDefs = pick(allProps, propByType[curType]);
-
-					Object.keys(_allCurrentPropDefs).forEach(key => {
-						const propSelectType = _allCurrentPropDefs[key].type;
-						let retrieveType = 'number';
-						if (propSelectType === 'color') retrieveType = 'rgb'; else if (propSelectType === 'select') retrieveType = 'raw';
-
-						if (_allCurrentPropDefs[key].getter) {
-							const val = _allCurrentPropDefs[key].getter(currentElement);
-
-							if (val === null) {
-								delete _allCurrentPropDefs[key];
-								return;
-							}
-
-							_allCurrentPropDefs[key].value = val;
-							_allCurrentPropDefs[key].displayed = val;
-						} else {
-							_allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, 'raw');
-							_allCurrentPropDefs[key].value = getComputedPropValue(currentElement, key, retrieveType);
-						}
-					});
-
-					$$invalidate(13, propsByType = Object.entries(_allCurrentPropDefs).reduce(
-						(byType, [propName, selectorDef]) => {
-							const selectorType = selectorDef.type;
-							if (!(selectorType in byType)) byType[selectorType] = { selected: 0, props: [propName] }; else byType[selectorType].props.push(propName);
-							return byType;
-						},
-						{}
-					));
-
-					$$invalidate(14, allCurrentPropDefs = _allCurrentPropDefs);
+				if (curType || selectedRuleIndex || selectedElemIndex) {
+					initAndGroup();
 				}
 			}
 		}
@@ -3715,7 +3775,6 @@ function instance($$self, $$props, $$invalidate) {
 		selectedElemIndex,
 		selectedRuleIndex,
 		selectedTypeIndex,
-		currentRule,
 		positionAnchor,
 		self,
 		helperElemWrapper,
@@ -3725,9 +3784,11 @@ function instance($$self, $$props, $$invalidate) {
 		allCurrentPropDefs,
 		bringableToFront,
 		hasDisplayedCustom,
+		currentRule,
 		overlayClicked,
 		updateProp,
 		bringToFront,
+		deleteProp,
 		selectRule,
 		getAdditionalElems,
 		listenOnClick,
@@ -3737,13 +3798,13 @@ function instance($$self, $$props, $$invalidate) {
 		isOpened,
 		elementToListen,
 		curType,
-		currentElement,
 		div0_binding,
 		svg_binding,
 		click_handler,
 		click_handler_1,
 		click_handler_2,
 		change_handler,
+		click_handler_3,
 		change_handler_1,
 		change_handler_2,
 		func,
@@ -3762,13 +3823,13 @@ class InlineStyleEditor$1 extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				getAdditionalElems: 21,
-				listenOnClick: 22,
-				onStyleChanged: 23,
-				customProps: 24,
-				open: 25,
+				getAdditionalElems: 22,
+				listenOnClick: 23,
+				onStyleChanged: 24,
+				customProps: 25,
+				open: 26,
 				close: 0,
-				isOpened: 26
+				isOpened: 27
 			},
 			null,
 			[-1, -1, -1]
@@ -3776,7 +3837,7 @@ class InlineStyleEditor$1 extends SvelteComponent {
 	}
 
 	get open() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[26];
 	}
 
 	get close() {
@@ -3784,7 +3845,7 @@ class InlineStyleEditor$1 extends SvelteComponent {
 	}
 
 	get isOpened() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[27];
 	}
 }