Error: Cannot overwrite a zero-length range – use appendLeft or prependRight instead

[anatolieGhebea]

While writing a svelte component, after adding a @keyframe style rule in the style section I've got this error "Cannot overwrite a zero-length range – use appendLeft or prependRight instead". Browsing the svelte website (example section) I encountered the same problem, here is the link: https://svelte.dev/examples#hacker-news, the component is the List.svelte. after removing the @keyframe fade-in rule the example compiles and runs.

Any idea on how this can be fixed? Thanks!

[Conduitry]

I'm not getting an error on that example. Can you give a specific reproduction in the REPL?

[anatolieGhebea]

I'm not getting an error on that example. Can you give a specific reproduction in the REPL?

Not getting it anymore neither. Also, running npm install solved the problem in my local project. As mentioned I was getting the error when the style of a component had @keyframe rule, example: component.svelte

<div class="container">
   <h1>Test component</h1> 
   <div class="lds-facebook"><div></div><div></div><div></div></div>
</div>
<script>
</script>
<style>
[...]
@keyframes lds-facebook {
  0% {
    top: 0;
    height: 2rem;
  }
  50%, 100% {
    top: .3rem;
    height: 1.4rem;
  }
}
[...]
</style>

After removing @keyframe from style, was compiling without errors.

Maybe some of the latest commits solved the issue.

Thank you @Conduitry for the response!

[rob-balfre]

FYI I'm seeing this error sometimes when using svelte-select in the REPL (screenshot attached) and locally after updating to v3.15.0 of Svelte

Error: Cannot overwrite a zero-length range – use appendLeft or prependRight instead
    at MagicString.overwrite (/.../node_modules/svelte/node_modules/magic-string/dist/magic-string.es.js:641:11)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:134:12
    at Array.forEach (<anonymous>)
    at Declaration$1.transform (/Users/robertbalfre/.../svelte/src/compiler/compile/css/Stylesheet.ts:130:29)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:104:56
    at Array.forEach (<anonymous>)
    at Rule$1.transform (/.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:104:21)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:401:11
    at Array.forEach (<anonymous>)
    at Stylesheet.render (/.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:400:18)

Restarting the dev server or saving and refreshing the REPL usually removes the error. Very odd!

[xtance]

Bumped into this error when tried to place {/each} and {/if} on the same line Simply putting them next to each other on different lines solved this

[UjjwalOnGit]

FYI I'm seeing this error sometimes when using svelte-select in the REPL (screenshot attached) and locally after updating to v3.15.0 of Svelte

Error: Cannot overwrite a zero-length range – use appendLeft or prependRight instead
    at MagicString.overwrite (/.../node_modules/svelte/node_modules/magic-string/dist/magic-string.es.js:641:11)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:134:12
    at Array.forEach (<anonymous>)
    at Declaration$1.transform (/Users/robertbalfre/.../svelte/src/compiler/compile/css/Stylesheet.ts:130:29)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:104:56
    at Array.forEach (<anonymous>)
    at Rule$1.transform (/.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:104:21)
    at /.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:401:11
    at Array.forEach (<anonymous>)
    at Stylesheet.render (/.../node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:400:18)

Restarting the dev server or saving and refreshing the REPL usually removes the error. Very odd!

it not worked for me